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" />
    <p><a href="http://www.psychichealerchristine.com/psychic-christines-blog/apple" 
    target="_blank">I do not own this image.</a></p>

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

5 Years
Discussion Span
Last Post by Monkey101

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


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


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>
  <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="#" />

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.