sveinhermansen Posted November 20, 2007 Share Posted November 20, 2007 Greetings,I need help with a script snippet which currently seems beyond my newbie skills (or lack thereof).I have a page with a list of countries (hyperlinks) on it, and a map of Europe to the right of the list. I want each country on the map to light up red when the cursor is moved over the corresponding link (in the list).I have created an image file for each event (i.e. one where no countries are red, one where Austria is red, one where Bulgaria is red, etc.), and used the following script and HTML (the HTML requires the following CSS to display properly: margin-left:4cm;margin-right:4cm}img.right {float:right} ): (this is not a smiley, it just turned out that way because of orthographic rules)Script:<script type="text/javascript">if (document.images) { bulgariaon= new Image(10,10); bulgariaon.src="bulgaria.jpg"; bulgariaoff= new Image(10,10); bulgariaoff.src="europe.jpg"; }function lightup(imgName){ if (document.images) { imgOn=eval(imgName + "on.src"); document[imgName].src= imgOn; }}function turnoff(imgName){ if (document.images) { imgOff=eval(imgName + "off.src"); document[imgName].src= imgOff; }}if (document.images) { norwayon= new Image(10,10); norwayon.src="norway.jpg"; norwayoff= new Image(10,10); norwayoff.src="europe.jpg"; }function lightup(imgName){ if (document.images) { imgOn=eval(imgName + "on.src"); document[imgName].src= imgOn; }}function turnoff(imgName){ if (document.images) { imgOff=eval(imgName + "off.src"); document[imgName].src= imgOff; }}</script>HTML:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><link rel="stylesheet" type="text/css"href="layout.css" /><body><p><img class=right src="europe.jpg" name="bulgaria" /><ul><li><a href="bulgaria.html" target="_top" onMouseover="lightup('bulgaria')" onMouseout="turnoff('bulgaria')">Bulgaria</a></li><li><a href="norway.html" target="_top" onMouseover="lightup('norway')" onMouseout="turnoff('norway')">Norway</a></li></ul></p></body>I probably just lack the knowledge to do this properly, and it might be very easy, but I am grateful for expert help anyway.Thanks in advance, Link to comment Share on other sites More sharing options...
jesh Posted November 20, 2007 Share Posted November 20, 2007 I think you could save yourself some coding and set up your HTML as follows: <body><p><img id="mainmap" src="europe.jpg" class="right" /><ul><li><a href="bulgaria.html" id="bulgaria" target="_top" onmouseover="lightup(this);" onmouseout="turnoff();">Bulgaria</a></li><li><a href="norway.html" id="norway" target="_top" onmouseover="lightup(this);" onmouseout="turnoff();">Norway</a></li></ul></p></body> So, you've given IDs to the main image and IDs to each of the links. Then, you can simplify your functions to look like this: // You are passing a reference to the anchor element when you use the "this" keyword// as the parameter. We made the decision to give the anchor elements (links) IDs that// match the file name for the image that you want to use. So, to set the source// for the mainmap, you can simply use "link.id + '.jpg'"function lightup(link){ document.getElementById("mainmap").src = link.id + ".jpg";}// Since every mouseout event resets the map back to europe.jpg, you don't need to // pass any parameters to this function.function turnoff(){ document.getElementById("mainmap").src = "europe.jpg";} Link to comment Share on other sites More sharing options...
sveinhermansen Posted November 20, 2007 Author Share Posted November 20, 2007 Hey, exactly something like what I was hoping for! A simpler way that I didn't know about! Haven't got time to do it right now, but will check it out in the morning! Thanks a lot!S Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.