Hotspot hover effekt

[ace24]

Hallo zusammen,

hab ein kleines Problem: Ich hab ein Bild und möchte rechts daneben einen Text erscheinen lassen wenn man mit der Maus über einen teil von diesem Bild fährt (hover).
Will kein Java einsetzt...Nur HTML und CSS !

Das wäre mein ansatz:

<img src="images/pers.jpg" border="0" width="156" height="483" usemap="#Map" />
<map id="Map" name="Map">
<span class="showcase"><area shape="rect" coords="29,7,128,121" href="#" />Informationen<br /> Link Eins</span>
</map>


--------------------------------
.showcase {
display: none;
}

a:hover .showcase {
position: absolute;
top: 50px;
left: 200px;
display: block;
width: 150px;
font: bold 0.92em Verdana, Arial, Helvetica, sans-serif;
background: #fff;
border: 1px dashed #257;
color: #000;
padding: 5px;
}

So geht auf jeden fall nicht... den "a" Tag gibts ja in meiner html auch nicht!
Weis aber auch nicht wie ich den jetzt einbauen soll ?


Evtl kann mir jemand helfen !

danke schon mal !

 

[Kümmelkorn]

Du kannst höchstes mal etwas wie das hier ausprobieren (wurde nicht getestet vo nmir):

<a href="" class="haha!"><img src="bla.jpg" alt="bla"><p>hallo</p></a>

a.haha p {
   display:none;
}

a.haha:hover p {
   display:block;
}

Ansonsten brauchst du übrigens gar kein Java, um einen Hover-Effekt zu erstellen! Such mal nach "onmouseover" - das ist Javascript, damit geht dein Vorhaben auf jeden Fall!

 

[ace24]

Du kannst höchstes mal etwas wie das hier ausprobieren (wurde nicht getestet vo nmir):

<a href="" class="haha!"><img src="bla.jpg" alt="bla"><p>hallo</p></a>

a.haha p {
   display:none;
}

a.haha:hover p {
   display:block;
}

So geht des auf jeden fall...ich will aber nur ein Teil von diesem Bild als Hover nutzen ...das ist das große Problem. Deswegen der "hotspot" !

Noch ne Idee ?

 

[Kümmelkorn]

ich will aber nur ein Teil von diesem Bild als Hover nutzen ...das ist das große Problem.

Ah ok, das hatte ich nicht richtig verstanden.

Noch ne Idee ?

Ansonsten brauchst du übrigens gar kein Java, um einen Hover-Effekt zu erstellen! Such mal nach "onmouseover" - das ist Javascript, damit geht dein Vorhaben auf jeden Fall!

 

[Dilirias Cortez]

Würde vielleicht doch auf javascript gehen. Gerade Brauser wie der Internetz Explohrer mögen die hover Class nicht sonderlich

Aber was spricht gegen <area coords="xyz" onmouseover="blubb();">

Und so weiter. Sollte doch klappen, oder?

 

[ace24]

Würde vielleicht doch auf javascript gehen. Gerade Brauser wie der Internetz Explohrer mögen die hover Class nicht sonderlich

Aber was spricht gegen <area coords="xyz" onmouseover="blubb();">

Und so weiter. Sollte doch klappen, oder?

Habs jetzt so gelöst...

<div id="txt">&nbsp;</div>

<div
onmouseover="document.getElementById('txt').firstChild.data='blubb'"

onmouseout="document.getElementById('txt').firstChild.data='&nbsp;'"
>Bild</div>




danke

 

[ace24]

Kann mir evtl einer sagen warum mir der IE nichts anzeigt...Bei mouseover keine reaktion! FF geht ohne Probleme !:

#txt {
position: absolute;
top: 50px;
left: 200px;
display: block;
width: 340px;
height:430px;
font-size:15px;
font-family: Copperplate, sans-serif;
color:#CCC;
padding: 5px;
border: 1px dashed #060;
}


<br /><img src="images/pers.jpg" border="0" width="156" height="483" usemap="#Map" />
<div id="txt">&nbsp;</div>

<div onmouseover="document.getElementById('txt').firstChild.data='Blubb Bla BlaBla'"
onmouseout="document.getElementById('txt').firstChild.data='&nbsp;'">

<map id="Map" name="Map">
<span class="showcase"><area shape="rect" coords="29,7,128,121" href="#" /></span>
</map>


</div>


danke

gruß
Alex

 

[ace24]

Hab die entgültige Lösung !!! Hurra ! Funzt im IE und FF

<br /><img src="images/pers.jpg" border="0" width="156" height="483" usemap="#Map" />


<div id="txt">&nbsp;</div>


<map id="Map" name="Map">
<area shape="rect" coords="29,7,128,121" href="#" alt="SnoopDog" onmouseover="document.getElementById('txt').firstChild.data='SnoopDog in da House'" onmouseout="document.getElementById('txt').firstChild.data='&nbsp;'" />

<area shape="rect" coords="28,126,128,240" href="#" alt="dli" onmouseover="document.getElementById('txt').firstChild.data='Ich bins der'" onmouseout="document.getElementById('txt').firstChild.data='&nbsp;'" />

<area shape="rect" coords="28,245,127,359" href="#" alt="dndy" onmouseover="document.getElementById('txt').firstChild.data='laber laber'" onmouseout="document.getElementById('txt').firstChild.data='&nbsp;'" />

<area shape="rect" coords="28,364,128,478" href="#" alt="dor" onmouseover="document.getElementById('txt').firstChild.data='Lalalala'" onmouseout="document.getElementById('txt').firstChild.data='&nbsp;'" />



</map>

Trotzdem danke

 

[wegus]

Will kein Java einsetzt

Java != Javascript !!!