Jörg Reinholz: zelle bei mouseover beschriften

Beitrag lesen

SELF-Forum

zelle bei mouseover beschriften

Jörg Reinholz
+1 Informationen zu den Bewertungsregeln

Genau wie Martin rate ich zu einem http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=image-map.

Das beste ist: Du kannst diese von Hand erstellen, aber viele Grafikprogramme wie z.B. das freie Gimp können Dich dabei sehr effektiv untersützen.

Wenn Du wie im Film vorgehst, dann gib in das Formular die Angaben für "alt" mit ein. Dann musst Du die erzeugte Datei nur noch mit einem Texteditor öffnen (das musst Du sowieso) und machst aus alt= title= (Suchen und Ersetzen).

Freilich kannst Du auch mit JS an der Mausposition ein "Fähnchen" erzeugen, welches Deinem Geschmack mehr entspricht.

Dann würde ich aber anders vorgehen.

  • Du machst einen DIV, Deine Grafik als Hintergrund, gib die Größe an.
  • Dahinein die "Fähnchen" als weitere DIV, hübsch gestaltet, aber zunächst ohne Text und ohne Hintergrund, Rahmen und dergleichen. Ebenfalls fest positioniert und mit fixen Größen. Abgesehen von der Position regelst Du die Darstellung am besten als am besten als Klasse.

Probier mal:

<!DOCTYPE html>  
<html>  
<head>  
<title>toggle</title>

<style type="text/css">  
body {  
    background-color:#fff;  
}  
  
.sichtbar {  
   position:absolute;  
   height:1.4em;  
   padding:.2em;  
   overflow:hidden;  
  
   background-color:#fff;  
   box-shadow:2px 2px 3px 1px gray;  
}  
  
.unsichtbar {  
   position:absolute;  
   height:1.4em;  
   padding:.2em  
   overflow:hidden;  
  
   border: 0;  
   /*oder, zum Testen:*/  
   border: 1px solid gray;  
  
  
   box-shadow:none;  
}  
</style>

<script type="text/javascript">  
function myShow(obj, str) {  
obj.className='sichtbar';  
obj.innerHTML=str;  
}  
  
function myHide(obj) {  
obj.className='unsichtbar';  
obj.innerHTML='';  
}  
  
</script>

</head>  
<body>  
<div style="position:absolute; top:200px; left:100px; height:300px; width:600px;background-color:#ddf; border:1 px solid black">(Dein Bild als Untergrund))  
     <div class="unsichtbar" style="top:26px; left:34px; width:3em; " onMouseover="myShow(this, 'Franz')" onMouseout="myHide(this)"></div>  
     <div class="unsichtbar" style="top:126px; left:134px; width:2.5em; " onMouseover="myShow(this, 'Karl')" onMouseout="myHide(this)"></div>  
     <div class="unsichtbar" style="top:226px; left:234px; width:4em; " onMouseover="myShow(this, 'Dimitry')" onMouseout="myHide(this)"></div>  
</div>  
</body>  
</html>

Jörg Reinholz

Beitrag melden
+1
Informationen zu den Bewertungsregeln