Image Map Not Working with ERB/HTML

Question

I am trying to put an image map into my app and I have the following erb code:

  <div class="col-xs-12 col-sm-4 text-center">
    <!-- Image Map Generated by http://www.image-map.net/ -->
    <%= image_tag "Remote.png", style: "width: 200px", usemap: "#image-map", alt: "Remote control menu.  Yes, you get to hold it." %>

    <map name="image-map">
        <area target="" alt="BBQ" title="BBQ" href="<%= url_for home_bbq_path %>" coords="241,595,103" shape="circle">
        <area target="" alt="Jokes" title="Jokes" href="<%= url_for home_jokes_path %>" coords="511,587,95" shape="circle">
        <area target="" alt="Memory Enhancer" title="Memory Enhancer" href="#" coords="786,580,106" shape="circle">
        <area target="" alt="Gift Helper" title="Gift Helper" href="#" coords="259,866,105" shape="circle">
        <area target="" alt="Grey Bottom Middle" title="Grey Bottom Middle" href="#" coords="521,856,102" shape="circle">
        <area target="" alt="Grey Bottom Right" title="Grey Bottom Right" href="#" coords="784,868,97" shape="circle">
        <area target="" alt="My Mancard" title="My Mancard" href="<%= url_for edit_user_registration_path(current_user) %>" coords="241,315,140" shape="circle">
        <area target="" alt="Sign In" title="Sign In" href="<%= url_for new_user_session_path %>" coords="669,234,909,410" shape="rect">
        <area target="" alt="Green Left Top" title="Green Left Top" href="#" coords="262,1224,92" shape="circle">
        <area target="" alt="Green Middle Top" title="Green Middle Top" href="#" coords="516,1205,89" shape="circle">
        <area target="" alt="Green Right Top" title="Green Right Top" href="#" coords="771,1212,93" shape="circle">
        <area target="" alt="Green Left Bottom" title="Green Left Bottom" href="#" coords="268,1421,97" shape="circle">
        <area target="" alt="Green Middle Bottom" title="Green Middle Bottom" href="#" coords="520,1409,91" shape="circle">
        <area target="" alt="Green Right Bottom" title="Green Right Bottom" href="#" coords="767,1417,92" shape="circle">
        <area target="" alt="Sign Out" title="Sign Out" href="#" coords="788,1614,76" shape="circle">
        <area target="" alt="Menu" title="Menu" href="#" coords="255,1618,73" shape="circle">
    </map>
  </div>

When I look at the inspect source of the page it renders to:

  <div class="col-xs-12 col-sm-4 text-center">
    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img style="width: 200px" usemap="#image-map" alt="Remote control menu.  Yes, you get to hold it." src="/assets/Remote-4f484678a9b3452f30cec85b33c1abf34aa0a74ef9c933b9c42d40a823c59b30.png" />

    <map name="image-map">
        <area target="" alt="BBQ" title="BBQ" href="/home/bbq" coords="241,595,103" shape="circle">
        <area target="" alt="Jokes" title="Jokes" href="/home/jokes" coords="511,587,95" shape="circle">
        <area target="" alt="Memory Enhancer" title="Memory Enhancer" href="#" coords="786,580,106" shape="circle">
        <area target="" alt="Gift Helper" title="Gift Helper" href="#" coords="259,866,105" shape="circle">
        <area target="" alt="Grey Bottom Middle" title="Grey Bottom Middle" href="#" coords="521,856,102" shape="circle">
        <area target="" alt="Grey Bottom Right" title="Grey Bottom Right" href="#" coords="784,868,97" shape="circle">
        <area target="" alt="My Mancard" title="My Mancard" href="/users/edit.1" coords="241,315,140" shape="circle">
        <area target="" alt="Sign In" title="Sign In" href="/users/sign_in" coords="669,234,909,410" shape="rect">
        <area target="" alt="Green Left Top" title="Green Left Top" href="#" coords="262,1224,92" shape="circle">
        <area target="" alt="Green Middle Top" title="Green Middle Top" href="#" coords="516,1205,89" shape="circle">
        <area target="" alt="Green Right Top" title="Green Right Top" href="#" coords="771,1212,93" shape="circle">
        <area target="" alt="Green Left Bottom" title="Green Left Bottom" href="#" coords="268,1421,97" shape="circle">
        <area target="" alt="Green Middle Bottom" title="Green Middle Bottom" href="#" coords="520,1409,91" shape="circle">
        <area target="" alt="Green Right Bottom" title="Green Right Bottom" href="#" coords="767,1417,92" shape="circle">
        <area target="" alt="Sign Out" title="Sign Out" href="#" coords="788,1614,76" shape="circle">
        <area target="" alt="Menu" title="Menu" href="#" coords="255,1618,73" shape="circle">
    </map>
  </div>

The image appears but it does not seem to have any links. Can anyone see where I went wrong?

@meves, I used an online generator to get the coordinates, but the links aren't appearing anywhere on the image. If the coordinates were wrong wouldn't they just be in the wrong places? — Liz, Aug 02 '16 at 18:36
Can you show us the image? Or create a plunker with an example? Because I'm not seeing the problem.. — rneves, Aug 02 '16 at 19:04
@meves, I updated the code with a simpler coordinate system, but the problem persists. Also the staging link is https://bearded-hockey-79768.herokuapp.com/ so you can see the problem. It's the remote on the bottom right of the index page. — Liz, Aug 02 '16 at 19:10

rneves · Accepted Answer · 2016-08-02T19:22:52.127

0

I found your problem.

You set a fixed width to img (style="width: 200px") and your coords is to full image size.

You will need to use a resized image on your generator, and avoid the css width.

edited Aug 02 '16 at 19:22

answered Aug 02 '16 at 18:55

rneves

2,013
26
35

Unfortunately no change with that new/changed line. – Liz Aug 02 '16 at 18:58
Excellent! Just out of curiosity, is it possible to do an image map on a responsive image? – Liz Aug 02 '16 at 19:25
I think it is possible only with javascript.. I saw here http://stackoverflow.com/questions/7844399/responsive-image-map – rneves Aug 02 '16 at 19:27
Okay, that change got it so that the link appeared, but now I'm getting `Bad Request bad URI '/%3C%=%20url_for%20edit_user_registration_path(current_user)%20%%3E'. WEBrick/1.3.1 (Ruby/2.2.4/2015-12-16) at elizabeths-macbook-pro.local:3000`. Any thoughts? – Liz Aug 02 '16 at 21:48
Ahhh, figured it out. Thank you! It works perfectly now! – Liz Aug 02 '16 at 22:07

Image Map Not Working with ERB/HTML

1 Answers1