Responsive CSS-Bild-Anker-tags - Image-Maps-Stil
Habe ich gearbeitet, auf eine responsive Website und habe ein bisschen ein problem mit Image Maps. Es scheint, dass Image-Maps funktionieren nicht mit Prozentsatz koordiniert.
Nach ein bisschen googeln fand ich eine JS-workaround - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html.
Aber ich will den Standort arbeiten mit JS deaktiviert.
Also nach Ausschöpfung jener Möglichkeiten, die ich beschlossen, zu schauen, mit relativ positionierten Anker-tags über die Bilder, um das gleiche zu tun. Dies ist eine bessere option sowieso IMO.
Ich habe versucht, legen Sie die Anker-tags auf das Bild in Prozent anhand von position und Größe, aber immer wenn ich neu skalieren die browser die Anker-tags bewegen sich überproportional auf das Bild.
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
Hier ein jsFiddle zu beschreiben, was ich meine - http://jsfiddle.net/wAf3b/10/. Wenn ich die Größe der HTML-box alles verzerrt wird.
Jede Hilfe sehr geschätzt.
- versuchen Sie es mit margin-left und margin-top statt top und left.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sie hatte ein paar Probleme mit CSS in die Geige, die Sie geschrieben (ebenso wie ein fehlendes
div
tag). Nachdem Sie sicher, dass#block
war relativ positioniert, die nicht 100% Höhe, und dass Ihre Anker wurden block/absolut positioniert, ich war in der Lage, die tags zu bewegen, mit den Blöcken.Hier ist die aktualisierte fiddle:
http://jsfiddle.net/wAf3b/24/
CSS
HTML
Eine wichtige Sache zu beachten mit den neuen html ist die Verwendung von
DOCTYPE
. Aus irgendeinem Grund, einige Browser mögen es nicht, wenn es nicht aktiviert.Absolut positionierte Elemente sind nicht mehr Teil des Layouts, so dass Sie nicht Erben relativen dimensionalen Eigenschaften von Ihren Eltern. Sie benötigen JavaScript, um zu tun, was Sie wollen.
Leute, die JS deaktivieren erwarten, dass eine degradierte bereits erfahren.