nworst Posted August 9, 2009 Share Posted August 9, 2009 I'm planning to make an imagemap, which should look a bit like this: (but then ofcourse with different pictures)I had the following script in mind: (with help of w3schools) <html><head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt; } </script></head><body><img src="*.png" width="300" height="300" alt="..." usemap="#imagemap" onMouseout="writeText('')" /> <map name="imagemap"> <area shape="rect" coords="?,?,?,?" onMouseOver="writeText('This is part I.')" href="*.htm" target="_blank" alt="..." /> <area shape="rect" coords="?,?,?,?" onMouseOver="writeText('This is part II.')" href="*.htm" target="_blank" alt="..." /> <area shape="rect" coords="?,?,?,?" onMouseOver="writeText('This is part III.')" href="*.htm" target="_blank" alt="..." /> </map><p id="desc"></p></body></html> But my question: How do you know what the coordinates are?Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted August 9, 2009 Share Posted August 9, 2009 I'm planning to make an imagemap, which should look a bit like this: (but then ofcourse with different pictures)I had the following script in mind: (with help of w3schools)<html><head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt; } </script></head><body><img src="*.png" width="300" height="300" alt="..." usemap="#imagemap" onMouseout="writeText('')" /> <map name="imagemap"> <area shape="rect" coords="?,?,?,?" onMouseOver="writeText('This is part I.')" href="*.htm" target="_blank" alt="..." /> <area shape="rect" coords="?,?,?,?" onMouseOver="writeText('This is part II.')" href="*.htm" target="_blank" alt="..." /> <area shape="rect" coords="?,?,?,?" onMouseOver="writeText('This is part III.')" href="*.htm" target="_blank" alt="..." /> </map><p id="desc"></p></body></html> But my question: How do you know what the coordinates are?Thanks Zoom in on the image and count how many pixels there are to each coordinate you want.Alternatively, use a measuring tool such as the one that comes in Adobe Photoshop. Link to comment Share on other sites More sharing options...
chibineku Posted August 9, 2009 Share Posted August 9, 2009 Or use my nifty tool! Link to comment Share on other sites More sharing options...
nworst Posted August 9, 2009 Author Share Posted August 9, 2009 Thanks both! Link to comment Share on other sites More sharing options...
Galen Posted August 9, 2009 Share Posted August 9, 2009 Paint.NET is free and shows the coordinates of the mouse cursor (also can do layers, which is handy). Also you could use CSS and use percentages with something along these lines:http://designreviver.com/tutorials/css-ima...-and-tutorials/Though it would probably take you way longer. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.