Javascript experts please help?
I want to use "Javascrpit" to create a mouseover effect in my navigation bar, I've made a on & off state in "Photoshop" for each link. I'm very new to "Javascript" but I'm keen to learn it for its dynamic abilties. I've tried to follow examples on line to replicate into my navigation but to my frustration can get it to work. can anyone help me turn this Html "unordered" list into a "Javascript" mouseover navbar. Thanks <div id="topnav"> <ul> <li><a href="/"><img src="Images/Index/unisite_off_06.png" border="0" width="100" height="27" ></a></li> <li><a href="/"><img src="Images/Index/contact_off_06.png" border="0" width="126" height="27"></a></li> <li><a href="/"><img src="Images/Index/portfolio_off_06.png" border="0" width="100" height="27"></a></li> <li><a href="/"><img src="Images/Index/home_off_06.png" border="0" width="76" height="27"></a></li> </ul> </div>
Public Comments
- You need the "onmouseover" event in there somewhere... http://www.webdevelopersnotes.com/tips/html/changing_two_images_on_mouse_over_using_javascript.php3 I got that link putting in "onmouseover" into Google, there are billions more if you desire a version that is different than the one they give.
- <script type="text/javascript"> var revert = new Array(); var inames = new Array(); //enter the name of the images // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "images/"+inames[i]+"_rollover.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> then put the values of the inames as the id's of your images
- Hey this is a link for you to learn more about JavaScript. Many people learn different languages here. You can learn all the languages provided here just by studying them in the site and practicing them on your own. I recommend you to use it and see the results. http://www.w3schools.com/js/default.asp
Powered by Yahoo! Answers