nicht angemeldet
Hallo Bernd,
Diese datei lädt viele bilder vor , so wie es bei selfhtml im rollover-Anwendungsbeispiel beschrieben ist.
Versuch mal, den Bereich des Skripts, in dem die Image-Objekte initialisiert werden, in eine Funktion zu packen, die du mit <body onload="funktion()"> aufrufst. Dann wird zuerst die Seite vollständig geladen, dann die Bildchen, was ich im übrigen sowieso sinvoller finde. Dann musst du allerdings bedenken, dass beim Rollover die Image-Objekte möglicherweise noch nicht existieren, wenn die Lade-Funktion noch nicht aufgerufen wurde, da die Seite noch nicht zuende geladen wurde. Du darfst hier also nicht die Image-Objekte verwenden, sondern musst direkt die neue Adresse der Bilder angeben.
Ich schreibe mal das Beispielskript in SELFHTML so um, wie ich das oben gemeint habe, dann wirst du es gleich verstehen:
<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
<!--
function bilderLaden()
{
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
Highlight2 = new Image();
Highlight2.src = "button2h.gif"; /* zweite Highlight-Grafik */
Highlight3 = new Image();
Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */
/* Normal-Bilder müssen nicht vorgeladen werden, da diese ja sowieso im HTML-Quelltext adressiert werden. */
}
function Bildwechsel(Bildnr,Bildadresse) {
window.document.images[Bildnr].src = Bildadresse;
}
//-->
</script>
<style type="text/css">
<!--
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p { color:#000000; font-family:Arial,sans-serif; }
-->
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif" text="#000000" onload="bilderLaden()">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">
<a href="../../../index.htm"
onMouseOver="Bildwechsel(0,'button1h.gif')"
onMouseOut="Bildwechsel(0,'button1.gif')"><img src="button1.gif"
width="130" height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
onMouseOver="Bildwechsel(1,'button2h.gif')"
onMouseOut="Bildwechsel(1,'button2.gif')"><img src="button2.gif"
width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
onMouseOver="Bildwechsel(2,'button3h.gif')"
onMouseOut="Bildwechsel(2,'button3.gif')"><img src="button3.gif"
width="130" height="30" border="0" alt="Layouts"></a><br>
</td><td> </td>
<td valign="top">
<h1>Dynamische grafische Buttons</h1>
<p><b>Fahren Sie mit der Maus über die Buttons. Sie dürfen auch draufdrücken ;-)</b></p>
</td>
</tr>
</table>
</body>
</html>
Du kannst natürlich auch die Adressen der Bilder außerhalb der Funktion bilderLaden() in einem Array ablegen:
bildadressen = new Array("button1.gif","button1h.gif","button2.gif","button2h.gif","button3.gif","button3h.gif");
Und dann in der Funktion bilderLaden() schreiben:
bilder = new Array(bildadressen.length);
for (i=0; i<bildadressen.length; i++) {
bilder[i] = new Image();
bilder[i].src = bildadressen[i];
}
Dann kannst du die Funktion Bildwechsel() so umschreiben:
function Bildwechsel(Bildnr,SrcNr) {
window.document.images[Bildnr].src = bildadressen[SrcNr];
}
Und müsstest sie dann so aufrufen:
<a href="../../../index.htm"
onMouseOver="Bildwechsel(0,1)"
onMouseOut="Bildwechsel(0,0)"><img src="button1.gif"
width="130" height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
onMouseOver="Bildwechsel(1,3)"
onMouseOut="Bildwechsel(1,2)"><img src="button2.gif"
width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
onMouseOver="Bildwechsel(2,5)"
onMouseOut="Bildwechsel(2,4)"><img src="button3.gif"
width="130" height="30" border="0" alt="Layouts"></a><br>
Bringt aber - außer dass Änderungen der Dateienamen der Bilder dadurch leichter zu handhaben sind - nicht viel.
Viel Erfolg,
Robert
What I "discovered" was that happiness is not something that happens. [...] Happiness, in fact, is a condition that must be prepared for, cultivated, and defended privately by each person.
-- Mihaly Csikszentmihalyi