Image Map funktioniert nicht mit ERB/HTML

Ich versuche, ein Bild Karte in meine App zu setzen und ich habe folgenden erb Code:Image Map funktioniert nicht mit ERB/HTML

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

Als ich an der Quelle überprüfen Aussehen der Seite es macht zu :

<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="https://stackoverflow.com/users/edit.1" coords="241,315,140" shape="circle"> 
     <area target="" alt="Sign In" title="Sign In" href="https://stackoverflow.com/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>

Das Bild erscheint, aber es scheint keine Links zu haben. Kann jemand sehen, wo ich falsch gelaufen bin?

Quelle

2016-07-30 Liz

Sind Sie sicher, dass Ihre Koordinaten in Ordnung sind? – rneves

@meves, Ich habe einen Online-Generator verwendet, um die Koordinaten zu erhalten, aber die Links werden nirgends auf dem Bild angezeigt. Wenn die Koordinaten falsch wären, wären sie nicht nur an den falschen Stellen? – Liz

Können Sie uns das Bild zeigen? Oder einen Plünderer mit einem Beispiel erstellen? Weil ich das Problem nicht sehe .. – rneves

Ich habe dein Problem gefunden.

Sie legen eine feste Breite img (style="width: 200px") und Ihre Koordinaten ist auf die volle Bildgröße.

Sie müssen ein verkleinertes Bild auf Ihrem Generator verwenden und die CSS-Breite vermeiden.

Quelle

2016-08-02 18:55:35 rneves

Leider keine Änderung mit dieser neuen/geänderten Zeile. – Liz

Ausgezeichnet! Nur aus Neugier, ist es möglich, eine Image Map auf einem Responsive Image zu erstellen? – Liz

Ich denke, dass es nur mit Javascript möglich ist .. Ich sah hier http://StackOverflow.com/Questions/7844399/responsive-image-map – rneves

Image Map funktioniert nicht mit ERB/​​HTML

Antwort

Verwandte Themen

Image Map funktioniert nicht mit ERB/HTML