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.
InformationsquelleAutor kabatwa | 2012-11-21
Schreibe einen Kommentar