Blendtrans Filter With Onmouseover? anybody got a good code?

[nickmealey 0]

I need the best way to do a blendTrans filter, BUT IT HAS TO BE INCORPERATED INTO ONMOUSEOVER. I'd aprictiate it.

[andrewsmithy 1]

I did a blendTrans effect on one of my projects, and here is the code. I had this in my script tag:

 

// rollover functions    if (document.images) {      imagearray = new Array();      imagearray[0] = "images/nav1.gif";      imagearray[1] = "images/nav1on.gif";      inum = new Array();      for (i=0; i<imagearray.length; i++) {           inum[i] = new Image();           inum[i].src = imagearray[i];      }}function imgchange (imgName, imagenum) {    if (document.images) {      if (navigator.appName.indexOf("Microsoft Internet Explorer") {          // Internet Explorer          document[imgName].filters(0).apply();           document[imgName].src = inum[imagenum].src;      document[imgName].filters(0).play();      } else {          // Other browsers that don't support it           document[imgName].src = inum[imagenum].src;      }    }}

Next, you need to put this in the <style> tag:

    img {        filter: blendTrans(duration=1.0);    }

This contains the code that powers the rollover. Now to apply it:

 

<a href="" onmouseover="imgchange('nav1',1)" onmouseout="imgchange('nav1',0)"><img name="nav1" src="images/nav1.gif" width="130" height="20" alt="" border="0" /></a>

Let me briefly explain the imgchange function...

 

function imgchange ( image_name, array_index);

 

This is put in the onmouseover and onmouseout statements. The image_name refers the the <img name="value" /> reference, and the array_index refers the the image in the array index value. Example: changeimg('name',0) would refer to imagearray[0]. make sure that you have placed a name="value" in the image tag, and that the changeimg(name,5) in the onmouseover and onmouseout match this.

 

To add more images...

 

To add more images, you simply need to put another imagearray[next_number] = "images/nav3on.gif"; in the script tag, where next_number equals the next array number. Ok? Then add another <a href="#link" onmouseover="changeimg(...)" onmouseout="changeimg(...)"><img src="" name="next_img" /></a> in the body where you want it. Hope you all can figure this out.

 

NOTE: The reason why we test and see if the browser is IE is because this only works in Internet Explorer. Other browsers will just see a standard rollover; If you want to change the duration of the effect, change the duration length (its in seconds.)