JavaScript Vorschaubild bei MouseOver in Vollbild aufpopen

Rayman2200 · 29. September 2008

Hallo Leute,
ich hoffe jemand kann mir von euch helfen.

Habe mit JavaScript absolut nichts am Hut und bräuchte ein kleinen Script was mir ein Vorschaubild beim drüberfahren in Vollbild bzw. in der Bildgröße anzeigt.

Habe schon Scripte gesehen wo es neben der Maus angezeigt wird, aber das bringt mich nicht weiter. Es sollte wenn möglich irgendwie im Browser möglichst weit oben und zentriert angezeigt werden.

Würde mich über jegliche Hilfe freuen

Danke und Gruß
Ray

M-O-H · 29. September 2008

HI Rayman2200

Punkt 1 ohne mehr infos lohnt es sich nicht arg viel vor zu Coden denke du verstehst das habe dir mal als demonstration ein kleines script gebastelt

PHP:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>M-O-H</title>

<script language="javascript">
<!--
function drauf () 
{
document.write('<img src="bilder1.jpg">');
}
//-->
</script>
</head>

<body>
<img width="150px" height="150" onmouseover="drauf ()" src="bilder1.jpg" />
</body>
</html>

kurz erklärt im <body>tag lassen wir unser bild in unserer wunsch größe ausgeben in meinen fall 150 x150 px und geben den <img> tag die event funktion onmouseover fährst du jetzt mit der maus da drauf lassen wir unsere funktion drauf() aufrufen
wo wir mit document.write das bild ohne maß angaben angeben also kommt es in vollbild

und wie du das jetzt ausrichtest is dir überlassen kannst alles in einer div box rein packen
wen du fragen hast frag aber dan mehr infos dan können wir dein script erweitern

lg:M-O-H

Rayman2200 · 30. September 2008

Danke für die schnelle Antwort

Durch das document.write() wird ja die Seite mit dem Image gefüllt. Das heißt der andere Content verschwindet komplett und man sieht das Bild und ausserhalb eine weiße Fläche.

Ich hab mal ein Script gesehen wo das Bild neben dem Mauszeiger sichtbar wurde. Also wenn man rübergefahren ist, ist es Mittig nebem dem Mauszeiger aufgegangen und hat sich mit dem Mauszeiger bewegt bis man aus dem Bild rausgefahren ist. Sowas in der Art wollte ich haben, nur dass das Bild beim Rüberfahren nicht rechts vom Mauszeiger angezeigt werden soll, sondern Mittig auf der Seite mit sozusagen festen Ausrichtungswerten. 0px von oben und von der linken sowie rechten Seite gleichweit weg.

Hab festgestellt, dass diese Lösung ein Problem hat, da das Bild möglicherweise das Ursprungsbild worüber man gefahren ist, verdeckt.

Deshalb habe ich es jetzt so gelöst, das ich einfach in meinem Layout ein Image-Tag gemacht habe, und beim MouseOver dort die src ändere. Das Bild wird dann beim rüberfahren geladen und taucht im Dokument an einer bestimmten Stelle auf.

Code dazu:

Code:

function update(url) {
     document['PhotoBig'].src=url;
}

Und irgendwo im HTML Dokument ein....

HTML:

<img onMouseOver="update('pfadZumBild'); return false;" src="pfadZumBild" width="200" />

<img src="" name="PhotoBig" style="border:1px solid black">

Suche

JavaScript Vorschaubild bei MouseOver in Vollbild aufpopen

Rayman2200

Ensign

M-O-H

Newbie

Rayman2200

Ensign