random truth 0 Report post Posted April 8, 2009 (edited) I am working on my website, and needed some help with javascript. My website that is in progress is located at http://www.110mb.com/404.phpAnyways, here is what I would like to do. I want to have the navigation bar fade to the second image instead of changing instantly when you hover over it. So the color would fade from blue to red when someone hovers over the link. Help and advice would be appreciated. This is my first website so I am sorry if Im a bit of a Noob to this. Edited April 8, 2009 by random truth (see edit history) Share this post Link to post Share on other sites
sonesay 7 Report post Posted April 8, 2009 I think there are only two options for this. 1. you write your own JavaScript function to gradually fade in the image by setting its opacity from 0-100 or you use and existing library such as jQuery and apply its .fadeIn method or other equivalent. If you need further help on which one you can request it but I cant say if I will be able to respond so maybe someone else may be able to help if I don't get around to it. Share this post Link to post Share on other sites
truefusion 3 Report post Posted April 8, 2009 JavaScript may be unnecessary for this. Try the following and see if it gives you the desired results: Make an animated GIF that fades from blue to red but make sure it does not loop (unless perhaps you want a pulsating effect). Then upon hover, change the background image to the GIF. I am uncertain on whether or not the GIF will restart its animation upon hover, but see if it does. Share this post Link to post Share on other sites
random truth 0 Report post Posted April 8, 2009 JavaScript may be unnecessary for this. Try the following and see if it gives you the desired results: Make an animated GIF that fades from blue to red but make sure it does not loop (unless perhaps you want a pulsating effect). Then upon hover, change the background image to the GIF. I am uncertain on whether or not the GIF will restart its animation upon hover, but see if it does.This was the first method I tried, However the gradients looked awful in a gif image and messed up the glowing effect... Share this post Link to post Share on other sites
truefusion 3 Report post Posted April 8, 2009 This was the first method I tried, However the gradients looked awful in a gif image and messed up the glowing effect... Luckily in your case you have made it easy to work with. If i'm not mistaken, there's really no way to fade a background image without it affecting the elements and text within the element holding the background image. But since the text is above the image, that means you can have the image you want to fade in upon hover under the text without also fading the text. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; <html xmlns="http://www.w3.org/1999/xhtml/ ; xml:lang="en" lang="en"> <head> <title>untitled</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript"> <!-- var img; function fade(id) { img = id.getElementsByTagName('img')[0]; for (var i = 0; i < 11; i++) setTimeout('setOpacity('+i+')',100*i); return false; } function setOpacity(value) { img.style.opacity = value/10; img.style.filter = 'alpha(opacity=' + value*10 + ')'; } // --> </script> </head> <body> <div onmouseover="fade(this);" onmouseout="return false;"> <img src="" alt="TEST"/> </div> </body> </html> You can work off of this if you want. Share this post Link to post Share on other sites
random truth 0 Report post Posted April 9, 2009 Luckily in your case you have made it easy to work with. If i'm not mistaken, there's really no way to fade a background image without it affecting the elements and text within the element holding the background image. But since the text is above the image, that means you can have the image you want to fade in upon hover under the text without also fading the text. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; <html xmlns="http://www.w3.org/1999/xhtml/ ; xml:lang="en" lang="en"> <head> <title>untitled</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript"> <!-- var img; function fade(id) { img = id.getElementsByTagName('img')[0]; for (var i = 0; i < 11; i++) setTimeout('setOpacity('+i+')',100*i); return false; } function setOpacity(value) { img.style.opacity = value/10; img.style.filter = 'alpha(opacity=' + value*10 + ')'; } // --> </script> </head> <body> <div onmouseover="fade(this);" onmouseout="return false;"> <img src="" alt="TEST"/> </div> </body> </html> You can work off of this if you want. Thanks, I am trying to learn webdesign so I dont have to keep on asking so can you tell me how this code works (whats happening, etc)? sorry for being difficult. Share this post Link to post Share on other sites
truefusion 3 Report post Posted April 9, 2009 Thanks, I am trying to learn webdesign so I dont have to keep on asking so can you tell me how this code works (whats happening, etc)? sorry for being difficult.Let's look at it step by step. We'll start at where it gets activated: <div onmouseover="fade(this);" onmouseout="return false;"> <img src="" alt="TEST"/> </div> As the attribute suggests, fade() gets called when the mouse (or cursor) hovers over the element. You'll notice the pointer or variable called "this" being passed in the parameters. This variable points to the position in the DOM of the element of the attribute, in this case being that DIV. We pass it in to the fade() function to make our job easier. To also make our job easier, we declare a global variable called "img": var img;Note that in JavaScript you don't necessarily need to end the line with a semicolon, i merely do it for good practice in case i code in other languages that require such a thing. This global variable we use to store the reference to the image that we want to fade. Since it is a global variable, we are therefore capable of changing its value within functions. Going back to onmouseover, the function fade() gets called. In order to be able to use the reference "this" within the function, we have to specify a name for the variable that will carry the same value, in this case being "id." This allows us to track down the image element easier that we want to fade in. We then call a method that traverses the DOM starting at the DIV element that the variable id is pointing to, to find any child image elements. This method is getElementsByTagName. Since we expect the image to be the first image it finds, that is, due to the way we coded the HTML layout, we append the index 0, since getElementsByTagName returns an array. From there we state a for loop to make the fade effect appear to be occurring within one second—that is, if you do the math. The setTimeout function takes two parameters: the first is the function you want to call when the time in milliseconds from the second parameter is reached. Since the for loop happens rather quickly, the for will finish before all the setTimeouts return. The function we want to call is setOpacity(), and setOpacity() takes one parameter, which we have the for increment the value that we pass to obtain a fade in effect. The setOpacity() function is made to support standard and non-standard (i.e. Internet Explorer) browsers. Since the value of opacity has to be a double or float (what-have-you) for standard-compliant browsers, we divide the value. For Internet Explorer we require a whole number from 1 to 100, so we multiply it by ten so that it'll fade within one second evenly. Since during testing of the script, moving the mouse out of the DIV element caused the fade in to occur again, we return false on mouseout to prevent it from having the same effect occur twice. And that should pretty much explain the entire process. Share this post Link to post Share on other sites
