S: Mouseover Image mit Ladefunktion

[mlunow]

Hallo Leute!

Bin momentan verzweifelt auf der Suche nach einem "Script" das nach Mouseover ein Thumbnail eines Images anzeigt. Hab so etwas bereits erfolgreich auf www.koch-idee.at (z.B. hier: http://www.koch-idee.at/rezepte-C.html) in Verwendung.

Da ich gerade dabei bin das Design umzustellen und die Webseite bzgl. Ladezeit zu optimieren suche ich jetzt ein ähnliches Script, das jedoch die Bilder __nicht__ preloadet, denn bei der aktuellen Realisierung handelt es sich einfach um einen DIV der versteckt ist - also beim Seitenaufbau mitgeladen wird.

Wenn ich auf einer Seite 100e solcher Thumbs habe und jedes ~10kb hat wird das viel zu viel!

Hätte da an etwas ähnliches gedacht wie das momentan verwendete, nur eben dass das Bild selbst erst beim Mouseover geladen werden sollte.

Kennt jemand so etwas,
bzw. habt ihr ein paar Tipps wie ich man
so etwas an besten realisiert?

tia, mlu

 

[DZVO]

suchst du vielleicht sowas, wie ich es auf der objektübersicht habe.

MFG
Maik

Achja falls es das sein sollte bedien dich

 

[mlunow]

hallo dzvo!

danke für deine antwort, aber ich will eigentlich genau das was ich bereits verwende:
(Siehe z.B.: http://www.koch-idee.at/rezepte-G.html - Maus über das Kamera-Symbol)
oder etwas vergleichbares, nur eben ohne dass das Bild bereits bereits beim laden der Seite mitgeladen wird, sondern erst beim mouse over selbst.

 

[DZVO]

so ähnlich würde ich das machen
CODE
<font color="#666666">Hauptspeise</font></small>
</td>
<td>
<a title="Dieses Rezept als PDF anzeigen" href="http://www.koch-idee.at/618-Rezepte-pdf/Gebackener-Camembert.pdf" target="_blank">
<img alt="Dieses Rezept als PDF anzeigen" src="images/symbol_pdf.gif" border="0" height="16" width="16">
</a>
<a title="Dieses Rezept zu meinem Kochbuch hinzufügen" href="kochbuch.html?add=618">
<img alt="Dieses Rezept zu meinem Kochbuch hinzufügen" src="./images/symbol_kochbuch.gif" border="0">
</a>
<a title="Gebackener Camembert" href="javascript:void(window.open('http://www.koch-idee.at/618-Rezepte/Gebackener-Camembert.html','Rezeptanzeige','height=750,width=840,status=no,toolbar=no,menubar=no,resizable=yes,scrollbars=yes').focus());">
Gebackener Camembert
</a>
</td>
<td>
<div valign="middle" align="center">
<a class="thumbnail" href="javascript:void(window.open('http://www.koch-idee.at/618_0-Rezeptfotos/Foto-Gebackener-Camembert.html','Foto','height=530,width=540,status=no,toolbar=no,menubar=no,resizable=yes,scrollbars=no').focus());">
<img src="images/symbol_kamera.gif" alt="Fotos anzeigen" border="0" height="12" width="15" onmouseover="loadImage('/images/gerichte/618_0_thumb.jpg', 'img_xxx');"onmouseout="loadImage(false, 'img_xxx');">
<span>
<div align="center">
<div id="img_xxx"></div>
<br><strong>Gebackener Camembert</strong>
<br><small>Klicken um weitere<br>Fotos anzuzeigen!</small>
</div>
</span>
</a>
</div>
</td>
<td>
<div align="center">
<img alt="Bewertung" src="./images/stern.gif">
<img alt="Bewertung" src="./images/stern.gif">
<img alt="Bewertung" src="./images/stern.gif">
</div>
</td>


function loadImage(pic, divId)
{
if(pic == false){
document.getElementById(divId).innerHTML == "";
}else{
document.getElementById(divId).innerHTML == "<img src=\"" + pic + "\" alt=\"\" />";
}
}

 

[DZVO]

die function muss natürlich in den header oder in eine JS-Datei ausgelagert werden.