✔ onmouseover bei Bilderslider

B

braselfing

braselfing
Hallo User,

habe auf der Page meines Bruders einen Bildslider integriert. Im dazu gehörenden Ordner "bilder" liegen 2 verschiedene Bildgrößen. Zur Zeit öffnet bei Mouseklick auf eines der Bilder die entsprechende Artikelseite. Möchte jedoch, dass bei mouse over das große Bild erscheint. Vermute, der "leftrightslide Code" muss ergänzt, bzw. geändert werden? Hier der Code der Slider-Datei. Wer kann helfen?

[EDIT @Quaese]
Der Code wurde wegen der Nutzungsbestimmungen von dynamicdrive.com entfernt - das Skript gibts unter http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm
[/EDIT]
 
Hallo Maik,

danke für die schnelle Info.

Die LyteBox v3.22 ist installiert innerhalb der Seiten. Hier ein Auszug der index.php:

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>
 
<link rel="stylesheet" type="text/css" title="lytebox" href="./assets/lytebox.css" media="screen" />
 
<script type="text/javascript" src="./assets/overlib.js"></script>
<script type="text/javascript" src="./assets/lytebox.js"></script>
 
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)" /><meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)" />

Kann man das irgendwie verwenden? Bin mit meinen "60 Jahren" leider nicht mehr der grosse Programmierer, aber ständig bemüht...
 
Hi,

vielleicht kann auf ein spezielles Script verzichtet werden, wenn das bisherige Script weiter verwendet werden soll.

Dazu wird folgende Dokumentstruktur benötigt:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Ohne_Titel_1</title>
</head>
<body>
<div id="zoomImg" style="position: absolute; z-index: 999; display: none; border: 1px solid #aaa; width: 300px; height: 300px; overflow: auto; background: #fff; left: 50%; top: 50%; margin: -150px 0 0 -150px;"></div>
<script type="text/javascript">
//<![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";
  }
}



// *** [Bisheriges Script] ***

leftrightslide[0]='<a href="fassungen/av001.php" target="_blank"><img onmouseover="myTooltip(this, \'pfad/zum/grossen/bild1.gif\');" onmouseout="myTooltip(0);" src="bild1.gif" border=0><\/a>'
leftrightslide[1]='<a href="fassungen/av002.php" target="_blank"><img onmouseover="myTooltip(this, \'pfad/zum/grossen/bild2.gif\');" onmouseout="myTooltip(0);" src="bild2.gif" border=0><\/a>'
leftrightslide[2]='<a href="fassungen/av003.php" target="_blank"><img onmouseover="myTooltip(this, \'pfad/zum/grossen/bild3.gif\');" onmouseout="myTooltip(0);" src="bild3.gif" border=0><\/a>'
// ...

// *** [Bisheriges Script] ***
//]]>
</script>
</body>
</html>
Es wird ein Element erstellt (ID = zoomImg), das als Tooltipp-Container fungiert. Wird die Maus über ein Bild bewegt, wird der Pfad mit Filename des grossen Bildes der mouseover-Funktion als zweites Argument übergeben. Die Routine hängt das gewünschte Bild in den Container ein und blendet diesen ein.
Wird der Funktion als einziges Argument die Null übergeben, wird der Tooltipp wieder ausgeblendet. Derart wird die Routine im mouseout-Event aufgerufen.

Die neuen Teile habe ich fett hervorgehoben. Ich hoffe, du kannst etwas damit anfangen.

Ansonsten solltest du den von dynamicdrive.com geforderten Kommentar zum Script im Dokument stehen lassen. Die werden sonst unter Umständen sehr ungemütlich.

Ciao
Quaese
 
Hi Quaese,

danke für die Hilfe.

Werde mich morgen an die Änderungen wagen und berichten.

Den Hinweis auf dynamicdrive.com habe ich implementiert.
 
Hi Quaese,

habe deinen Code eingefügt und angepasst. Auf der Festplatte funktioniert alles einwandfrei. Auf der Domain http://www.brillenexperten.de wird bei mouseover jedoch kein Bild angezeigt? Wo habe ich den Fehler gemacht? Hier die angepasste Datei:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Ohne_Titel_1</title>
</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: -150px 0 0 -150px;"></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";
  }
}

 // *** [Bisheriges Script darf gemäß den Nutzungsbestimmungen von dynamicdrive.com hier nicht veröffentlicht werden] ***

//]]>
</script>
</body>
</html>
 
Zuletzt bearbeitet:
Hi,

das liegt daran, dass sich die Slideshow nun in einem iFrame wiederfindet, und die Positionsangaben für den Tooltip, also wo das große Bild präsentiert werden soll, im nicht einsehbaren Bereich seines Fensters liegen.

mfg Maik
 
Hi Maik,

danke für den Tip. Was muss ich am Code ändern, um das grosse Bild mittig auf der Seite anzuzeigen? Vielleicht kannst du helfen?
 
Das ginge dann in Richtung der "Lytebox", die die Bilder aus einem iFrame heraus im Elternfenster präsentiert.

Da dir aber auf dem Server offensichtlich PHP zur Verfügung steht, könntest du die Slideshow anstelle des iFrames mittels [phpf]include[/phpf] in das Hauptdokument einbinden, und am Slideshow-Script bräuchte nichts umgeschrieben werden.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück