Hotspots mit Mouseovereffekt versehen

jhonnybravo

Mitglied
Hallo zusammen!

Ich habe folgendes Problem:
Ich habe eine Karte von Deutschland als .jpg in eine Webseite eingebaut. Über den jeweiligen Bundesländern liegt ein Hotspot, der bewirkt, dass wenn man auf das Bundesland klickt, sich eine andere Webseite öffnet. Dies klappt auch wunderbar.

Nun ist aber weiterhin gewünscht, dass bei Mouseover über einem Bundesland, eine Grafik üder dem Hotspot / Bundeland erscheint, in dem das Bundeland in größer dargestellt ist und mit Landeswappen versehen ist. Es soll also über dem Hotspot ein neues Bild gelegt werden, dass dann erst bei Klick, die entsprechende Webseite öffnet.

Dies könnte man normalerweise sehr gut mit Flash verwirkliichen, jedoch liegt genau hier das Problem. Flash darf auf keinen Fall verwendet werden, da es sich bei diesem Projekt um eine Webseite für eine Behörde handelt. Auf deren Rechnern ist aus Sicherheitsgründen Flash und teilweise auch Java deaktiviert. Gibt es hier also eine Lösung, welche nur mit html und CSS auskommt? Wenn es überhaupt nicht gehen sollte, könnte zur Not auch JavaScript verwendet werden. Ohne wäre allerdings besser

Hier noch der Code der Karte mit Hotspots:
Code:
<body>
<img src="Deutschlandkarte.gif" width="720" height="509" border="0" usemap="#Bundesländer" />
<map name="Bundesländer" id="Bundesländer">
  <area shape="rect" coords="285,69,325,111" href="http://www.xxxxxx.de/html/mecklenburg-vorpommern.html" target="_blank" title="Mecklenburg-Vorpommern" alt="Mecklenburg-Vorpommern" />
  <area shape="rect" coords="317,145,342,177" href="http://www.xxxxxx.de/html/berlin.html" target="_blank" alt="Berlin" title="Berlin"/>
  <area shape="rect" coords="63,222,102,257" href="http://www.xxxxxx.de/" target="_blank" title="Nordrhein-Westfalen" alt="Nordrhein-Westfalen" />
  <area shape="poly" coords="46,342,58,340,70,336,80,331,85,326,84,315,76,308,63,309,52,314,38,325,43,338" href="http://www.xxxxxx.de/" target="_blank" title="Rheinland-Pfalz" alt="Rheinland-Pfalz" />
  <area shape="poly" coords="149,442,133,436,126,422,140,412,158,413,167,421,170,432,158,439" href="http://www.xxxxxx.de/html/baden-wurttemberg.html" target="_blank" title="Baden-Württemberg" alt="Baden-Württemberg" />
</map>
</body>

Vorab vielen Dank für eure Aufmerksamkeit und vielleicht auch Hilfe!

Gruß Jhonny
 
Hi,

wenn du dein Vorhaben mit CSS umsetzen willst, mußt du dich von der "konventionellen" Image-Map verabschieden, da CSS auf das <area>-Element keinen Zugriff hat, um da was mit area:hover auszulösen, damit eine weitere Info oder ein Bild eingeblendet wird.

Image map for detailed information imitiert die gewünschte Image-Map mit CSS :)

mfg Maik
 
Hi,

vielleicht hilft dir der Link hier weiter. Dort wird bschrieben wie man ein Pop Up Fenster mittels CSS erstellt. Du müsstest aber ggf. php ebenfalls verwenden.

Gruß
 
Zurück