kostenloser Webspace werbefrei: lima-city

tooltip-farbe ändern

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   sonok

   Moderator

   sonok hat kostenlosen Webspace.

   3:44, 19.10.2010

   Hallo!
   
   Ich habe tag/bild">Bilder eingebaut mit dem tooltip-Zeug ...
   
   <img src="thumbs/bild.png" title="hallo">
   
   Wenn ich mit der Maus drüberfahre, dann kommt der auch - so weit so gut.
   Jetzt möchte ich aber, das die Farben des tooltip anders sind, also der Hintergrund weiß ist und nicht die Farben des OS verwendet. Gefunden habe ich nur Anleitungen (JavaScript bzw CSS), wie man eigene tooltips bastelt - was ich allerdings nicht möchte.
   
   Gibt es da also eine CSS-Möglichkeit, oder kann man via JavaScript die geltende Farbe von infobackground überschreiben?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. t*****b

   11:30, 19.10.2010

   sonok schrieb:
   Gibt es da also eine CSS-Möglichkeit
   

   
   
   Nein
   
   

   sonok schrieb:
   oder kann man via JavaScript die geltende Farbe von infobackground überschreiben?
   

   
   
   Nein.
   
   Um das zu erreichen, bleibt dir nichts anderes als eine CSS/JS-Lösung.

4. simuliertes

   

   simuliertes hat kostenlosen Webspace.

   21:50, 20.10.2010

   Diese Frage hatte ich auch mal.
   Nachdem ich herausgefunden habe das das nur mit js möglich ist habe ich mir 'nen script geschrie3ben der alle <a> UND <IMG> -tags mit einem title attribut "umwandelt".
   D.h:
   javascript an= tooltip bei onmouseover mit anderer Farbe + Inhalt des title attributes.
   javascript aus= tooltip durch das title-attribut.
   
   Vielleicht kannst Du ja was damit anfangen:
   

   <!--/*Colored Tooltip*/
   /*create a div with ..
       id="tooltip"
       ...and..
       style="
           position: absolute;
           display: none;
           z-index: 100;" 
           ..and customize it with css at your choice*/
   x=0;y=0;current_pic_id="";
   tooltip_id='tooltip';
   
   document.onload = setTimeout("initmouseover()", 1000);
   function initmouseover()
   {
   document.onmousemove = updateWMTT;
   modifyTITLE('IMG');
   modifyTITLE('A');
   }
   function modifyTITLE(tag)
   {
        var bilder = document.getElementsByTagName(tag)
        for (a=0;a<bilder.length;a++)
        {
             if (document.getElementsByTagName(tag)[a].title)
             {
                     var ID=tag+'_nr_'+a;
                   if (!document.getElementsByTagName(tag)[a].id)
                       document.getElementsByTagName(tag)[a].id =ID;
                  document.getElementsByTagName(tag)[a].onmouseover = new Function("showthisOver_"+tag+"_nr_"+a, "showWMTT('"+ID+"','"+document.getElementsByTagName(tag)[a].title+"');");
                  document.getElementsByTagName(tag)[a].onmousemove = new Function("showthisMove_"+tag+"_nr_"+a, "showWMTT('"+ID+"','"+document.getElementsByTagName(tag)[a].title+"');");
                  document.getElementsByTagName(tag)[a].onmouseout = new Function("hidethis_"+tag+"_nr_"+a, "hideWMTT('"+ID+"');");
                  
                  document.getElementsByTagName(tag)[a].title='';
              }
        }
   }
   
   function updateWMTT(e) {
           x = (document.all) ? window.event.x + document.body.scrollLeft: e.pageX;
           y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
          // x = (document.all) ? window.event.x: e.pageX;
           //y = (document.all) ? window.event.y: e.pageY;
   
   }
   
   function showWMTT(id,text) {
           document.getElementById(tooltip_id).style.display = "block"
           current_pic_id=id;
           document.getElementById(tooltip_id).style.left = (x + 10) + "px";
           document.getElementById(tooltip_id).style.top = (y + 5) + "px";
           document.getElementById(tooltip_id).innerHTML = text.replace(/\n/g, '<br />');    
   }
   
   function hideWMTT(id) {
           if (id==current_pic_id)
           document.getElementById(tooltip_id).style.display = "none";
   }
   //-->

   
   
   Ja ich hab auch gleich 'nen kommentar auf englisch reingeschrieben.
   Tooltip in aktion:
   http://www.hesse-auktionen.de/index.php?id=aktuelles

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?