Member Avatar for Monkey101

Good afternoon all !
I am having trouble with my image map...
Here is a piece of my code.

<div id="style1">
    <p class="padding"><img usemap="#greenMap" src="Images/green apple.jpg" alt="green apple" width="275"       height="255" style="float:left;"/></p>
    <map id="greenMap" name="greenMap">
    <area shape="rect" alt="green apple" coords="100,50,100,50" 
    href="green apple2.jpg" />
    </map>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <p><a href="http://www.psychichealerchristine.com/psychic-christines-blog/apple" 
    target="_blank">I do not own this image.</a></p>
    </div>

I went through my code countless of times but everything is intact expect for my image map...
My hotspot is not showing up...

  • 2 Contributors
  • 4 Replies
  • 136 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by Monkey101
Member Avatar for JorgeM

Href on line 5 is incorrect just with a quick look. I'd have to check the rest when I'm by a PC.

Member Avatar for Monkey101

I had a feeling the href="" was wrong but I do not know how to fix the problem. I even tried using the website I have obtain the image from using the href.

Edited by Monkey101
Member Avatar for JorgeM

Ok, so I missed the other issue you have listed above which is the values you assigned to "coords". The four values you assign to cords should be top, left, right, bottom. So for example, if you want to create a hot spot in the top left corner, it would be set to something like coords="0,0,50,50" for the following example code.

<!DOCTYPE html>
<html>
<body>
<div>
  <img usemap="#greenMap" src="image1.jpg" width="100" height="100"/>
  <map id="greenMap" name="greenMap">
    <area shape="rect" alt="green apple" coords="0,0,50,50" href="#" />
  </map>
</div>
</body>
</html>

As you can see, you have an image element. assign the src attribute to the correct URL where the image is located.

Secondly, for the hotspot, on the area element, assign the correct destination URL to the href attribute.

Member Avatar for Monkey101

Thank you !! It worked finally.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.