[HaBo]

b4ck · 12.04.06, 16:38

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

LX · 12.04.06, 17:39

Leerzeichen und Backslashes haben in Pfaden nix zu suchen

Versuch's mal lieber mit relativen Pfadangaben.

Anzeige

- Anzeige -

b4ck · 12.04.06, 18:22

omg sry^^ hatte wohl ein blackout -.-

\ statt / und alles geht

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

jami · 12.04.06, 22:56

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>

b4ck · 12.04.06, 23:19

hui danke

Tasmas · 13.04.06, 10:57

hier noch eine lösung ohne Javascript:

http://aktuell.de.selfhtml.org/artik...r/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

Anzeige

- Anzeige -

12.04.06, 17:39	#2 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	Leerzeichen und Backslashes haben in Pfaden nix zu suchen Versuch's mal lieber mit relativen Pfadangaben. __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett JS BB LX UP

12.04.06, 18:22	#3 (permalink)
b4ck Themenstarter Registriert seit: 13.02.06 Likes: 1	omg sry^^ hatte wohl ein blackout -.- \ statt / und alles geht 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

12.04.06, 22:56	#4 (permalink)
jami Registriert seit: 05.04.05 Likes: 0	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>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
animierter Desktop	SunTzu2007	Downloads	1	09.07.07 18:15
Animierter Bär	sheepd	Fun Section	6	05.06.05 17:47
Animierter Banner für HP ...	EgoMobsta	(Web-) Design und webbasierte Sprachen	1	18.10.02 23:28
Animierter Banner für HP ...	EgoMobsta	Internet Allgemein	1	18.10.02 23:28
Was ist I-Link?	justj	Hardware Probleme	1	08.10.02 17:27

12.04.06, 23:19	#5 (permalink)
b4ck Themenstarter Registriert seit: 13.02.06 Likes: 1	hui danke

[HaBo]

Animierter LINK