Help with some mouseover code

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I'm using the code below for a mouseover and its not working as I want.
I would like it to work as follows

1. Link word 'test' to be bold, black and not underlined.
2. On mouseover selected image to appear and 'test' to still be visible.
3. On mouseout 'test' to revert back to original state.

I found this page on an old post which Boomer was involved with

http://hindsite.synthasite.com/little...

if you hover over answer this is what I'm after without the 'click here to find out more box'

Here is my code

<!---
<p><a style="text-decoration: none; color: rgb(0, 0, 0); font-weight: bold;" href="awards.php" onmouseover="this.src='http://www.leathersolutions.org/resou..." onmouseout="this.style.textDecoration='none'; this.style.color='#000000'; this.style.fontWeight='bold';">test </a><br></p>
--->

Any help with this code would be appreciated.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes

Posted 7 years ago

  • 1
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi David

Thanks for adding the code you are using to get the effect.  I've looked at Boomer's site you referenced, and there seems to be quite a bit of scripting going on to achieve the effect.  After some more digging, I see that the source of the code was taken from the Dynamic Web Coding site.  They have a selection of web coding scripts to use on your site, including Tooltips with Images.  This may be a helpful resource to start off with.

If you need more help, please add it to this thread.

Thank you
Nazlie
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Try this David:
<!--
<style type="text/css">
#awarda
{
text-decoration: none;
color: black;
font-weight: bold;
background:transparent;
}
#awarda:hover
{
background:url('http://www.leathersolutions.org/resou...;
}
</style>
<p><a id="awarda" href="awards.php">test </a><br></p>
-->


sincerely,
kevin
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Nazlie and Kevin thanks for the replies, I'm trying to change the image on a per link basis not a per page/site basis
This code enables me to change from the 'hand' to 'crosshair' etc on a per link basis by just adding it to the existing HTML

<!--
<a href="mypage.html" style="cursor:crosshair">click here</a>
-->

What I would like is to swap crosshair for an image related to a specific link then use the same code for another link but with a different image
Photo of Francois

Francois, Employee

  • 282 Posts
  • 19 Reply Likes
Hi David,

Here is the code you need to change it to an image of your choice:

<!--
<a href="mypage.html" style="cursor: url(mycursor.cur);">click here</a>
-->

To convert a .gif file to a .cur (cursor type) file, you'll need to use a cursor creator, which is pretty much just a bitmap with some header data. I'd use Irfanview if you do not have Visual Studio.

I hope this helps.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Francois
Thank you for your reply, I haven't been able to try your code as Irfanview will only convert .cur to .jpg .png etc and not the other way round. I've just spent an hour on google and there are plenty of file converters who will do this but I couldn't find any to do the reverse.
Perhaps you or someone reading this could recommend another converter.
Photo of Francois

Francois, Employee

  • 282 Posts
  • 19 Reply Likes
Hi David,

I've had a look around. You can try this web application too:
http://iconverticons.com

It converts your image to an .ico file.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Francois
Thanks for the info, unfortunately .ico files don't work with the code you supplied, no worries I've decided to dump the project as its becoming to much hassle
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi David,

If you still wish to pursue this, here's a link to the script I used.
http://www.dynamicdrive.com/dynamicin...

You can find more scripts here...
http://www.dynamicdrive.com/dynamicin...

Here's an example on one of my sites.
http://travelsa.cc/map-wc.php
(hover over the big dots)

Good luck :-)
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
OK Boomer thanks, this seems to be more of what I was looking for, will give it a go, if I become unstuck I'll post back if that's OK
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Boomer
I've had a good look at the script and it is exactly what I was looking for, I understand what I need to modify to my needs however the 2 external files ddimgtooltip.js and ddimgtooltip.css I assumed were just copied and pasted into an HTML widget and then modified but the first one just displays as text? Could you let me know where this file is supposed to be stored. Thanks
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
That's correct! Just copy the two files into two html widgets. (CSS first)

Remember, you need to wrap the two scripts as follows, else they will display as text. I assume this is what's happening to you?

<style type="text/css">
CSS goes here...
</style>

<script type="text/javascript">
javascript goes here...
</script>

If you could give me a link to your site, I can take a closer look.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Thanks for the offer Boomer but I now have a working link on a test page, I was unaware that the script had to be wrapped (why does the Dynamic Drive website assume people know that!)
The page I want this on has 4 seperate links mixed in with other text/images etc so I'll try to implement this in it and see if everything works.