Mouseover Layer | Wie?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von MrPink, 17. April 2006 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 17. April 2006
    Hallo Jungs,

    ich wollte euch mal fragen, ob ihr wisst wie man folgenden Effekt:

    http://www.dyn-web.com/dhtml/tooltips/

    am einfachsten programmieren kann ! ? Ich habe schon etwas gegoogelt und mich erkundigt und bin darauf gekommen, es sollte mit JavaScript zu realisieren sein. Nur weiss ich leider nich genau, wie das geht! Könnt ihr mir helfen? Vllt sagen wo ich nach Lösungen suchen soll?

    Oder habt ihr selber eine Lösung?

    Gruss
     
  3. 17. April 2006
    meinst du sowas hier in der art: http://www.on-mouseover.de/script1.htm
    lies dir das einfach durch,is eigtl ganz einfach....
     
  4. 17. April 2006
    Naja das braucht man zwar auch dazu, aber muss es noch mit einem Layer verknüpft werden - Siehe Beispielseite oben!
     
  5. 7. Juni 2006
    hab mal eben gegoogelt und hab folgendes gefunden.

    HIER KLICKEN

    hier ist mal ein auszug aus meinem code:

    Code:
    function updateTooltip(e) {
try {
 var x=window.event.offsetX;
 var y=window.event.offsetY;
 if (tooltip != null) {
 tooltip.style.left = ( x + 20 ) + "px";
 tooltip.style.top = ( y + 20 ) + "px";
 }
 } catch (error) { error=null; }
 }

 function showTooltip(id) 
 {
 try 
 {
 tooltip = document.getElementById(id);
 tooltip.style.display = "block"
 } catch (error) { error=null; } 
 }

 function hideTooltip() 
 {
 try 
 {
 tooltip.style.display = "none";
 } catch (error) { error=null; } 
 }
 function imgover(imgname,Bildname){
 imgname.src = Bildname;
}

function imgout(imgname){
 imgname.src = "off.gif";
}

//HTML
<area shape="circle" coords="261,213,10" onmouseover="showTooltip('d1');imgover(Bild1,'Quedlinburg.jpg')" onmouseout="hideTooltip();imgout(Bild1)">

<div class="tooltip" style="width: 150px;" id="d1">
 <div class="head">Quedlinburg</div>
 <div class="content">Schlosspark</div>
</div>
    viel spass damit!!!


    nice day!!
     
  6. 7. Juni 2006
    SELFHTML ... dort findest du mouse over
     
  7. 7. Juni 2006
    also das geht mit css:
    Code:
    <html><head>
<style type="text/css">
 a.menu {display:block;}
 a.menu:link, a.menu:visited {color:#000000; text-decoration:none;}
 a.menu:hover {color:#FFFFFF; background: #FF9900}
 
 .rahmen {border:solid 1px #CC0000; color:#000000; background: #FF0000; font-size:12px; font-family:verdana}
</style>
<title>Unbenanntes Dokument</title>
</head>
<body>
 <table cellpadding="1" cellspacing="5" width="100">
 <tr><td class="rahmen" align="center"><a href="home.html" class="menu">Home</a></td></tr> <td class="rahmen" align="center"><a href="news.html" class="menu">News</a></td>
 <tr><td class="rahmen" align="center"><a href="me.html" class="menu">About Me</a></td></tr>
 <tr><td class="rahmen" align="center"><a href="pics.html" class="menu">Pics</a></td></tr>
 <tr><td class="rahmen" align="center"><a href="links.html" class="menu">Links</a></td></tr>
 </table>
</body></html>
    das springende Punkt ist die Zeile 3: a.menu {display:block;}
    Lösch die Zeile mal raus und schau was passiert.
    Durch block wird die komplette Tabellenzeile zum Verweis!


    //edit: ok... hab da wohl etwas falsch verstanden ...
    Thema verfehlt! SETZEN! 6!
     
  8. 7. Juni 2006
    http://www.schmittis-page.de/index.html?/java/t16.htm

    funzt aber nur im IE und Opera
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.