Animierter LINK

b4ck

b4ck

0
Hallo leutz,
ich will für meine Homepage einen Animierten Link machen, d.h. wenn die Maus auf den Link fährt soll sich das bild verändern wenn sie wieder runter fährt zurück zum alten und wenn sie drauf klick noch ein anderes Bild.
Das ganze in Javascript.
Ich dachte das es mit:
onmouseover, onmouseout, onclick, ja nicht so schwer sein.
Das problem is das ich nur ein rotes X bekomme wenn ich übers bild fahre -.-.

Das is der Quelltext:
Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

 var bild1=new Image ();
 bild1.src="C:\Dokumente und Einstellungen\vbs\Eigene Dateien\Eigene Bilder\bilder\fivers.jpg";

 var bild2=new Image ();
 bild2.src="C:\Dokumente und Einstellungen\vbs\Eigene Dateien\Eigene Bilder\bilder\13.jpg";

 var bild3=new Image ();
 bild3.src="C:\Dokumente und Einstellungen\vbs\Eigene Dateien\Eigene Bilder\bilder\richi.jpg";

   /*für onmouseover*/
   function wechsel1(){
    window.document.images[0].src=bild2.src;
    }
   /*für onmouseeout*/
   function wechsel2(){
    window.document.images[0].src=bild1.src;
    }
   /*für onclick*/
   function wechsel3(){
    window.document.iamges[0].src=bild3.src;
    }
</script></head>
<body>
<a href="http://www.hirnfrost.tk" onmouseover="wechsel1()"
onmouseout="wechsel2()" onclick="wechsel3()"><img src="C:\Dokumente und Einstellungen\vbs\Eigene Dateien\Eigene Bilder\bilder\13.jpg"></a>
</body></html>

wenn wer den fehler findet und mir das sagt wär das sehr nett,
mfg da B4ck
 
Leerzeichen und Backslashes haben in Pfaden nix zu suchen ;)

Versuch's mal lieber mit relativen Pfadangaben.
 
omg sry^^ hatte wohl ein blackout -.-

\ statt / und alles geht :P
danke :)

/?dit kannn mir wer sagen wo ich die höhe und die breite ändern kann.

den teil brauch ich ja dafür:
Code: 
 width="1024" height="768"

aber wo kommt der hin?

sry bin noch mehr oder weniger anfänger :P
 
ins img, wobei darf ich dir eine kürzerer Lösung anbieten:

Code: 
<script language="javascript">
function rollover(asd)
{
document.images[asd].src="images/"+asd+"r.png";
}
function rollout(asd)
{
document.images[asd].src="images/"+asd+".png";
}
</script>

<a href="seite.htm" onMouseOver="rollover('bildname')" onMouseOut="rollout('bildname')"><img name="bildname" src="images/bildname.png" border="0"></a>
 
hier noch eine lösung ohne Javascript:

http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm#a4

Der Code das es nur für einen Link gültig ist:
Code: 
 // der teil im head bereich
 <style type="text/css">
   a.spezial       { display:block;
             background-image:url(button.gif);
             width:120px; height:30px }
   a.spezial:hover { background-image:url(button_on.gif); }
   a.spezial:active { background-image:url(button_active.gif); }
 </style>

  // und dann der link im Body Bereich

  <a href="#" class="spezial">dein Link</a>
Jo, das sollte eigentlich so klappen.
Warum auch Javascript nehmen wenns es CSS auch tut ;)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben