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

Geschlossen
  1. Mo. 02.04.2007 23:20 Uhr #1
    User Pic
    cmdrsamu Mitglied
    Registriert seit
    30.03.2007
    Beiträge
    19
    Beitragswertungen
    0 Beitragspunkte
    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.
  2. Mo. 02.04.2007 23:29 Uhr #2
    User Pic
    assault Hall Of Fame
    Registriert seit
    03.11.2006
    Beiträge
    2.925
    Beitragswertungen
    1 Beitragspunkte
    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.
  3. Mo. 02.04.2007 23:33 Uhr #3
    User Pic
    cmdrsamu Mitglied
    Registriert seit
    30.03.2007
    Beiträge
    19
    Beitragswertungen
    0 Beitragspunkte
    {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.
  4. Di. 03.04.2007 08:17 Uhr #4
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    387 Beitragspunkte
    Ja man sollte die Positionierung mal umschreiben, aber ich habe kaum Ahnung von Javascript, ich kann dir aber sagen, dass es daran liegt zwinker
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  5. Di. 03.04.2007 12:02 Uhr #5
    User Pic
    assault Hall Of Fame
    Registriert seit
    03.11.2006
    Beiträge
    2.925
    Beitragswertungen
    1 Beitragspunkte
    ersetzte den code von include/templates/gallery.htm mit dem hier: 
    {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.
  6. Di. 03.04.2007 17:05 Uhr #6
    User Pic
    cmdrsamu Mitglied
    Registriert seit
    30.03.2007
    Beiträge
    19
    Beitragswertungen
    0 Beitragspunkte
    Lösungsvorschlag erbrachte leider keine Änderung.
    0 Mitglieder finden den Beitrag gut.
  7. Mi. 04.04.2007 15:34 Uhr #7
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    387 Beitragspunkte
    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 
    <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 
    <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.
  8. Do. 05.04.2007 17:58 Uhr #8
    User Pic
    cmdrsamu Mitglied
    Registriert seit
    30.03.2007
    Beiträge
    19
    Beitragswertungen
    0 Beitragspunkte
    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! Yes
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Fehlersuche und Probleme

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten