• Forum
• Ilch Clan 1.1
• Fehlersuche und Probleme
• Tooltip in Gallery nicht bei der Maus

ilch Forum » Ilch Clan 1.1 » Fehlersuche und Probleme » Tooltip in Gallery nicht bei der Maus

1. Mo. 02.04.2007 23:20 Uhr #1

   

   cmdrsamu Mitglied

   Registriert seit

   30.03.2007

   Beiträge

   19

   Beitragswertungen

   

   Aus unerklärlichen Gründen befindet sich der Tooltip für jedes Bild nicht an seiner richtigen Position, nämlich bei dem Mauszeiger, sondern ziemlich weit davon entfernt. Lässt sich dafür ein Fehler finden?
   Auch mit Hilfe der Suchfunktion konnte ich nichts finden.
   
   betroffene Homepage: externer Link
   
   Version: 1.1 D
   
   
   Zuletzt modifiziert von cmdrsamu am 02.04.2007 - 23:22:20
   0 Mitglieder finden den Beitrag gut.

   • zitieren
2. Mo. 02.04.2007 23:29 Uhr #2

   

   assault Hall Of Fame

   Registriert seit

   03.11.2006

   Beiträge

   2.925

   Beitragswertungen

   

   ne, ich glaub, das soll so, weil sonst kann man das bild ja nicht mehr erkennen, aber das ist schon üüübelst weit weg *g*
   
   zeig mal den code von include/templates/gallery.htm
   0 Mitglieder finden den Beitrag gut.

   • zitieren
3. Mo. 02.04.2007 23:33 Uhr #3

   

   cmdrsamu Mitglied

   Registriert seit

   30.03.2007

   Beiträge

   19

   Beitragswertungen

   

   Code anzeigen?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

   {EXPLODE} <table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">   <tr class="Chead">         <td width="80%" align="center"><b>{_lang_category}</b></td>     <td width="20%" align="center">{_lang_pictures}</td>     </tr>     {EXPLODE}     <tr class="{class}">       <td><a href="index.php?gallery-{id}">{name}</a><br /><span class="smalfont">&raquo;&nbsp;{besch}</span></td>         <td align="center">{gallery}</td>     </tr>     {EXPLODE} </table> <br /><br /> {EXPLODE} <table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">   <tr class="Chead">         <td colspan="{imgperline}" align="center"><b>{cname}</b></td>     </tr>   {EXPLODE}      <td class="{class}" width="{width}%" valign="top" align="center">    <div onmouseover="hiddpos('infodiv{id}')" class="layer" id="infodiv{id}" style="position:absolute; top:50px; left:50px; display:none; width:200px; height:200px;"> <table width="100%" class="border" border="0" cellspacing="1" cellpadding="4">   <tr>     <td class="{class}" align="left">       <strong>{_lang_filename}:</strong> {datei_name} <br /><strong>{_lang_seen}:</strong> {klicks} <br /><strong>{_lang_voting}:</strong> {vote_wertung} <br /><strong>{_lang_comments}:</strong> {anz_koms} <br /><strong>{_lang_desc}:</strong> {besch}     </td>   </tr> </table> </div>        <table class="border" border="0" cellspacing="1" cellpadding="0">          <tr>          <!--onClick="return oeffneFenster({bildr},{cat});"-->            <td onmouseout="hiddpos('infodiv{id}')" onmouseover="alertpos('infodiv{id}')"><a href="index.php?gallery-show-{cat}-p{bildr}"  target="_self"><img src="include/images/gallery/img_thumb_{id}.{endung}" border="0" alt="{datei_name}" title="&nbsp;" /></a></td>                    </tr>        </table>      </td>    {EXPLODE}   </tr> </table> <center>{MPL}</center> <script language="JavaScript" type="text/javascript"> <!--   function oeffneFenster (bildr, cat) {     var fenster = window.open ('index.php?gallery-show-'+cat+'-p'+bildr,'showBild','scrollbars=yes,height=600,width={breite},left=200,status=yes');     fenster.focus();     return (false);   }       // manage div ...   document.onmousemove = checkPosition;   function checkPosition(e) {     if(document.all) {       mausX = event.clientX + document.body.scrollLeft;       mausY = event.clientY + document.body.scrollTop;     } else {       mausX = e.pageX;       mausY = e.pageY;     }         }       function alertpos(dname) {   if (document.layers) {     document.layers[0].left = mausX;     document.layers[0].top = mausY;   } else if (document.getElementById) {     document.getElementById(dname).style.left = mausX + "px";     document.getElementById(dname).style.top = mausY + "px";   }   document.getElementById(dname).style.display = "inline";   }   function hiddpos(dname) {     document.getElementById(dname).style.display = "none";   } //--> </script>

   
   
   Glaube nich das das so sein soll, da ich jetzt auf zich anderen Seiten geschaut hab und da der Tooltip an richtiger Position ist.
   
   EDIT: Desweiteren wollte ich den Tooltip-Effekt gleich weiter verwenden um in der Mitgliederliste die Avatare als Tooltip anzeigen zu lassen und da wirkt sich der Abstand doch noch gravierender aus.
   
   
   Zuletzt modifiziert von cmdrsamu am 02.04.2007 - 23:36:03
   0 Mitglieder finden den Beitrag gut.

   • zitieren
4. Di. 03.04.2007 08:17 Uhr #4

   

   Mairu Coder

   Registriert seit

   16.06.2006

   Beiträge

   15.334

   Beitragswertungen

   

   Ja man sollte die Positionierung mal umschreiben, aber ich habe kaum Ahnung von Javascript, ich kann dir aber sagen, dass es daran liegt

   Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
   0 Mitglieder finden den Beitrag gut.

   • zitieren
5. Di. 03.04.2007 12:02 Uhr #5

   

   assault Hall Of Fame

   Registriert seit

   03.11.2006

   Beiträge

   2.925

   Beitragswertungen

   

   ersetzte den code von include/templates/gallery.htm mit dem hier:
   

   Code anzeigen?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

   {EXPLODE} <table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">   <tr class="Chead">         <td width="80%" align="center"><b>{_lang_category}</b></td>     <td width="20%" align="center">{_lang_pictures}</td>     </tr>     {EXPLODE}     <tr class="{class}">       <td><a href="index.php?gallery-{id}">{name}</a><br /><span class="smalfont">&raquo;&nbsp;{besch}</span></td>         <td align="center">{gallery}</td>     </tr>     {EXPLODE} </table> <br /><br /> {EXPLODE} <table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">   <tr class="Chead">         <td colspan="{imgperline}" align="center"><b>{cname}</b></td>     </tr>   {EXPLODE}      <td class="{class}" width="{width}%" valign="top" align="center">   <div onmouseover="hiddpos('infodiv{id}')" class="layer" id="infodiv{id}" style="position:absolute; top:50px; left:50px; display:none; width:200px; height:200px;"> <table width="100%" class="border" border="0" cellspacing="1" cellpadding="4">   <tr>     <td class="{class}" align="left">       <strong>{_lang_filename}:</strong> {datei_name} <br /><strong>{_lang_seen}:</strong> {klicks} <br /><strong>{_lang_voting}:</strong> {vote_wertung} <br /><strong>{_lang_comments}:</strong> {anz_koms} <br /><strong>{_lang_desc}:</strong> {besch}     </td>   </tr> </table> </div>        <table class="border" border="0" cellspacing="1" cellpadding="0">          <tr>            <td onmouseout="hiddpos('infodiv{id}')" onmouseover="alertpos('infodiv{id}')"><a href="index.php?gallery-show-{cat}-p{bildr}" onClick="return oeffneFenster({bildr},{cat});" target="_blank"><img src="include/images/gallery/img_thumb_{id}.{endung}" border="0" alt="{datei_name}" title="&nbsp;" /></a></td>          </tr>        </table>      </td>    {EXPLODE}   </tr> </table> <center>{MPL}</center> <script language="JavaScript" type="text/javascript"> <!--   function oeffneFenster (bildr, cat) {     var fenster = window.open ('index.php?gallery-show-'+cat+'-p'+bildr,'showBild','scrollbars=yes,height=600,width={breite},left=200,status=yes');     fenster.focus();     return (false);   }     // manage div ...   document.onmousemove = checkPosition;   function checkPosition(e) {     if(document.all) {       mausX = event.clientX + document.body.scrollLeft;       mausY = event.clientY + document.body.scrollTop;     } else {       mausX = e.pageX;       mausY = e.pageY;     }     }     function alertpos(dname) {   if (document.layers) {     document.layers[0].left = mausX;     document.layers[0].top = mausY;   } else if (document.getElementById) {     document.getElementById(dname).style.left = mausX + "px";     document.getElementById(dname).style.top = mausY + "px";   }   document.getElementById(dname).style.display = "inline";   }   function hiddpos(dname) {     document.getElementById(dname).style.display = "none";   } //--> </script>

   0 Mitglieder finden den Beitrag gut.

   • zitieren
6. Di. 03.04.2007 17:05 Uhr #6

   

   cmdrsamu Mitglied

   Registriert seit

   30.03.2007

   Beiträge

   19

   Beitragswertungen

   

   Lösungsvorschlag erbrachte leider keine Änderung.
   0 Mitglieder finden den Beitrag gut.

   • zitieren
7. Mi. 04.04.2007 15:34 Uhr #7

   

   Mairu Coder

   Registriert seit

   16.06.2006

   Beiträge

   15.334

   Beitragswertungen

   

   So ich hab mich heute nochmal damit beschäftigt, im inet gesucht und bin fast daran verzweifelt, letztendlich scheint es zu gehen, aber wenn hier einer Ahnung von Javascript hat, könnte er das ja vielleicht mal "ordentlich" lösen.
   
   Hier folgt nur der Javscriptteil, der am Ende der Datei ist
   Versuche erstmal
   

   Code anzeigen?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

   <script language="JavaScript" type="text/javascript"> <!--   function oeffneFenster (bildr, cat) {     var fenster = window.open ('index.php?gallery-show-'+cat+'-p'+bildr,'showBild','scrollbars=yes,height=600,width={breite},left=200,status=yes');     fenster.focus();     return (false);   }       // manage div ...   document.onmousemove = checkPosition;   function checkPosition(e) {     if(document.all) {       mausX = event.clientX + document.body.scrollLeft;       mausY = event.clientY + document.body.scrollTop;     } else {       mausX = e.pageX;       mausY = e.pageY;     }         }       function alertpos(dname) {   if (document.layers) {     document.layers[0].left = mausX - document.getElementsByTagName('div')[0].offsetLeft;     document.layers[0].top = mausY - document.getElementsByTagName('div')[0].offsetLeft;   } else if (document.getElementById) {     document.getElementById(dname).style.left = mausX - document.getElementsByTagName('div')[0].offsetLeft + "px";     document.getElementById(dname).style.top = mausY - document.getElementsByTagName('div')[0].offsetLeft + "px";   }   document.getElementById(dname).style.display = "inline";   }   function hiddpos(dname) {     document.getElementById(dname).style.display = "none";   } //--> </script>

   
   und falls das nicht geht
   

   Code anzeigen?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

   <script language="JavaScript" type="text/javascript"> <!--   function oeffneFenster (bildr, cat) {     var fenster = window.open ('index.php?gallery-show-'+cat+'-p'+bildr,'showBild','scrollbars=yes,height=600,width={breite},left=200,status=yes');     fenster.focus();     return (false);   }       if(window.document.captureEvents) window.document.captureEvents(Event.MOUSEMOVE);   window.document.onmousemove = calcMousePos;   var pos;       function calcMousePos(e)   {     pos = mouse_pos(e);   }       function alertpos(dname) {       if (document.getElementById(dname)) {     document.getElementById(dname).style.left = pos.left - document.getElementsByTagName('div')[0].offsetLeft + "px";     document.getElementById(dname).style.top = pos.scrollTop + "px";   } else if (document.layers) {     document.layers[0].left = pos.left - document.getElementsByTagName('div')[0].offsetLeft;     document.layers[0].top = pos.scrollTop;   }   document.getElementById(dname).style.display = "inline";   }       function hiddpos(dname) {     document.getElementById(dname).style.display = "none";   }       //mouse_pos from http://javascript.jstruebig.de/javascript/54/   function mouse_pos(evt)   {     if(!evt) evt = window.event;     var pos = new Object();     pos.left = evt.clientX;     pos.top = evt.clientY;     var b = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?    window.document.documentElement : window.document.body || null;     if (b)     {         pos.scrollLeft= pos.left + b.scrollLeft;         pos.scrollTop = pos.top + b.scrollTop;     }     else if(document.layers)     {         // Netscape 4.         pos.scrollLeft = evt.pageX;         pos.scrollTop = evt.pageY;         pos.left = evt.pageX - window.pageXOffset;         pos.top = evt.pageY - window.pageYOffset;     }     return pos;   }     //--> </script>

   
   
   
   Zuletzt modifiziert von Mairu am 04.04.2007 - 16:00:22

   Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
   0 Mitglieder finden den Beitrag gut.

   • zitieren
8. Do. 05.04.2007 17:58 Uhr #8

   

   cmdrsamu Mitglied

   Registriert seit

   30.03.2007

   Beiträge

   19

   Beitragswertungen

   

   OK, vielen tausend Dank. Das letztere der beidne Vorschläge funktioniert besser. Beim ersten wird der Tootltip oberhalb der Maus angezeitgt aber teils fehlerhaft. Der untere Vorschlag is perfekt. Danke für die Mühe!
   0 Mitglieder finden den Beitrag gut.

   • zitieren