Menu Animation 2 - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Menu Animation 2		[View Sample]

This new DHTML menu animation combines rollover technique with a dynamic opacity effect (fade-in-fade-out).


Insert into <HEAD>
<script language=javaScript> <!-- Beginning of JavaScript - img0 = new Image(); img0.src = "brigitte.jpg"; img1 = new Image(); img1.src = "marylin.jpg"; img2 = new Image(); img2.src = "sandra.jpg"; img3 = new Image(); img3.src = "sophia.jpg"; var i_strngth=1 var i_image=0 var changeopacity var imgscr var timer function preshowimage(thisimage) { clearTimeout(timer) brigitte.innerHTML="<a href='#' onMouseOver='preshowimage(\"brigitte\")'><img style='filter:alpha(opacity=10)' src='brigitte.jpg' border=0>"; marylin.innerHTML="<a href='#' onMouseOver='preshowimage(\"marylin\")'><img style='filter:alpha(opacity=10)' src='marylin.jpg' border=0>"; sandra.innerHTML="<a href='#' onMouseOver='preshowimage(\"sandra\")'><img style='filter:alpha(opacity=10)' src='sandra.jpg' border=0>"; sophia.innerHTML="<a href='#' onMouseOver='preshowimage(\"sophia\")'><img style='filter:alpha(opacity=10)' src='sophia.jpg' border=0>"; i_strngth=10 imgscr=thisimage+".jpg" changeopacity=eval(thisimage) showimage() } function showimage() { if(document.all) { if (i_strngth <=100) { changeopacity.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imgscr+" border=0>"; i_strngth=i_strngth+2 var timer=setTimeout("showimage()",50) } else { clearTimeout(timer) var timer=setTimeout("hideimage()",400) } } } function hideimage() { if(document.all) { if (i_strngth >=10) { changeopacity.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imgscr+" border=0>"; i_strngth=i_strngth-2 var timer=setTimeout("hideimage()",50) } else { clearTimeout(timer) var timer=setTimeout("showimage()",400) } } } // - End of JavaScript - --> </script> <style> H1 { font-size : 20; font-family : Times; color : 444444; } A { text-decoration: underline; color : 444444; } A:Visited { text-decoration: underline; color : 444444; } A:Hover{ text-decoration: none; font-family : Times; color : FF0000; } A:Active { text-decoration: underline; color : 444444; } </style>

Insert into <BODY>
<div id="brigitte" style="position:absolute;visibility:visible;top:10px;left:20px"><a href="#" onMouseOver="preshowimage('brigitte')"><img style='filter:alpha(opacity=10)' src=brigitte.jpg border=0></a></div> <div id="marylin" style="position:absolute;visibility:visible;top:80px;left:20px"><a href="#" onMouseOver="preshowimage('marylin')"><img style='filter:alpha(opacity=10)' src=marylin.jpg border=0></a></div> <div id="sandra" style="position:absolute;visibility:visible;top:150px;left:20px"><a href="#" onMouseOver="preshowimage('sandra')"><img style='filter:alpha(opacity=10)' src=sandra.jpg border=0></a></div> <div id="sophia" style="position:absolute;visibility:visible;top:220px;left:20px"><a href="#" onMouseOver="preshowimage('sophia')"><img style='filter:alpha(opacity=10)' src=sophia.jpg border=0 </a></div>

Other Options