Shoutbox

mouse over to change image - link - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: mouse over to change image - link (/showthread.php?tid=59394)
mouse over to change image - link by DJKAL on 05-14-2006 at 11:18 PM

i have to create an image for a link that when you mouse over it, it fades into another image.

the two images are the same just one is a silhouette and the other is the colour version.
i would like it to be the black silhouetter version then to fade through to the colour version when the link is moused over.

i thought about using Flash, but im not sure how to encorprate it. if anyone can give me tips/tuts/help i would be much appreciated.
thanks.

RE: mouse over to change image - link by Supersonicdarky on 05-14-2006 at 11:21 PM

http://academ.hvcc.edu/~kantopet/old/javascript/i...parent=basic+dhtml

not sure about fading though

RE: mouse over to change image - link by DJKAL on 05-14-2006 at 11:24 PM

thanks. though it is important that it fades slowly. say over the time of 2 or 3 seconds.

RE: mouse over to change image - link by Supersonicdarky on 05-14-2006 at 11:25 PM

found it :D

http://javascript.internet.com/navigation/fading-rollover.html

RE: mouse over to change image - link by DJKAL on 05-14-2006 at 11:55 PM

it didnt work :<
it wasnt the way i thought it was.

is there any way i can use flash to do it?

RE: mouse over to change image - link by vaccination on 05-15-2006 at 03:58 PM

i no you can make 2 images fade into each, taking as long as you like,  other in flash but im not sure about the actionscript.... i will try to find out for you

RE: mouse over to change image - link by t1a0s on 05-15-2006 at 04:43 PM

If I remember rightly, the best way to do that in flash is by using a movie clip as a button. I came across a useful tutorial on how to do it before, I'll try and dig it up.

RE: mouse over to change image - link by vaccination on 05-15-2006 at 05:14 PM

ahh i remember now you have to create a image ... convert it to a button then once inside the button use the special timeline to make the button change when it is moused over all you have to do is put the second image in the area for the mouse over.... ergh if only my flash was working i would create a screenshot!

Its kinda hard to explain without pictures but i tried sorry if it doesnt help, mayb have a playaround and see if you can work it out!

EDIT: found a site which should help you out

http://www.echoecho.com/flashbuttons01.htm

RE: mouse over to change image - link by matty on 05-15-2006 at 05:45 PM

http://www.mandarindesign.com/fadejs.html

I will edit this when I get home for actually mouse over fading.

RE: mouse over to change image - link by Matti on 05-15-2006 at 06:24 PM

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! ;)
RE: mouse over to change image - link by L. Coyote on 05-15-2006 at 07:04 PM

Why not simply make the second image an animated GIF with the fading cycle? :-/

RE: RE: mouse over to change image - link by Matti on 05-16-2006 at 05:22 PM

quote:
Originally posted by booneht
Why not simply make the second image an animated GIF with the fading cycle? :-/
Because if you would do so, it will continue fading in and out even when the user doesn't move his mouse on it. And we don't want that, do we? :)
RE: mouse over to change image - link by DJKAL on 05-16-2006 at 07:08 PM

quote:
Originally posted by Mattike
do we?

nope -  must be moused over
RE: mouse over to change image - link by Plik on 05-16-2006 at 07:36 PM

quote:
Originally posted by Mattike
Because if you would do so, it will continue fading in and out even when the user doesn't move his mouse on it. And we don't want that, do we? :)
No it wouldn't.
If you make the gif so it only plays through once, then change from the first image to the animated gif when someone mouses over using simple js.
And once they mouse out again use simple js to change it back again
IMO this is the easyest and best solution so far
RE: mouse over to change image - link by DJKAL on 05-16-2006 at 07:55 PM

i dont want that though. for the best effect i want the black silhoueete version then fade slowly into colour upon mouse over and at no other point

RE: mouse over to change image - link by Plik on 05-16-2006 at 08:15 PM

quote:
Originally posted by DJKAL
i dont want that though. for the best effect i want the black silhoueete version then fade slowly into colour upon mouse over and at no other point

Thats exactly what what i said can do :S perhaps i didn't explain it well.
The image starts beeing the black silhouette version and stays like that until some one hovers over the image. Then, using js, you change the image to your gif.
This gif is an animation of the black silhouette fading to colour, and the last frame is how you want it to be once its fully faded. When you save this gif, choose to only have it play through once, so it plays from the silhouette to colour then stops on the last frame.
And then you can either use the same method to fade back too the silhouette or just switch back to the origional image.

Hope that makes more sense, i would make an example but i really have no time at all :(
RE: mouse over to change image - link by DJKAL on 05-16-2006 at 08:18 PM

thanks Plik. that does make more sense. i have exams starting tomorrow and cant revise atall. but at my next chance i'll sort it and let you know if it does/n't work
thanks :)