PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Imagetausch mit Java-Skript - wer kann helfen???


sascha-elite
30-04-2006, 13:12
Hallo alle zusammen,

ich habe ein Problem, welches folgendermaßen aussieht:

Ich hab auf meiner website einen frame indem ein buttonmenu integriert
ist.
Diese Buttons sind allerdings noch nicht dynamisch (es sind nur verlinkte
Bilder).
Um sie dynamischer wirken zu lassen, habe ich jetzt mit java-script
imagetausch betrieben.
Das funktioniert insofern auch ganz gut, als das sich die buttons farblich
verändern wenn man mit der Maus rein bzw. wieder raus fährt (wie ein
3D-Effekt).
!!!Nun soll aber noch ein dritter Effekt hinzu kommen:
Wenn man mit der Maus auf den Button klickt, soll dieser "einfahren", wie
ein richtiger Button, z.B. unter Windows.
Das bekomme ich irgendwie nicht hin - kann mir da vielleicht jemand weiter
helfen???
Hier ist der Quelltext, wie er bis jezt ist(erst mal nur für den ersten button):

<html>
<head>
<script
language="JavaScript">
<!--
button1_a= new Image();
button1_a.src = "Home_News1.gif"

button1_b= new Image();
button1_b.src = "Home_News2.gif"

button1_c= new Image();
button1_c.src = "Home_News3.gif"


button2_a= new Image();
button2_a.src = "Person1.gif"

button2_b= new Image();
button2_b.src = "Person2.gif"

button2_c= new Image();
button2_c.src = "Person3.gif"


button3_a= new Image();
button3_a.src = "Bike1.gif"

button3_b= new Image();
button3_b.src = "Bike2.gif"

button3_c= new Image();
button3_c.src = "Bike3.gif"


button4_a= new Image();
button4_a.src = "Karriere1.gif"

button4_b= new Image();
button4_b.src = "Karriere2.gif"

button4_c= new Image();
button4_c.src = "Karriere3.gif"


button5_a= new Image();
button5_a.src = "Team1.gif"

button5_b= new Image();
button5_b.src = "Team2.gif"

button5_c= new Image();
button5_c.src = "Team3.gif"


button6_a= new Image();
button6_a.src = "Renntermine1.gif"

button6_b= new Image();
button6_b.src = "Renntermine2.gif"

button6_c= new Image();
button6_c.src = "Renntermine3.gif"


button7_a= new Image();
button7_a.src = "Rennergebnisse1.gif"

button7_b= new Image();
button7_b.src = "Rennergebnisse2.gif"

button7_c= new Image();
button7_c.src = "Rennergebnisse3.gif"


button8_a= new Image();
button8_a.src = "Fotoalbum1.gif"

button8_b= new Image();
button8_b.src = "Fotoalbum2.gif"

button8_c= new Image();
button8_c.src = "Fotoalbum3.gif"


button9_a= new Image();
button9_a.src = "Gaestebuch1.gif"

button9_b= new Image();
button9_b.src = "Gaestebuch2.gif"

button9_c= new Image();
button9_c.src = "Gaestebuch3.gif"


//-->
</script>
</head>

<body>

<a href="Home_News.htm" target="mainFrame" onmouseover="austausch1.src='Home_News1.gif';"
onmouseout="austausch1.src='Home_News2.gif';" onclick="austausch1.src='Home_News3.gif'">
<img src="Home_News2.gif" border="0" width="140" height="30" name="austausch1"></a>

</body>

</html>
Pingu
30-04-2006, 13:48
Mach es doch nicht so kompliziert und nimm einfach animierte GIFs. Es muß halt nur eingestellt werden, daß die Animation nicht unendlich laufen soll.

Außerdem, wenn Du heutzutage anfängst mit HTML. Laß das Tauschen von Bildern mit Hilfe von JavaScript gleich ganz sein. Nimm lieber CSS. Da ist das ganz einfach. Weiterhin: löse Dich von den Frames. Frames und Tabellen sind passé. Beides waren gute Hilfsmittel zur Zeiten als es noch kein ordentliches CSS gab.

Pingu
sascha-elite
30-04-2006, 13:53
hallo pingu,

ich weiß nicht wie ich die styles zu einem ani-gif zusammenfüge
erst recht nicht wie ich es einstelle, dass das gif nicht unendlich laufen soll.
kannste mir da weiterhelfen - oder vielleicht doch beschreiben wie ich es mit der anderen methode hinbekomme???

gruß
sascha
Pingu
30-04-2006, 14:11
Alles was Du wissen mußt findest Du hier: http://de.selfhtml.org

Nur auf die Schnelle:
HTML:

<input id="button" name="absenden" type="button" />
<a id="bild" href="seite.html" target="wasauchimmer"><img src="bild.gif" /></a>
CSS:
#button:link { background-image:url(button-normal.gif); }
#button:hover { background-image:url(button-highlight.gif); }

#bild img { visibility:hidden; }
#bild:link { background-image:url(bild-normal.gif); }
#bild:hover { background-image:url(bild-highlight.gif); }

Für animierte GIFs gibt es sicherlich verschiedenste Programme. Mitte der 90er hatte ich irgenwo mal eines für Windows her, keine Ahnung mehr wie das hieß. Heutzutage nutze ich auf meinem PowerBook natürlich Photoshop und ImageReady dafür. Für Linux wird sicherlich auch irgendwelche Tools geben. Ich würde mich nicht wundern wenn Gimp das auch kann. Jedefalls irgendein Grafik-Tool, welches animierte GIFs erstellen kann. Dort kann man dann auch irgendwo immer über eine Option einstellen, ob die Animation unendliche laufen soll oder eine definierte Anzahl. Wie dies bei Deinem präferierten Tool geht, weiß ich natürlich nicht.

Pingu
sascha-elite
30-04-2006, 14:37
hallo pingu,

danke für die schnelle antwort.
selfhtml kenne ich natürlich, wobei ich daraus oftmals nicht schlau werde.
werde es mit deiner methode probieren.
was bewirkt eigentlich id="button" und name="absenden"???
photoshop benutze ich auch, allerdings noch nicht so lange.
wäre dir auf ewig dank verpflichtet:D , wenn du mir sagst (bitte schritt für schritt), wie man damit ani-gifs erzeugt.

danke nochmal für die hilfe.

gruß
sascha
sascha-elite
30-04-2006, 15:23
hallo pingu,

habe deinen vorschlag ausprobiert - funktioniert allerdings erst recht nicht - oder ich mach was falsch.

hier der css-quellcode:

Body {background-image: url(background.jpg);
font-family: Tahoma;
color: yellow;
font-size: 15px;}

#button:link { background-image:url(y-wide.gif); }
#button:hover { background-image:url(y-wide2.gif); }

#bild img { visibility:hidden; }
#bild:link { background-image:url(y-wide.gif); }
#bild:hover { background-image:url(y-wide2.gif); }

und der für die html:

<html>
<head>
<title>sascha-mtb-online.de</title>
<link rel=stylesheet type="text/css" href="style_left.css">
</head>

<body>

<input id="button" name="absenden" type="button" />
<a id="bild" href="Home_News.htm" target="mainFrame"><img src="y-wide.gif" width="140" height="30"/></a>

</body>

</html>


==> kannste mir sagen, wo der fehler liegt???

MB

gruß
sascha
Jadawin
09-05-2006, 08:59
Hallo,

ich schlage vor, Du liest Dir mal ein paar Tutorials zu CSS durch.
Das ist nicht böse gemeint, aber wenn Du erstmal die Grundidee
kapiert hast, ist alles einfacher.
(Einfach mal mit 'ner Suchmaschine nach "css tutorial" suchen.)

Zu deinem Code:


Body {background-image: url(background.jpg);
font-family: Tahoma;
color: yellow;
font-size: 15px;}

Vielleicht ist das nur eine persönliche Macke von mir, aber wieso benutzt Du "Tahoma" als Font? Kannst Du garantieren, dass jeder, der Deine Seite betrachtet, diesen Font installiert hat? Möglicherweise ja nicht, und wie Deine Seite dann aussieht, kann man nicht genau sagen.
Ich halte mich da an die Standard-Fonts: Times, Arial und Courier
Aber wie gesagt, vielleicht bin ich da etwas übervorsichtig.




#button:link { background-image:url(y-wide.gif); }
#button:hover { background-image:url(y-wide2.gif); }


Versuchs mal mit:


#button { background-image:url(y-wide.gif); }
#button:hover { background-image:url(y-wide2.gif); }


Weiterhin:


#bild img { visibility:hidden; }
#bild:link { background-image:url(y-wide.gif); }
#bild:hover { background-image:url(y-wide2.gif); }


Ich nehme an, das Bild soll nur als Platzhalter dort sein. Dann wäre aber ein komplett transparentes GIF besser. Und dann einfach nur:


#bild { background-image:url(y-wide.gif); }
#bild:hover { background-image:url(y-wide2.gif); }


Vielleicht hilft Dir das bissel weiter.
MfG
Jadawin