change of image on mouseover

  caro456 13:58 24 Oct 08
Locked

Does anyone know an easy way to achieve the effect on this web page, with the two photos at the bottom
click here
where the photos are initially blurred, then become sharper as the mouse is moved over them?
I am using Netobjects Fusion 10.
I would also like to use my photos as links to other pages, but can do this in netobjects using the hotspots.

  Kemistri 17:08 24 Oct 08

That site has used JavaScript to switch between two images, which I think is OK in this context as those who cannot or do not wish to permit scripts are not losing any functionality at all. But I would prefer to use CSS to do it, partly because it takes less code and partly because everyone will see the effect. I won't bother posting the necessary declarations, though, (unless you want me to) as I see that you're using a WYSIWYG editor and I don't know whether it provides code view and editing.

  Eric10 13:12 25 Oct 08

If you can use a code view in your editor then this can be achieved with a simple onmouseover/onmouseout.

<a href="#"><img onmouseover="roll.src='second_image.jpg';" onmouseout="roll.src='initial_image.jpg'" src="initial_image.jpg" alt="image description" name="roll"></a>

"initial_image.jpg" is the image that is shown by default and returns when the mouse is moved off the picture. The blurred image in your example.
"second_image.jpg" is the image that appears when rolled over.

  Eric10 13:23 25 Oct 08

If you want to use the rollover to lanch another page when clicked then just replace the hash character in <a href="#"> with the name of the page to launch.

  caro456 16:27 25 Oct 08

Thanks for the replies, I have found a solution now using netobjects. I was trying to put one image on top of the other on the page and just got flickering between the two everytime I moved the mouse! But after trawling the netobjects forums I have discovered that netobjects has a nifty little solution in the form of a picture rollover function which does exactly what I want without me having to put code into the html - I haven't got on particularly well with that in the past!

This thread is now locked and can not be replied to.

Surface Pro (2017) vs Surface Pro 4

20 groundbreaking 3D animation techniques

How to mine Bitcoin on Mac