Archivlink: javarea.de Forum > JavaScript > Bild mit "Hotspots" zum Beschriften
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Bild mit "Hotspots" zum Beschriften

Pages: [1]

geschrieben von fell am 27.09.2007 - 22:05
Hallo an alle Profis,
ich als Leihe habe folgendes Problem.
Auf einem Guppenfoto, welches auf einer Hompage eingebunden werden soll, möchte ich gern, das wenn die Maus in den Bereich einer Person kommt eine art Rollover erscheint, in dem der Name der Person zu lesen ist.
Ist so etwas mit einfachen Mitteln möglich?

Über eine " Idiotensichere " Anleitung wäre ich sehr dankbar.



Viele Grüße aus der Oberlausitz
Karsten Schiller

P.S. : Die webseite soll mit NOF 9 erstellt werden

geschrieben von okley am 29.09.2007 - 11:04
Kein Problem. Das ist relativ einfach realisierbar

Du brauchst erst einmal das Programm Fast Image-Map 2 um die ImageMaps in HTML zu definieren.
Dann brauchst du weiter das Tooltip-Script von Walter Zorn. Eben um den Rollover Effekt zu erzeugen.
http://www.walterzorn.de/tooltip/tooltip.htm

Dann gehst du wie folgt vor:
1
Mit Image-Map erstellst du eine neue Datei und wählst dein Bild. Oben kannst du dann auswählen ob du ein Rechteckiges, Kreisrundes oder ein Polygones (beliebig viele Ecken) Feld auf dem Bild definieren möchtest. Zeichne einfach alle Bereiche die später auf den Rollover reagieren sollen auf dem Bild ein.

2
Dann wählst du Links in der Übersicht jede einzelne Verweisfläche an und fügst im Javascript Reiter unten bei onMouseOver folgendes ein: Tip('Irgendein Text zu der Person'). Das ist dann der Text der erscheint wenn du mit der Maus darüber gehst.

3
Dann erstellst du dir eine HTML Datei. Auf der Seite wo du das Tooltip heruntergeladen hast, hat es eine Anleitung wie die HTML Datei aussehen muss, damit das Tooltip dann funktioniert. Im Fast Image-Map gehst du jetzt im Menu auf ImageMap->In Zwischenablage kopieren. Und fügst es in der HTML Datei irgendwo im Body Bereich ein.

Wenn der Pfad zum Bild (src Attribut des img tag) stimmt, funktionieren die Tooltips jetzt bereits im Browser.

Ich habe dir eine Zip mit meinem Beispiel angehängt. Bei Fragen einfach melden ;)


geschrieben von fell am 29.09.2007 - 14:23
Hallo okley,

danke für deine Anleitung. Ich werde mich gleich Schritt für Schritt dranmachen und probieren, ob mir das auch gelingt. Es ist genau das was ich gesucht habe. Bei Erfolg werde ich es hier melden.


Viele Grüße aus der Oberlausitz
Karsten Schiller


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.