Guest Maugan Ra Posted June 10, 2008 Share Posted June 10, 2008 Hi. I'm new to Javascript, and I was wondering if someone could help me out here.I have this HTML code that I wrote for a website: <img src="images/ofclogo.gif" usemap="#OFCMain" alt="Logo" border="0" /><map id="OFCMain" name="OFCMain" ><area shape="rect" coords="0,0,199,479" href="/forum" target="blank" alt="Forum" /><area shape="rect" coords="199,0,394,479" href="/gallery" target="blank" alt="gallery" /></map> What I want to do, is get it to fade to a different picture, depending on which area the mouse is over. Is there any way to do this?Thanks.Maugan Ra. Link to comment Share on other sites More sharing options...
rangana Posted June 10, 2008 Share Posted June 10, 2008 Here's a basic example to keep you going: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><!--- This is for rangana's test, feel free to remove this part -----><base href="http://www.w3schools.com/TAGS/"><!--************************End of rangana's test***********--><title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><script type="text/javascript">window.onload=function(){ var myid=document.getElementById('myid'); //replace the value inside the quotes with your desired id then var defaultimg='planets.gif' // replace this with your default image. var areas=document.getElementsByTagName('area'); //This is for your first area areas[0].onmouseover=function() { myid.src='http://www.aerospaceguide.net/solar_system/our_sun.gif'; } //This is for your second area areas[1].onmouseover=function() { myid.src='http://pds.jpl.nasa.gov/planets/images/browse/mercury/mercury1.jpg'; } //This is for your third area areas[2].onmouseover=function() { myid.src='http://www.adlerplanetarium.org/cyberspace/planets/venus/images/venus_magellan.jpg'; } /*****************************Script by rangana********************** * Feel free to remove this part if you don't want to see the onmouseout function */ for(var i=0;i<areas.length;i++) { areas[i].onmouseout=function() {myid.src=defaultimg;} } /******************************************************************/}</script><p>Click on the sun or on one of the planets to watch it closer:</p><img src="planets.gif" width="145" height="126"alt="Planets" usemap="#planetmap" id="myid"/><map id="planetmap" name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun"href="sun.htm" /><area shape="circle" coords="90,58,3" alt="Mercury"href="mercur.htm" /><area shape="circle" coords="124,58,8" alt="Venus"href="venus.htm" /></map><p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element.</p></body></html> Hope it helps. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.