[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