Zur Navigation

Resizeable Image-Maps?

1 lava

Hm, jetzt eine Frage zu den Image-Maps. Jetzt liegt ja im neugeöffneten Fenster ein Bild als Hintergrundbild zugrunde, auf dem einzelne Areale als Hotspots definiert wurden (mit Dreamweaver, denn wie hätten wir sonst die anzugebenden Koordinaten rauskriegen können?) Das Originalbild war aber so groß, daß es nicht in das neue Fenster paßte. Also haben wir alle Bilder verkleinert und die Hotspots wieder neu mit Dreamweaver bestimmt. Das ist jetzt aber auch nicht das, was schön wäre: denn jetzt hat das geöffnete Bild eine feste (kleine) größe und wenn ich das neue Window dann größerziehe, geht das Hintergrundbild nicht mit. Können die Koordinaten auch anstatt als Fixwerte als Relativwerte angegeben werden? Damit sich zunächst im neuen Fenster eine kleine Vorschau (aber mit vollem Bild, nur verkleinert) öffnet und ich das dann beim Größerziehen kontinuierlich(!)entsprechend erweitern kann bis auf die Original/Maximalgröße..... !????

Also, wir öffnen das Fenster von index.php aus mit


function Zoom()
{
Showfenster = window.open("clubpres.php", "Fensternamen", "height= 660, width= 820, resizable=yes,menubar=no");
Showfenster.focus();
}

und haben dann in clubpres.php folgenden Body:
<body>
<div align="center"><img src="wenke_start.jpg" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="43,616,186,758" href="pink.php" />
<area shape="rect" coords="234,614,379,762" href="meer.php" />
<area shape="rect" coords="427,614,571,759" href="dschungel.php" />
<area shape="rect" coords="621,613,766,758" href="dschungel2.php" />
<area shape="rect" coords="816,616,960,758" href="rot.php" />
</map>
</div>
<body>
Wenn ich bei img noch eine feste Anzeigegröße erzwinge, die ich auch bei window.open erzwingen will (jeweils mit width=, height=), dann nutzt mir auch mein resizable nichts. Selbst wenn ich mit PHP wieder gucken würde, ob das Foto gerade erst geladen wird und nur beim Laden die Größe erzwinge und beim Ziehen (gibt es sowas wie onmouseover auch für Ziehen am Fensterrahmen?) neu laden würde, könnte das Hintergrundbild wohl seine Größe kaum dynamisch anpassen, oder??? Eigentlich soll das Bild in einer optimalen Größe auf voller Fensterbreite geöffnet werden, trotzdem auch vergrößerbar und verkleinerbar sein beim Ziehen (also Mitgehen und nicht abgeschnitten werden bzw. im leeren Raum stehen) und die Hotspots müßten sich natürlich auch noch entsprechend anpassen, damit Klick auf die Thumbs weiterhin den gewünschten Effekt hat. Wie mach ich das? Kann ich vielleicht im <img>-Tag "height=AKTUELLE_FENSTERHÖHE, width=AKTUELLE_FENSTERBREITE" (dafür gibt es doch sicher vordefinierte Variablen?) angeben anstatt feste Zahlenwerte? Dann müßte es zumindest beim Aufruf sich anpassen. Aber wie sorg ich dafür, daß es sich dann auch immer beim Ziehen anpaßt (Schleife, die es ständig prüft, solange ich ziehe?) und daß die Hotspots mitgehen (kann ich die irgendwo so definieren daß klar wird, sie sollen sich auf die RELATIVE Position bzgl. des Originalbildes beziehen und nicht auf die absolute Position im Anzeigefenster)?

11.01.2007 09:17 | geändert: 11.01.2007 09:56

2 Jörg

Ein Bild kann relative Höhen- und Breitenangabe erhalten, d.h. mit Prozentzahlen, die sich dann auf die Größe des Elternelements beziehen.

<img width="90%" height="90%" src="image.jpg"  alt="">

Bei einer Image-Map sind die Angaben meins Wissens allerdings immer als absolute Prixelwerte zu interpretieren

11.01.2007 10:13

3 lava

Hm, das würde heißen, es gäbe keine andere Lösung für das Problem, als die anklickbaren Areas nicht als festen Bestandteil des Gesamtbildes einzubauen, sondern ein Hintergrundbild jeweils mit 100% zu öffnen und darauf mit CSS (da sind ja Relativ-Angaben möglich) die anklickbaren Areas als Extra-Pics mit
<a href=...> <img src=...></a> draufzupacken???

---

Hm, Moment, aber die Zahlen, die in Koords stehen, könnte ich doch auch mit einem PHP-Script immer aktuell berechnen, falls es eine globale Variable für die jeweilige Browserfensterhöhe und -weite gibt? Gibt es die?

11.01.2007 11:11 | geändert: 11.01.2007 11:16

4 Jörg

aber die Zahlen, die in Koords stehen, könnte ich doch auch mit einem PHP-Script immer aktuell berechnen, falls es eine globale Variable für die jeweilige Browserfensterhöhe und -weite gibt? Gibt es die?

In PHP ist dies schwieirig zu lösen, da die Änderung der Fenstergöße ja nur clientseitig erfolgt. In JavaScript gibt es die Eigenschaften für window innerHeight und innerWidth - die versteht der IE allerdings nicht. Irgendwo hatte wir aber schon mal ein JavaScript behandelt, welches die Größen des Anzeigeberteiches browserübergreifend berechnen kann - muss ich nochmal suchen

Die Berechnung könnte man dann bei onresize vornehmen - dann müsste man schauen, ob man damit das coords Attribut der image-map überschreiben kann

11.01.2007 12:18 | geändert: 11.01.2007 12:18

5 Jörg

Nachtrag:

Zitat von Jörg
Irgendwo hatte wir aber schon mal ein JavaScript behandelt, welches die Größen des Anzeigeberteiches browserübergreifend berechnen kann - muss ich nochmal suchen

Hier hattest du mal so ein Script gepostet

11.01.2007 12:36 | geändert: 11.01.2007 12:36

... 9 Jahre und 7 Monate später ...

6 The Agent (Gast)

Die Lösung lautet: SVG

26.08.2016 13:21

7 Jörg

Ja, heutzutage würde man wohl ein SVG nutzen, sofern man den IE8 nicht mehr berücksichtigen braucht. Also so in der Art wie auf dieser Seite:

http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG

Vor neuneinhalb Jahren, als dieser Thread gestartet wurde, gab es halt noch keine auchreichende Browserunterstützung für SVG.

26.08.2016 14:41

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]