Image Map not functioning

  • 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 2 years, 5 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)

  • 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="https://www.awakeningtheeye.net/?page_id=8">
<area alt="classes" coords="377,87,585,286" shape="rect" href="https://www.awakeningtheeye.net/?page_id=5">
<area alt="calendars" coords="379,353,586,547" shape="rect" href="https://www.awakeningtheeye.net/?page_id=15">
<area alt="personal history" coords="194,356,376,572" shape="rect" href="https://www.awakeningtheeye.net/?page_id=13">
<area alt="exhibitions" coords="5,340,192,551" shape="rect" href="https://www.awakeningtheeye.net/?page_id=11">
<area alt="paintings" coords="6,126,209,314" shape="rect" href="https://www.awakeningtheeye.net/?page_id=2">
 </map>
    #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)

    @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?

    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.

    • This reply was modified 2 years, 5 months ago by Alan Fuller.
    Thread Starter jcyoga18

    (@jcyoga18)

    @alanfuller Ok, thanks. We’re in the same boat as this code pre-existed my involvement.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image Map not functioning’ is closed to new replies.

Tags