HTML Seite funktioniert nicht richtig

klwild · 02.08.2023

Hallo zusammen

Ich habe den unten angegeben Code erstellt (mit PHP), aber da stimmt es nicht. Das Bild "/images/evz-zug.png" aus dem <Area> wird nicht angezeigt.

Wo liegt der Fehler bitte?

Gruss Klaus

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes maximum-scale=2">
<link rel="stylesheet" id="main-css" href="main.css" type="text/css"/>
<script type="text/javascript" src="main.js"></script>
<title>Hunderttausend Zuger Unternehmen</title>
</head>
<body onload="draginit()">

<center>
<img id="grid" class="draggable" src="grid.png" usemap="#gridmap" onmousedown="dragstart(this)" onmouseup="dragstop()" style="left:0px; top:0px;">
</center>

<map name="gridmap">

<area shape='rect' title='Zusammen mit Zug' coords='200,200,250,250' href='/images/evz-zug.png' target='_blank' />
</map>

</body>
</html>

Sempervivum · 02.08.2023

Guten Morgen Klaus, "ick bin allhier

"
Das area-Tag funktioniert ein wenig anders als Du es dir vorstellst: Du erwartest wahrscheinlich, dass das Bild sofort angezeigt wird und über das grid.png gelegt wird. Das ist jedoch nicht der Fall: area erzeugt nur einen Link, wenn Du drauf klickst, wird das Ziel des Links, in diesem Fall das Bild, angezeigt, aber nur das. Abgesehen davon ist die Image-Map veraltet und von der Verwendung wird abgeraten, wie anders wo schon erklärt.
Beste Grüße, Ulrich

klwild · 02.08.2023

Danke Ulrich, habe mir das überlegt und natürlich hast du recht, so sieht es jetzt aus:

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes maximum-scale=2">
<link rel="stylesheet" id="main-css" href="main.css" type="text/css"/>
<script type="text/javascript" src="main.js"></script>
<title>Hunderttausend Zuger Unternehmen</title>
</head>
<body onload="draginit()">

<figure>
<img id="grid" class="draggable" src="grid.png" usemap="#gridmap" onmousedown="dragstart(this)" onmouseup="dragstop()" style="left:0px; top:0px;">

<a href='https://www.murer-reisen.ch' target='_blank' title='Wir reisen nicht, um dem Leben zu entfliehen, sondern damit uns das Leben nicht entflieht.' /><img src='./images/murer-reisen.png' width='100' height='40' style='position:absolute; left:200px; top:200px;' /></a><a href='https://gutefrage.net' target='_blank' title='gutefrage.net - ... hier kannst du fragen!' /><img src='./images/gutefrage.net.png' width='200' height='30' style='position:absolute; left:8000px; top:7000px;' /></a><a href='https://www.exsila.ch/' target='_blank' title='Tauschen statt kaufen.' /><img src='./images/exsila.png' width='120' height='50' style='position:absolute; left:400px; top:400px;' /></a><a href='https://www.evz.ch/' target='_blank' title='Zäme für Zug.' /><img src='./images/evz-zug.png' width='120' height='50' style='position:absolute; left:3000px; top:6000px;' /></a>
</figure>

</body>
</html>

Letzte Frage. Die Bilder aus auf dem <figure> verschieben sich nicht mit, wenn ich mit Drag-and-drop das grid.png verschiebe (die sollten unbedingt verhältnisgleich mitkommen). Kann man die irgendwie an das grid.png binden, dass alles verschoben werden kann? Der Link ist: hunderttausend-zuger-unternehmen.ch zum schauen.

Danke und Gruss, Klaus

Sempervivum · 02.08.2023

Du bist da offenbar auf eine ganz andere Version des Panning und Zooming umgeschwenkt. Darg&Drop ist immer ein wenig kompliziert und fehleranfällig. Besser bei dem Javascript bleiben, das wir früher hatten, da funktionierte alles im wesentlichen. Was dort noch fehlt kann man sicher leicht korrigieren oder einbauen.