Page 1 of 1

Using JS With Image Maps Creating dynamic image maps. Rate Topic: -----

#1 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Post icon  Posted 01 August 2009 - 09:39 AM

Image Maps w/ Javascript
Please note that this tutorial requires basic knowlege of HTML and Javascript

In this tutorial, we'll create an image map of our solar system. When the viewer hovers over a planet, the paragraph at the bottom will read a description.

Start with our layout.
<html>
<head>
<title>Image Map</title>
<script>
// Code
</script>
<body>
<img src="solarsys.gif" usemap="#planets" />
<map name="planets">
<area shape="rect" coords="0,0,82,126" href="sun.html"  />
<area shape="circle" coords="90,58,3" href="mercury.html" />
<area shape="circle" coords="124,58,8" href="venus.html" />
</map>
<p id="description"></p>
</body>
</html>


This creates our template. Now, we need a function that writes text to the description box. We'll use:
function writeDesc(text) {
var box = document.getElementById(description);
box.innerHTML=text;
}


Now since we want users to hover over planets, we'll call the function with a onmouseover event.
<area shape ="circle" coords ="90,58,3" onmouseover="writeDesc('Mercury')" href="mercury.html" />


All together:
<html>
<head>
<title>Image Map</title>
<script>
function writeDesc(text) {
var box = document.getElementById(description);
box.innerHTML=text;
}
</script>
<body>
<img src="solarsys.gif" usemap="#planets" />
<map name="planets">
<area shape="rect" coords="0,0,82,126" href="sun.html" onmouseover="writeDesc('Sun')" />
<area shape="circle" coords="90,58,3" href="mercury.html" onmouseover="writeDesc('Mercury')" />
<area shape="circle" coords="124,58,8" href="venus.html" onmouseover="writeDesc('Venus')" />
</map>
<p id="description"></p>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Using JS With Image Maps

#2 firebolt  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 92
  • View blog
  • Posts: 5,561
  • Joined: 20-February 09

Posted 02 August 2009 - 05:11 AM

This would do better with a little more explanation, especially on why you have chosen this method, rather than another.
Was This Post Helpful? 0
  • +
  • -

#3 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Posted 02 August 2009 - 05:20 AM

View Postfirebolt, on 2 Aug, 2009 - 04:11 AM, said:

This would do better with a little more explanation, especially on why you have chosen this method, rather than another.

Thank you. What other methods are there though? This is the only one I know of.
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Posted 07 August 2009 - 09:41 PM

Quote

Thank you. What other methods are there though? This is the only one I know of.


Flash could easily be used for such a project, and I HATE and LOATH image maps. Talk about cluttering and messing with your code. But, they do have their place, granted most developers don't give it credence any longer - but it still exists.

I think the most important aspect of this is to show a working example, the code is there and that would make it easier for the user to know whether they even need to use this strategy. Good work though kewl.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#5 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Posted 08 August 2009 - 05:31 AM

Thanks Greg! Sorry, I don't know any Flash. And yes, image maps are on the brink. But they can still be handy! :)
Was This Post Helpful? 0
  • +
  • -

#6 goodchild66  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 24-November 09

Posted 15 March 2012 - 04:47 PM

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
img{margin-top: 66px;}
</style>
<script type="text/javascript">
function writeDesc(text) {
var box = document.getElementById(description);
box.innerHTML=text;
}
</script>
</head>
<body>
<center>
<img src="images/designsmall.jpg" usemap="#naruto" />
</center>
<map name="naruto">
<area shape="rect" coords="29,48,236,174" href="nat.html"
onmouseover="writeDesc('nat')"/>
<area shape="rect" coords="402,227,575,379" href="sonic.html"
onmouseover="writeDesc('sonic')"/>
</map>
<p id="description">
Naruto a master of martial arts from the konoha clan of the akazuki<br>
this guy have lots of skills plus the incredible nine fox tails
you can tell that all this is what makes the legend of naruto <br>
similar to the legends of the elendus.
</p>
</body>
</html>


the javascript commands just wont work pls i need help
Was This Post Helpful? 0
  • +
  • -

#7 puddlejumper  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-July 12

Posted 02 August 2012 - 07:50 AM

View Postgoodchild66, on 15 March 2012 - 04:47 PM, said:

    <body>
    <center>
        <img src="images/designsmall.jpg" usemap="#naruto" />
            </center>
    <map name="naruto">
        <area shape="rect" coords="29,48,236,174" href="nat.html"
              onmouseover="writeDesc('nat')"/>
        <area shape="rect" coords="402,227,575,379" href="sonic.html"
              onmouseover="writeDesc('sonic')"/>
    </map>
    <p id="description">
        Naruto a master of martial arts from the konoha clan of the akazuki<br>
        this guy have lots of skills plus the incredible nine fox tails
        you can tell that all this is what makes the legend of naruto <br>
        similar to the legends of the elendus.
    </p>
    </body>
</html>



the javascript commands just wont work pls i need help


most likely your issue is the fact that you have something in the <p id="description"></p>. It should be blank inside the p tag so that the text you want to display when your link is selected it has somewhere to go. If you need the additional text to display you should put that in a separate p tag.
Was This Post Helpful? 0
  • +
  • -

#8 Roonil Wazlib  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 30
  • Joined: 03-August 12

Posted 04 August 2012 - 03:17 AM

Cool. Thanks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1