PDA

View Full Version : CSS image hover? Please, please help!

akalsha
08-04-2002, 12:28 AM
Hi all. I'm new here. Looks cool!
I have a question that I'm hoping someone here will be able to answer. I am trying to find out how to get an image (like an arrow or something) to hover beside a link when the mouse is over the link. I'm not talking about a rollover. The link itself doesn't change, a picture appears beside it. I know there's a way to do it, but I have no idea how. I have a feeling there's a really simple piece of css code that will do it.
Any help would be greatly appreciated. :)
justame
08-04-2002, 03:26 AM
aka...
you stilll could just a doŽ it with the onmouse over...
have just a twoŽ images...
one is like...
link one
n' the other is like...
link one -->

only the one with the just a -->Ž shows on mouse over...in the first one??? the image is as wide as the second however the --> isnt on it...

does that help??? probably could be just a doneŽ with css tooo 'cept /me doesnt use it thattt much to know...sorrry...
Pooh
08-04-2002, 09:38 AM
I don't know of a Css way....


<img src ="your_arrow.gif" id="arrow" style="visibility:hidden"><a href="#" onmouseover="arrow.style.visibility='visible'" onmouseout="arrow.style.visibility='hidden'">click here</a>
akalsha
08-04-2002, 03:00 PM
I knew it would be something relatively simple. Thanks for your help! If you only knew how much I appreciate it! :)
I have another related question please:
there must be a code to have the image pre-load so there won't be any delay when someone hovers on the link discussed below. Does anyone know what that is?
boxer_1
08-04-2002, 03:35 PM
Hi, here's a script you might want to look at (onMouseover arrow): http://javascriptkit.com/script/script2/arrowimage.shtml

For the pre-loading, here's an example

<html>
<head>
<title>Example</title>
<script language="JavaScript" type="text/javascript">
image1 = new Image();
image1.src = "yourImage.gif";
</script>
</head>
<body>
Content here...
</body>
</html>

Just change the bolded "yourImage.gif" to the name of the image you want to pre-load ;). To add more images:

<script language="JavaScript" type="text/javascript">
image2 = new Image();
image2.src = "yourImage_2.gif";
</script>

And so on...any help?
akalsha
08-04-2002, 03:41 PM
Yes, that's a big help as well. How did you find that script?! I spent all day looking for a way to do this. I guess I just wasn't putting the right words in the search engine, because I kept finding standard rollover scripts hehe.
Thanks. :)
boxer_1
08-04-2002, 03:53 PM
Originally posted by akalsha
Yes, that's a big help as well. How did you find that script?! I spent all day looking for a way to do this. I guess I just wasn't putting the right words in the search engine, because I kept finding standard rollover scripts hehe.
Thanks. :)

You're welcome :thumbsup: !