zelle bei mouseover beschriften

[sepp mairhubr]

hallo!

ich habe hier vielleicht eine kompliziertere sache. zumindest weiss ich nicht mehr weiter.

folgendes:

ich habe ein bild mit mehreren personen, darüber habe ich eine tabelle gelegt, jetzt möchte ich mit einem mouseover ein fähnchen anzeigen lassen: "harry potter" und wenn ich auf die das nächste gesicht wechsele soll vom mouseover dann die andere person "dolly buster" anzeigen.

hat da jemand einen tip?

gruss sepp

[Der Martin]

Hi,

ich habe hier vielleicht eine kompliziertere sache. zumindest weiss ich nicht mehr weiter.

nein, so wie du es beschreibst, klingt es ganz simpel.

ich habe ein bild mit mehreren personen, darüber habe ich eine tabelle gelegt

Wozu? Für den Effekt, den du erzielen willst, völlig unnötig.

jetzt möchte ich mit einem mouseover ein fähnchen anzeigen lassen: "harry potter" und wenn ich auf die das nächste gesicht wechsele soll vom mouseover dann die andere person "dolly buster" anzeigen.

Verwende eine verweissensitive Grafik, auch Imagemap genannt. Einen einfachen Text-Tooltip kannst du dann über das title-Attribut der area-Elemente relisieren. Ob area-Elemente auch :hover unterstützen, weiß ich im Moment nicht, käme auf einen Versuch an. Dann könnte man die Overlays mit CSS einblenden. Was aber in jedem Fall geht, sind onmouseover- und onmouseout-Events auf den area-Elementen. Da könntest du die Overlays dann per Javascript ein- und ausblenden.

Ciao,
 Martin

[sepp mairhubr]

hallo erst mal und danke für die hinweise.

@gunnar das ist mir klar, aber ich denke, als privatperson muss es nicht so professionell aussehen. ich arbeite seit jahren mit ms frontpage, hab mir mal das webimpression angeschaut, weil ich dachte, es hätte mehr funktionen.

@jörg und martin

das bild liegt in einer tabelle als hintergrund. auf diese tabelle habe ich eine tabelle darüber gelegt und entsprechend der person angepasst.
beim herumspielen kam ich auf die idee, eine "durchsichtige" bitmap zuerstellen, ist so etwas möglich?
dann könnte ich mir der option "alt" einen alternativen text einfügen.

gruss und danke, sepp

[Der Martin]

Hallo,

@gunnar das ist mir klar, aber ich denke, als privatperson muss es nicht so professionell aussehen.

professionelles Aussehen muss nichts damit zu tun haben, dass man mobile Geräte durch ein unglückliches Design ausschließt.

ich arbeite seit jahren mit ms frontpage

Autsch!

das bild liegt in einer tabelle als hintergrund. auf diese tabelle habe ich eine tabelle darüber gelegt und entsprechend der person angepasst.

Ja, schön - aber wozu die Tabelle?

beim herumspielen kam ich auf die idee, eine "durchsichtige" bitmap zuerstellen, ist so etwas möglich?

Ähm ja, natürlich. PNG und GIF unterstützen auch transparente Bereiche.

dann könnte ich mir der option "alt" einen alternativen text einfügen.

Das verstehe ich jetzt nicht. Aber was genau gefällt dir an Imagemaps nicht? Das ist die maßgeschneiderte Lösung für dein Vorhaben.

Ciao,
 Martin

[sepp mairhubr]

hallo martin!

ich bin ja kein professioneller webseitenersteller. für mich reicht das.
von den scripten bin ich immer etwas abgeschreckt, weil ich immer denke, dass bei einer warnmeldung jemand was wegklickt und die seite nicht angezeigt wird.
um mich mit php noch rumzuschlagen, also lernen, reicht mit html.

ich hab auch keine ahnung vom programmieren von scripts, daher wage ich mich auch nicht an so etwas heran.

gruss sepp

[Matthias Apsel]

Om nah hoo pez nyeetz, sepp mairhubr!

ich hab auch keine ahnung vom programmieren von scripts, daher wage ich mich auch nicht an so etwas heran.

image-maps sind reines HTML. Nur Mut.

Matthias

[Jörg Reinholz]

dann könnte ich mir der option "alt" einen alternativen text einfügen.

Brauchst Du nicht. Gib den Zellen der Tabelle eine Eigenschaft title:

<td title="Hugo tanzt Bogo">&nbsp;</td>

Wenn Du dann fertig bist spiele mal mit den angeboteten Lösungen herum. Du wirst schnell merken, dass es anders nicht nur besser (sogar einfacher!) geht sondern auch besser aussieht und aus den beiden Gründen mehr Spaß macht.

Jörg Reinholz

[sepp mairhubr]

hallo an alle!

vielen dank für die hilfe. ich habe den lösungsvorschlag von jörg angewand
<td title=test>

gruss sepp

[Gunnar Bittersmann]

@@sepp mairhubr:

nuqneH

jetzt möchte ich mit einem mouseover ein fähnchen anzeigen lassen

Dir ist bewusst, dass viele Geräte nicht über eine Maus verfügen und keine Hover-Effekt kennen? Und es werden täglich mehr.

Qapla'

[Jörg Reinholz]

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