Image Map not functioning

jcyoga18
(@jcyoga18)

3 years, 10 months ago
The ‘palette’ image on this home page shows the menu names on the ‘paint patches’, however, although the cursor changes to a pointing finger when hovering over the image, clicking on any of the paint patches does not activate the relevant page. The map code exists, as you can see in the source code Lines 134 – 148, but seems to not be working as expected. Can anyone see errors or suggest fixes please? Thanks!
- This topic was modified 3 years, 10 months ago by jcyoga18.
The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

(@alanfuller)

The divs overlaying the map are at z-index 100 which is higher layer than the map

<div style="width: 25%; height: 25%; position: absolute; top: 5%; left: 32%; z-index: 100; cursor: pointer;"></div>
<div style="width: 25%; height: 25%; position: absolute; top: 15%; left: 65%; z-index: 100; cursor: pointer;"></div>
<div style="width: 25%; height: 25%; position: absolute; top: 50%; left: 70%; z-index: 100; cursor: pointer;"></div>
<div style="width: 25%; height: 25%; position: absolute; top: 60%; left: 38%; z-index: 100; cursor: pointer;"></div>
<div style="width: 25%; height: 25%; position: absolute; top: 50%; left: 10%; z-index: 100; cursor: pointer;"></div>
<div style="width: 25%; height: 25%; position: absolute; top: 20%; left: 10%; z-index: 100; cursor: pointer;"></div>
<map name="Map">
<area alt="drawings" coords="185,9,376,206" shape="rect" href="http://www.awakeningtheeye.net/?page_id=8">
<area alt="classes" coords="377,87,585,286" shape="rect" href="http://www.awakeningtheeye.net/?page_id=5">
<area alt="calendars" coords="379,353,586,547" shape="rect" href="http://www.awakeningtheeye.net/?page_id=15">
<area alt="personal history" coords="194,356,376,572" shape="rect" href="http://www.awakeningtheeye.net/?page_id=13">
<area alt="exhibitions" coords="5,340,192,551" shape="rect" href="http://www.awakeningtheeye.net/?page_id=11">
<area alt="paintings" coords="6,126,209,314" shape="rect" href="http://www.awakeningtheeye.net/?page_id=2">
 </map>

tugbucket

(@tugbucket)

3 years, 10 months ago

#flower div {
  display: none;
}

So in your #flower, above your map in the source, you have those divs. Those interfering with your map. Add the above CSS to hide the divs and you’ll see the map works fine.

Thread Starter

jcyoga18

(@jcyoga18)

3 years, 10 months ago

@tugbucket Thanks. I added that code to style.css, but it had no effect.

@alanfuller Thanks. I see, but what needs to be done to make the map links work?

Alan Fuller

(@alanfuller)

3 years, 10 months ago

I dont know, because it is your code and I have no idea why it is coded that way and the purpose of the six <div> above the map.

As I can’t see a reason, I’d simply delete them, but as I said, not my code and I don’t have the full picture of why they exist.