[thelist] Image rollover check

Stephen Rider evolt_org at striderweb.com
Thu Mar 8 10:14:17 CST 2007


On Mar 6, 2007, at 4:31 PM, Eduardo Kienetz wrote:

> I'm wondering if this is the 'best' way of doing image rollover
> effect: http://www.noticiaslinux.com.br/tiras.php
> Put mouse over the strip image and check it out (I know it is a big
> image, I might leave only the color version in the future).

onmouseover="javascript:trocaImagem(true);"

you don't need the "javascript:" here, just say:

onmouseover="trocaImagem(true);"


RE: Unobtrusive JavaScript -- part of the concept is that the site  
should still have full function if the user for whatever reason  
doesn't have JavaScript turned on.  In this case, they will have no  
access to the image.

What you could do is wrap the image in a link.  The link will look  
something like this:

<a href="path-to-the-image" onclick="return false;"  
onmouseover="trocaImagem(true);" onmouseout="trocaImagem(false);">

The "return false" basically means "don't follow the link"; thus  
people with JavaScript will simply have the effect of the rollover.   
People without JS will be able to follow the link and see the color  
image if they want.  I think you can use CSS to prevent the mouse  
cursor from changing when mousing over the link.

I actually think it might be a bit better if they script fired on a  
click instead of mouseover, thus...

<a href="path-to-the-image" onclick="trocaImagem(); return false;">

In this case you would have to change the script a bit to look at the  
current image source and toggle between the two, instead of  
specifying "true/false" when calling it.

Either way, you might combine this with the speed trick suggested by  
Autin Harris:
> Use the "trick" of having only one image for both and use positioning.
> <http://wellstyled.com/css-nopreload-rollovers.html>


If you're at all interested in learning about manipulating HTML with  
unobtrusive JavaScript, the book "DOM Scripting", by Jeremy Kieth  
gets my highest recommendation:

<http://www.amazon.com/DOM-Scripting-Design-JavaScript-Document/dp/ 
1590595335/>

Regards,
Stephen Rider

P.S. -- I prefer the grayscale version.  :)



More information about the thelist mailing list