Image-Maps
Karlheinz Z.
- html
0 Rolf B
Ich versuch' gerade ein quadratisches Bild diagonal in zwei dreieckige Image-Maps zu teilen. Es hat tatsächlich kurz mal funktioniert (trotz der sich überlagernden Trennlinie), nach weiterem Herumwerkeln ging dann aber plötzlich nix mehr. Hat nix mit dem Doctype zu tun. Vermutlich sind's fehlerhafte Koordinaten (?!), finde aber den Fehler nicht. Any ideas?<p>
<!DOCTYPE html>
<head><title></title></head><body>
<img src="bild.jpeg" alt="" style="border:1px solid #000000; width:500px; height:500px" usemap="dreiecke">
<map name="dreiecke">
<area shape="poly" coords="0,0,500,0,0,500" alt="irgendwas" title="irgendwas" href="http://www.google.com">
<area shape="poly" coords="0,500,500,500,500,0" alt="irgendwas" title="irgendwas" href="http://www.google.com">
</map>
</body></html>
Die Koordinaten für's Rechteck stimmen doch wohl ?!
oben links: 0,0
oben rechts: 500,0
unten links: 0,500
unten rechts: 500,500
Hallo Karlheinz Z.,
usemap enthält eine "page local URL" und nicht nur den Namen. Das meint den Hash-Anteil einer URL.
Schreibe also usemap="#dreiecke".
Ich hab das im Wiki mal betont.
Aber: das Problem an img+map ist, dass Du mit Pixeln hantieren musst, so dass das Bild nicht mit der Seitengröße skalieren darf.
Guckst Du besser hier: responsive Imagemaps mit SVG
Rolf