onmouseover bei Bilderslider

Hi,

du könntest die Funktion von mir auch im Dokument einbinden, das auch den iFrame beinhaltet. In dieses Dokument wird auch der Tooltipp-Container eingebunden.

Vom iFrame-Dokument aus kann die Funktion im übergeordneten Dokument aufgerufen werden.

Dokument, das iFrame beinhaltet:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<!-- Bisheriger Code  -->
<script type="text/javascript" defer="defer"><!--
function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=450,height=550,screenX=150,screenY=150,top=150,left=150')
}


function myTooltip(objImg, strFilePathBigImg){
  // Falls der Tooltipp wieder ausgeblendet werden soll
  if(objImg == 0){
    document.getElementById("zoomImg").style.display = "none";
  // Falls der Tooltipp eingeblendet werden soll
  }else{
    // Neues Bildobjekt mit zugehörigem Pfad und Bild
    var objNew = new Image();
    objNew.src = strFilePathBigImg;
    // Referenz auf Tooltipp-Element
    var objApp = document.getElementById("zoomImg");
    // Bisherige Inhalte löschen
    objApp.innerHTML = "";
    // Neuen Inhalt einfügen und Tooltipp sichtbar machen
    objApp.appendChild(objNew);
    objApp.style.display = "block";
  }
}
//-->
</script>
</head>

<body>
<div id="zoomImg" style="position: absolute; z-index: 999; display: none; border: 1px solid #aaa; width: 500px; height: 280px; overflow: auto; background: #fff; left: 50%; top: 50%; margin: 0px 0 0 -250px;"></div>
<!-- Restliches Dokument -->
</body>
</html>

Der Aufruf im iFramedoment erfolgt über das Objekt top:
Code:
leftrightslide[0]='<a href="http://www.brillenexperten.de/fassungen/av001.php" target="_blank"><img onmouseover="top.myTooltip(this, \'http://www.brillenexperten.de/bilder/AV001_1.jpg\');" onmouseout="top.myTooltip(0);" src="http://www.brillenexperten.de/bilder/AV001_1_nor.jpg" border=0><\/a>'

Problematisch wird es nur werden, wenn der Tooltipp über dem Slider eingeblendet wird. Denn in diesem Fall tritt das mouseout-Ereignis ein, dann sofort wieder das mouseover usw. Das hat zur Folge, dass der Tooltipp nicht gesehen wird.

Als Lösung könntest du auf den mouseover-Event verzichten und stattdessen ein Element zum Schliessen des Tooltipps in den Container einbringen.

Ciao
Quaese
 
Hallo Quaese,

vielen Dank für deine Bemühungen. Da der Shop mit STD5 generiert wird vermute ich Probleme bei der Erstellung. In STD5 (ShopToDate) wird zum einfügen einer html Datei ein "Absatz" eingebunden. Hier kann man nun ein externes Element per iFrame oder direkt html einfügen.

Der Vorschlag von Maik hingegen läßt sich vielleicht einfacher umsetzen, da ich offensichtlich den fertigen Code, der auf meiner HD funktioniert, nicht ändern muss. Fehlen mir nur noch der entsprechende include Befehl mit dem Hinweis auf die slider.html und die Einbindung. Vielleicht hast du für diese Lösung einen Rat?

Habe zwischenzeitlich vorübergehend den alten Code eingesetzt, deine Variante jedoch auf HD gespeichert.
 
Hallo Maik, hallo Quaese,

habe nun einfach einmal einen html Absatz erstellt und die slider.html ohne Doctype eingefügt. Die Positionswerte habe ich auf 31% left u. 35% top geändert. Jetzt funktioniert der Script, so lange er unter dem Slider die grossen Bilder öffnen kann. Bei höherer Positionierung gibts Fehler in der Darstellung. Ich denke, hierfür müßte der Code geringfügig abgeändert werden? Vielleicht von myTooltip in topTooltip?

Trotzdem erst eimal herzlichen Dank für eure kompetente Hilfe.

Der Weg ist das Ziel...
 
Hallo Maik,

Kannst du mir den include Befehl geben und wo/wie muss ich ihn einfügen?
  • slider.php:
PHP:
<?php
echo "<div id=\"zoomImg\" style=\"position: absolute; z-index: 999; display: none; border: 1px solid #aaa; width: 500px; height: 280px; overflow: auto; background: #fff; left: 50%; top: 50%; margin: -140px 0 0 -250px;\"></div>
<script type=\"text/javascript\">
/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//<![CDATA[

function myTooltip(objImg, strFilePathBigImg){
  // Falls der Tooltipp wieder ausgeblendet werden soll
  if(objImg == 0){
    document.getElementById(\"zoomImg\").style.display = \"none\";
  // Falls der Tooltipp eingeblendet werden soll
  }else{
    // Neues Bildobjekt mit zugehörigem Pfad und Bild
    var objNew = new Image();
    objNew.src = strFilePathBigImg;
    // Referenz auf Tooltipp-Element
    var objApp = document.getElementById(\"zoomImg\");
    // Bisherige Inhalte löschen
    objApp.innerHTML = \"\";
    // Neuen Inhalt einfügen und Tooltipp sichtbar machen
    objApp.appendChild(objNew);
    objApp.style.display = \"block\";
  }
}

// *** Bestehendes Slideshow-Script ***

//]]>
</script>";
?>
  • slider.php im Hauptdokument einbinden:
HTML:
<!-- Externes Element Start -->

<?php
include 'slider.php';
?>

<!-- Externes Element Ende -->

Da der Script-Code gemäß den Nutzungsbestimmungen von dynamicdrive.com hier nicht veröffentlich werden darf, und ich mich daher auf die ersten Codezeilen beschränkt habe, beachte, alle darin enthaltenden doppelten Anführungszeichen mit einem umgekehrten Schrägstrich zu maskieren, da ansonsten ein PHP-Fehler ausgeworfen wird.

Also zum Beispiel:
Code:
// aus 
var sliderwidth="530px"

// wird
var sliderwidth=\"530px\"


mfg Maik
 
Hi,

dass es zu Problemen kommen kann, wenn das Element zu weit oben im Dokument platziert ist, hatte ich vorhin schon beschrieben.

Einen Lösungsansatz hatte ich ja ebenfalls schon genannt - den Tooltipp-Container nicht über das mouseout-Event schliessen, sondern über ein entsprechend eingefügtes Element. Dabei müsstest du jedoch beachten, dass sich der "Schliessen-Button" nicht über dem Slider befindet. Denn sonst hättest du das Problem zwar gelöst, aber ein anderes geschaffen.

Ein Lösungsansatz könnte wie folgt aussehen:

HTML-Teil (erweiterter Tooltipp-Container):
Code:
<div id="zoomImg" style="position: absolute; z-index: 999; display: none; border: 1px solid #aaa; width: 500px; height: 280px; overflow: auto; background: #fff; left: 50%; top: 50%; margin: 0px 0 0 -250px;">
	<a href="#" onclick="document.getElementById('zoomImg').style.display='none';  return false;">close</a>
</div>

JavaScript:
Code:
function myTooltip(objImg, strFilePathBigImg){
  // Neues Bildobjekt mit zugehörigem Pfad und Bild
  var objNew = new Image();
  objNew.src = strFilePathBigImg;
  // Referenz auf Tooltipp-Element
  var objApp = document.getElementById("zoomImg");
  // Neuen Inhalt einfügen
  if(objApp.getElementsByTagName('img').length>0)
    objApp.replaceChild(objNew, objApp.getElementsByTagName('img')[0]);
  else
    objApp.appendChild(objNew);

  // Tooltipp so platzieren, dass sich Button nicht über Slider befindet
  objApp.style.top = (getOffset(document.getElementById('frmSlide')) - 20) + "px";
  objApp.style.display = "block";
}

function getOffset(objElem){
  var intOff = objElem.offsetTop;
  var objP = objElem.offsetParent;
  while(objP){
  	intOff += objP.offsetTop;
    objP = objP.offsetParent;
  }
  return intOff;
}

Im Sliderscript muss die mouseout-Events entfernt werden.
Code:
leftrightslide[0]='<a href="http://www.brillenexperten.de/fassungen/av001.php" target="_blank"><img onmouseover="myTooltip(this, \'http://www.brillenexperten.de/bilder/AV001_1.jpg\');" src="http://www.brillenexperten.de/bilder/AV001_1_nor.jpg" border=0><\/a>'

Ob das die bessere Variante ist, sei dahin gestellt. Kannst es ja ausprobieren und selbst entscheiden, was dir besser gefällt.

Desweitern kannst du das Sliderscript in eine externe JS-Datei auslagern und diese an der Stelle einbinden, wo der Slider erscheinen soll. Damit hättest du den Code übersichtlicher gestaltet.
Code:
<script src="pfad/zum/file.js" type="text/javascript"></script>
Zu beachten ist, dass im JS-File die Script-Tags entfallen.

Ciao
Quaese
 
Hi Quaese,

habe deinen code HTML-Teil, Java_Script u. Slider-Script abgeändert und auf HD probiert ohne Auslagerung der Scriptdatei. Es erscheint jedoch nicht das große Bild?

Bedeutet Script-Tag entfernen Aufruf ohne <script.. z.B. so src="pfad/zum/file.js" type="text/javascript"> ?
 
Hi,

meine Schuld! Ich hatte als Offset-Element noch den iFrame verwendet. Stattdessen muss nun ein Container des Sliders verwendet werden.

Um das Ganze zu demonstrieren, habe ich es dir temporär auf meinen "Spielplatz" hochgeladen - Demo.

Ciao
Quaese
 
Hi Quaese,

habs mir angeschaut. Das große Bild sollte jedoch weiter unten öffnen, da man im Slider per Klick auf die Artikelseite kommen kann oder auch soll, um sofort kräftig u. reichlich einzukaufen:D

Meine Wünsche sind mir langsam peinlich...;)

Könntest du mir die entsprechende Code-Datei per PN zukommen lassen, da ja der gesammte Code nicht dargestellt werden darf?
 
*lol*

Und ich hab mich wegen dem iFrame um sieben Ecken schicken lassen :-)

Den gesamten Code brauchen wir dir hierfür nicht posten. Ändere in dieser Zeile den ersten oberen margin-Wert von "0" auf "230px":

Code:
<div id="zoomImg" style="position: absolute; z-index: 999; display: none; border: 1px solid #aaa; width: 500px; height: 280px; overflow: auto; background: #fff; left: 50%; top: 50%; margin: 230px 0 0 -250px;">


mfg Maik
 
Hi,

was hälst du davon, die grossen Bilder derart zu modifizieren, dass sie beim Anklicken auf die Produktseite weiterleiten?

Selber Link wie oben ... schau es dir mal an.

Ciao
Quaese
 
Zurück