nicht angemeldet
Hallo,
ich habe folgendes Problem:
Ein Bild wird mit dem Befehl
img border="0" src="Bild_001.jpg" width="100%
so angezeigt, dass sich seine Breite immer am Fenster orientiert. Nun würde ich auf diesem Bild gerne erläuternde Texte anzeigen wenn man mit der Maus über bestimmte Bildzonen fährt. Imagemaps können dies allerdings meines Wissens nur mit absoluten Koordinaten, d.h. sie verweisen immer auf die festgelegte Stellen und scheiden somit als Lösungsweg aus.
Mit window.innerWidth kann ich die aktuelle Bildbreite auslesen und den Skalierungsfaktor zur immer gleich grossen Original-Datei errechnen (Position = 1600/window.innerWidth).
Wie kann ich jetzt an den berechneten Positionen eine Grafik überblenden, oder einen Link oder Tooltip oder sonst irgend etwas, an das ich einen mouseover-sensitiven Hinweis verankern kann??
Beispiel: Das Originalbild ist 1600 * 1200 gross (window.innerWidth ist also 1600). Bei x=400 und y=200 soll ein kleines quadratisches 50 Pixel großes Bild oder eine mouseover-sensitive Fläche erzeugt werden; allerdings abhängig von der aktuellen Windowgröße, in deren Rahmen das Bild skaliert wird (width=100%). Ist das Window also nur 800 Pixel breit soll sich die Grafik/Fläche o.ä. bei x=200 und y=100 befinden und 25*25 Pixel gross sein.
Zur Verdeutlichung der flexiblen Bildgröße könnt Ihr Euch ein Beispiel von meiner Seite unter http://www.westkueste-usa.de/images/BayCruise_001.htm ansehen.
Gibt es eine Lösung für mein Problem?
Stefan