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. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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
     

  2. Anzeige
  3. #2 17. April 2006
  4. #3 17. April 2006
    Naja das braucht man zwar auch dazu, aber muss es noch mit einem Layer verknüpft werden - Siehe Beispielseite oben!
     
  5. #4 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. #5 7. Juni 2006
    SELFHTML ... dort findest du mouse over :D
     
  7. #6 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 :D...
    Thema verfehlt! SETZEN! 6!
     
  8. #7 7. Juni 2006

  9. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Mouseover Layer
  1. Antworten:
    1
    Aufrufe:
    587
  2. Bildaustausch - Mouseover Effect

    x4you , 8. September 2010 , im Forum: Webentwicklung
    Antworten:
    3
    Aufrufe:
    306
  3. Antworten:
    6
    Aufrufe:
    1.708
  4. Antworten:
    0
    Aufrufe:
    307
  5. Antworten:
    0
    Aufrufe:
    472