Area Shape onmouseover

Hi,

suche seit 2 Tagen nach einer Lösung für mein Problem

Beschreibung des Problems:

In der Mitte der Webseite befindet sich eine Landkarte.
Darauf sind mehrere Punkte markiert, die auf bestimmte Links verweisen.
Wenn man über diese Punkte mit dem Mauszeiger drüber fährt, soll ein Fenster aufgehen, in dem Inhalt bestimmter html-dateien mit Bildern und Texten eingeblendet wird. Die eingeblendeten Bilder und Texte sollen beim drauf klicken zu verlinkten Seiten weiter führen.
Hab schon mit Java versucht, finde aber jedes mal Scripte mit Popup-Funkton, die ich lieber vermeiden würde, da die von Popupblocker gesperrt werden.
Teste jetzt folgendes Script JavaScript DHTML Tooltips , ist aber immer noch nicht das richtige

Beispiel zum Tema

Hat einer von euch eine Idee ?
Wäre sehr dankbar
Gruß Bob

Hallo,

Ein neues Fenster kannst du nur mit klick-events öffnen. Alles andere fällt bei allen mir bekannten Browsern unter die Rubrik "Popups zur Userverunsicherung".

Eine Möglichkeit wäre gleich beim Betreten der Seite ein weiteres Fenster im Hintergrund zu öffnen und die entsprechenden Inhalte bei onmouseover zuzuweisen.

Ein eleganter Weg wäre die Inhalte mit 3wdom zu generieren und auf der gleichen Seite darzustellen. Dann kannst du sie mit mouseout auch wieder schliessen.

Ausserdem musst du das/die geöffnete(n) Fenster beim Verlassen der Seite ja auch wieder schliessen, was beim ie gar nicht so einfach ist.

Gruss

Tümmel

ich habe jetzt paar beispiele mit popup und ohne eingefügt

1. mit popup

2. ohne popup

ich denk mal, dass ich das hinkriegen werde

Auf die Schnelle schau mal hier:

http://www.kanton.sg/index.php?page=events&mod=all

Wechsle in die Jahresansicht und fahre mit der Maus über die Links und schau was passiert. Bilder können auch integriert werden. Wenn es das ist was Du suchst such ich dir den Code und den Autor raus.

danke, ist eine nützliche seite, so was in der richtung suche ich ja.

werde heute etwas fleisiger googeln müssen, wird bestimmt eine lange und interessante nacht sein

Ohne Popup ist es auf jeden Fall bersser. Sicherer und schneller.

http://www.meyerweb.com/eric/css/edge/popups/demo.html

Hier kannst Du das Ganze runter laden:

OverLib

Und als Anhang die Kurzanleitung die ich mir zur eigenen Übersicht zusammengestellt habe:



Dokumentation OverLib (Tooltip)

OberLib erzeugt Infoboxen beim überfahren eines Links oder einer Grafik, ohne dass diese Angeklickt werden müssen. Da eine Infografik einen Link braucht, dieser aber ohne Funktion sein soll, wird das Laden mit einem JavaScript verhindert.

In den Header:
<script language="Javascript" src="overlib_js/overlib.js"></script>

Irgendwo in den Body:
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

Wirkungsloser Link:
<href="javascript:void(0);"></a>

Aufbau

Das onmouseout ist immer das Selbe: onmouseout="return nd();"

Aufgerufen und gesteuert werden die Tooltips über onmouseover. Dabei ist folgende Syntax zu beachten:
Die Befehle und Werte sind durch Komma (,) zu trennen. Befehle sind in GROSSBUCHSTABEN zu schreiben. Werte sind in Hochkomma (') zu setzen.
Es kommt immer erst der Befehl, dann der jeweilige Wert.
Die Reihenfolge der Befehle ist beliebig. Ausnahme: Erster Wert ist immer der Inhaltstext des Tooltips. Dieser Wert ist der Einzige der keinen Befehl benötigt. Es gibt Befehle die einen Wert benötigen, Andere Befehle benötigen keinen Wert.

In der Datei overlib.js sind Standardwerte für Farben Schrift und Rahmen definiert. Diese können dort grundsätzlich angepasst werden, wenn man nur die Standarddarstellung verwenden will. Möchte man unterschiedliche Darstellungen und Farben einsetzen, werden diese jeweils im onmouseover definiert.

LEFT, hängt den Tooltip links an den Mauszeiger (kein Wert)
CENTER, richtet den Tooltip zentriert aus (kein Wert)
RIGHT, hängt den Tooltip rechts an den Mauszeiger (kein Wert)
BELOW, richtet den Tooltip unterhalb des Mauszeigers aus. (kein Wert)
ABOVE, richtet den Tooltip oberhalb des Mauszeigers aus. (kein Wert)
WIDTH, Breite des Tooltips (Pixel)
HEIGHT, Höhe des Tooltips (Pixel)
FGCOLOR, Hintergrundfarbe (#000000)
BGCOLOR, Rahmenfarbe (#000000)
BORDER, Rahmenstärke (5)
TEXTCOLOR, Textfarbe (#000000)
TEXTSIZE, Textgrösse (11px)
CAPTION, erzeuugt einen Titelbalken über dem Tooltip. Balkenfarbe identisch mit Rahmenfarbe (Titeltext)
CAPCOLOR, Textfarbe des Titelbalkens (#000000), ohne Angabe Farbe des Rahmens
CAPTIONSIZE, Textgrösse des Titelbalkens (16px)
CAPICON, Grafik vor dem Titeltext (img/sym/meldung.jpg)
TEXTFONTCLASS, CSS Klasse für Text (Klassenname)
CAPTIONFONTCLASS, CSS Klasse für Titel (Klassenname)
CLOSECOLOR, Textfarbe des 'schliessen'-Links im Titelbalken (#000000)
CELLPAD, Abstand vom Text zum Rahmen, gilt nicht für den Titelbalken (2)
OFFSETX, Verschiebung von der Maus rechts, negativer Wert nach links (10)
OFFSETY, Verschiebung nach unten, negativer Wert nach oben (obere Kante) (10)

Beispiele:

Standard Tooltip
<a href="javascript:void(0);" onmouseover="return overlib('Tooltiptext: standard', LEFT, ABOVE, FGCOLOR, '#ffffff');" onmouseout="return nd();">...</a>

Popup haftend
<a href="javascript:void(0);" onmouseover="return overlib('Tooltiptext: haftend', STICKY, MOUSEOFF, BGCOLOR, '#000000');" onmouseout="return nd();">...</a>

Diese Funktionsbeschreibung ist nicht vollständig, allerdings reicht sie für den normalen Gebrauch völlig. Weitere Informationen in den Originaldokumenten.

Zusammenfassung: René A. Da Rin, St.Gallen, August 2005, © Erik Bosrup, http://www.bosrup.com/web/overlib/

Danke an alle für eure Tips und Links !!!

Bin jetzt viel weiter gekommen

Gruß _BOB_