[Javascript] Fade transition onmouseover/out based on CSS :hover?

Wed Sep 26 08:48:35 CDT 2007

Barney, this may not be exactly what you are looking for, but it works for
me.  I took my original JPG, pasted it to MS Paint, and then saved it as a
16 color with a different name.  I then switch between the two pictures
based on mouse over and out.  I have pasted the code that I use below.  I
have also attached my two example pictures, but I am not sure if they will
get through the listserve.

Tim
<html><head>
<script language=JavaScript>
<!--
//
_____________________________________________________________________________
function ImageClick() {
alert ("Image was clicked");
}
//
_____________________________________________________________________________
-->
</script></head>
<title id=onetidTitle>Intranet - Datagate Tools Segment</title>
<body>
<form name="DatagateTools_Segment_File">
<img id=imgMyImage src="Scooby_color_16.jpg"
OnClick="ImageClick()"
OnMouseOver="imgMyImage.src='Scooby_color.jpg'"
OnMouseOut="imgMyImage.src='Scooby_color_16.jpg'">
</form>
</body></html>

> Hello list,
>
> I've read my way through the most promising articles returned by google,
> but everything I find is way too elaborate and bloated (and every other
> javascript dilema floated on the internet seems to be asked and answered
> in terms of jQuery terminology).
>
> I have numerous objects with completely satisfactory CSS hover rules,
> but I would like a gradual transition (for the state to fade in/out over
> 300 millisecs or something) onmouseover and -out. I'm not looking for
> something to parse my CSS and translate the results, but the fact that
> the state change can be effected by CSS indicates how simple the actual
> transition is – no content difference, basically.
>
> How can I achieve this effect?
>
>
> Thanks in advance,
> Barney
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript
>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Scooby_color.jpg
Type: image/pjpeg
Size: 2733 bytes
Desc: not available
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20070926/f0029904/attachment.bin>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Scooby_color_16.JPG
Type: image/pjpeg
Size: 2217 bytes
Desc: not available
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20070926/f0029904/attachment-0001.bin>