I've written this special for you.
This is a simple
JavaScript which uses Microsoft's blendTrans-filter to fade in and out on mouseover. Because it uses Microsoft filters, it'll only work in Internet Explorer. It works with a function fade() which accept one parameter containing the new URL for the image.
Here it comes!
Place this in the <HEAD> of your webpage:
code:
<script language=javascript>
//Browser check: the effects will only work on MSIE 5.5 or higher!
var detect = navigator.userAgent.toLowerCase(); //Get the browser information string
var ie = detect.indexOf("msie") + 1; //See if it's IE
var fullVersion = parseFloat(detect.substring(ie+4,detect.length)); //Retrieve the version number after 'MSIE '
if (ie && fullVersion >= 5.5) {
var useFilters = true; //Ok, we're running on IE 5.5 or higher!
} else {
var useFilters = false; //Nope, we can't use filters here...
}
var fadeduration = 0.5; //The duration of the fade in seconds.
//The fade function
function fade(img) {
if(useFilters) { //Can we use the filters?
document.images.fading_btn.style.filter="blendTrans(duration=" + fadeduration + ")"; //Fade duration
//We have to check if the filter is still playing, otherwise this will give a wrong effect.
if (document.images.fading_btn.filters.blendTrans.status != 1) {
document.images.fading_btn.filters.blendTrans.Apply(); //Applying the filter
document.images.fading_btn.src = img; //Setting the image
document.images.fading_btn.filters.blendTrans.Play() //Playing the fade effect
}
} else {
//Nope, we'll have to drop the fading effect and only change the src of the image.
document.images.fading_btn.src = img;
}
}
</script>
This is how you should use it on your button:
code:
<img src="btn0.jpg" width=150 height=30 name="fading_btn" onmouseover="javascript:fade('btn1.jpg')" onmouseout="javascript:fade('btn0.jpg')" border=0>
The only restriction is that it will only work in Internet Explorer 5.5 or higher. It's good to use this since 80% of the internet users are using IE 5.5+, but you can use a Flash animation as replacement if you want.
It's your choice!
/ –
![[Image: jumbled.png]](http://img202.imageshack.us/img202/7070/jumbled.png)
