Leider verhindert die Seite das Lesen des Quelltextes (jedenfalls kommt man da nicht ohne Umstände ran).
Geh doch einfach mal auf: http://dixielady.com/menu.html
Dort kannst du dir den Quelltext einfach anschauen.
Es gibt 2 verschiedene Möglichkeiten, so etwas zu Programmieren:
Du erstellst 2 Bilder, das erste ist das Bild in normalen Zustand (onMouseOut), das zweite mit den Schmetterlingen (oder mit was auch immer).
Dann brauchst du folgenden Quelltext:
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script language="javascript" type="text/javascript">
<!--
if (document.images) {
var bild1=new Image();
bild1.src="<<DAS ERSTE BILD>>";
var bild2=new Image();
bild2.src="<<Das MOUSEOVER-BILD>>";
}
else {
alert("Leider unterstützt ihr Browser kein Javascript");
}
//-->
</script>
|
Und dann musst du beim Button schreiben:
|
Quellcode
|
1
|
<a href="<<Seite>>" onMouseOver="document.bild.src=bild2.src" onMouseOut="document.bild.src=bild1.src"><img src="<<ERSTES BILD>>" name="bild" id="bild"></a>
|
Oder die andere Möglichkeit:
Du hast einmal das normale Bild, und einmal das Bild, was hinzukommen soll bei MouseOver (hier: BILD2)
Du erstellt ein genau positionierten DIV Layer:
|
Quellcode
|
1
2
3
4
5
|
<style type="text/css">
<!--
div.bild2 {position: absolute; top: <<VON OBEN>>; left: <<VON LINKS>>; visibility: hidden; }
//-->
</style>
|
Dann brauchst du noch ein bisschen javascript
:
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script language="javascript" type="text/javascript">
<!--
function seh(bild) {
if (document.all) {
document.all[bild].style.visibility="visible";
}
if (document.layers) {
document.layers[bild].visibility="visible";
}
}
function nseh(bild) {
if (document.all) {
document.all[bild].style.visibility="hidden";
}
if (document.layers) {
document.layers[bild].visibility="hidden";
}
}
//-->
</script>
|
Und zum Schluss noch den Link:
|
Quellcode
|
1
|
<a href="<<DER LINK>> onMouseOver="javascript:seh('bild2')" onMouseOut="javascript:nseh('bild2')">Text</a>
|
So, jetzt musst du nur noch den Layer definieren:
|
Quellcode
|
1
|
<div id="bild2" name="bild2"><img src="<<BILD>>"></div>
|
Ok, falls du noch fragen haben solltest, schreib einach unter den Beitrag.
Mfg Serubabbel