mouseover image help

[petalmax]

I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.

[Old Pedant]

You have to have two images.

Oh, you could change the *BORDER* color easy enough, but you can change the contents of an image, per se. (I guess you could put a semi-transparent overlay over the image, but that would (a) be a LOT more work and (b) obscure the image somewhat. So just go with two images. Or be happy with the border color changing.)

[Lapsi]

you need to change colours using any image editor, and then to set the second image as the mouseover

[petalmax]

Thanks for the reply. Would you know how to make the two images switch with a mouseover? I'm assuming it'd be javascript?

[petalmax]

Yes. thank you. I didn't like the border effect. Would you know how to switch two different color graphics with a mouseover? Thanks.

[TinyScript]

if you just want your image to change brightness, you might try this.


http://h1.ripway.com/stirfry/javascr...acitySwap.html

[petalmax]

I couldn't tell from this link how an image changes brightness. It shows a small box upper left side that doesn't change at all. I checked this in Safari and Firefox browsers. Thanks.

[TinyScript]

don't know what to tell you. The image changes opacity onmouseover and brightens up since the background is no longer visible through it. It works in opera and firefox and if you find out the CSS for IE you can make it work for that too, but I'm too lazy to worry about IE.

[randomuser773]

I couldn't tell from this link how an image changes brightness. It shows a small box upper left side that doesn't change at all. I checked this in Safari and Firefox browsers. Thanks.

Another way is to fade all other links/images when hovering.

[Actinia]

You could change some aspects of the image without javascript simply by using css. You could declare a div within the link, and make your image the background image. Then declare a hover property to change the image:

<div id="div1"><a href="#">&nbsp;</a></div>

Your styles would be something like:

#div1 a {display: block; background-image: url(Trees1.jpg); width:300px; height: 247px; }
#div1 a:hover {background-image: url(Trees2.jpg); }

You may find it helps to pre-load the hover image. Note I have given the div a height and width corresponding to my images. Here is a example of this: http://www.actinia.me.uk/hover/hover.htm

John

[Lapsi]

Thanks for the reply. Would you know how to make the two images switch with a mouseover? I'm assuming it'd be javascript?

If you use e.g. Dreamwaver, it can be added in the design mode, so that you don't need to write any scipt

[Renegades]

You may find it helps to pre-load the hover image. Note I have given the div a height and width corresponding to my images. Here is a example of this: http://www.actinia.me.uk/hover/hover.htm

John

Hello
I found the rollover effect quite delaying all the time so I tried to experiment a mouse-over with a "semi-transparent" using the DIV tags within a DIV container. Got it almost working but if I mouseover the original image (which actually should still be seen, but dimmed, because of the semi-transparent, so this original image just disappears... I am a bit lost here and wonder if someone here could help out?

I's all CSS, no java script

Thanks a lot

[petalmax]

You have to have two images.

Oh, you could change the *BORDER* color easy enough, but you can change the contents of an image, per se. (I guess you could put a semi-transparent overlay over the image, but that would (a) be a LOT more work and (b) obscure the image somewhat. So just go with two images. Or be happy with the border color changing.)

Old Pendant, First, how do I thank you, and anyone else for a reply? Second, could you give an example of the border color changing around an image with a hover, and when already visited? I'm assuming it'd be CSS. Thanks!

[petalmax]

If you use e.g. Dreamwaver, it can be added in the design mode, so that you don't need to write any scipt

Thanks, but I don't use dreamweaver. Although, sometimes I wish I did!

[petalmax]

Hello
I found the rollover effect quite delaying all the time so I tried to experiment a mouse-over with a "semi-transparent" using the DIV tags within a DIV container. Got it almost working but if I mouseover the original image (which actually should still be seen, but dimmed, because of the semi-transparent, so this original image just disappears... I am a bit lost here and wonder if someone here could help out?

I's all CSS, no java script

Thanks a lot

Would you have an example of how to preload images? I don't seem to have a problem with images loading here, but, if there's a way to make it more eficient for others.. Thanks!