Problem mit Area Shapes und MouseOver-Events

[Paul]

Hallo SelfHTML-Forenuser,

mich plagt seit einigen Tagen ein Problem über oben genannte Area Shapes.
Folgende Aufgabe: Ein Bekannter von mir möchte einen persönlichen Webauftritt und dafür eine etwas ausgefallene Homepage.
Dabei soll sein Name das Menü darstellen, dass heißt Teile des Namens sollen bei einem MouseOver-Event in sich ein Bild darstellen und damit eine jeweile Rubrik repräsentieren und per Klick erreichbar machen.
Ich habe es inzwischen so realisiert, dass ich durch Area Shapes ein, vorher an der Stelle verstecktes, Teilbild anzeigen lasse (das Bild befindet sich innerhalb eines absoluten Divs). Rein optisch sieht das schon ganz gut aus, aber jetzt besteht das Problem, dass die Fläche, wo das Bild versteckt ist, natürlich nicht mehr anklickbar ist und ich auf die Fläche um das versteckte Bild herum ausweichen muss, was für zukünftige Fremduser ja unzumutbar ist. Ein Ausweichen auf etwaige andere Ebenen mit dem z-Index scheint wohl mit den Shapes nicht zu funktionieren.
Ich wäre also sehr dankbar, wenn wir ihr mir irgendwie behilflich sein könntet.
Im Anhang noch der Quellcode:

  
<div id="divmusik"><img id="musik" src="bilder/musik.jpg" alt="" style="visibility:hidden" usemap="#paul" border="0"></div>  
<div id="divvita"><img id="vita" src="vita.jpg" alt="" style="visibility:hidden" usemap="#paul" border="0"></div>  
<div id="divfoto"><img id="foto" src="bilder/foto.jpg" alt="" style="visibility:hidden" usemap="#paul" border="0"></div>  
<div id="div1">  
	<img src="bilder/index.jpg" alt="Index" usemap="#paul" class="c0"/>  
	<map name="paul" id="themen">  
		<area class="a1" shape="rect" coords="0, 112, 539, 408" href="vita.htm" alt="vita" onmouseover="document.getElementById('vita').style.visibility='visible'" onmouseout="document.getElementById('vita').style.visibility='hidden'"/>  
		<area class="a1" shape="rect" coords="0, 376, 415, 605" href="foto.htm" alt="foto" onmouseover="document.getElementById('foto').style.visibility='visible'" onmouseout="document.getElementById('foto').style.visibility='hidden'"/>  
		<area class="a1" shape="rect" coords="422, 375, 878, 589" href="musik.htm" alt="musik" onmouseover="document.getElementById('musik').style.visibility='visible'" onmouseout="document.getElementById('musik').style.visibility='hidden'"/>  
	</map>  
</div>	  

CSS:

  
#divmusik  
{  
	position:absolute;  
	top:370px;  
	left:831px;  
	z-index:12;  
}  
  
#divvita  
{  
	position:absolute;  
	top:153px;  
	left:467px;  
	z-index:12;  
}  
  
#divfoto  
{  
	position:absolute;  
	top:376px;  
	left:467px;  
	z-index:12;  
}  
  
img.c0  
{  
	border-color:black  
}  
  
#div1  
{  
	text-align:center;  
	vertical-align:middle  
}  
  

Danke schonmal im Vorraus

Paul

[Gunnar Bittersmann]

@@Paul:

nuqneH

Dabei soll sein Name das Menü darstellen, dass heißt Teile des Namens sollen bei einem MouseOver-Event in sich ein Bild darstellen und damit eine jeweile Rubrik repräsentieren und per Klick erreichbar machen.

Mystery meat navigation? Das solltet Ihr nochmal überdenken. (Lies: Du solltest es deinem Bekannten ausreden.)

aber jetzt besteht das Problem, dass die Fläche, wo das Bild versteckt ist, natürlich nicht mehr anklickbar ist

Wie wär’s denn, die Bilder zu verlinken? (Die @href bei 'area' bleiben natürlich bestehen, damit das – ähm naja – „Menü“ auch ohne JavaScript „funktioniert“.)

Qapla'