onMouse Over Help ._.

[SimoNxD]

Hallo kurze und für viele bestimmt ne Simple Frage...

hab mir mal ne onMouseOver und Out script angeschaut bzw hilfe gesucht.
Dort wird aber ledeglich für 1 Bild beschrieben.
Wie folgt.

start = new Image ();start.src = "../images/buttons/start.png";
start1 = new Image ();
start1 = "../images/buttons/start1.gif";


function Change(start,start1)
{
document.images[start].src = eval(start1 + ".src")
}

die function wurde dann doch nur für den Startbutton übernommen?!
Meine Frage... wie cann ich per Javascript alle Pfade für die Bilder der onmouseover function angeben, aber diese dann in eine function einbauen sprich in ''Change''?

Damit ich am ende in der HTML datei

<a href="index.htm onmouseover = "change('start.png','start1')"
onmouseout = "change('start.png','start)"

nurnoch dies machen muss... ohne für jedes einzelnde bild ne function schreiben zu müssen!?

Ein anderes Problem ist nun:

HTML

<div id="menü_buttons"><a href="index.htm"    onMouseOut="Change('startbutton','start')"    onMouseOver="Change('startbutton','start1')"    onMouseOut="Change('startbutton','start')"><img src="http://www.html.de/images/Buttons/start.png" name="startbutton"></a></div>

und hier die javascript datei dazu

start = new Image ();[/LEFT]
start.src = "../images/Buttons/start.png";
start1 = new Image ();
start1 = "../images/Buttons/start1.gif";


function Change(start,start1)
{
document.images[start].src = eval(start1 + ".src")
[LEFT]}[/LEFT]

Bild wird anfangs angezeigt, aber wenn man drüber geht verschwindet es und wenn man weg geht bleibt es weg...
Woran liegt das :( Hab schon nachgeguckt, habe kein ; oder ' oder " vergessen und alles gemacht wie es ihm tutorial stand..​

 

[threadi]

Welches Tutorial nutzt Du dafür?

Das was Du willst, kannst Du viel einfacher mit CSS erreichen ohne den ganzen JavaScript-"Hokuspokus".

Beispiel:
HTML

<a href="linkziel.html" class="menu1">&nbsp;</a>

CSS

a.menu1 {
 background-image: url(../images/Buttons/start.png);
 background-repeat: no-repeat;
 display: block;
 height: 30px;
 width: 20px;
}

a.menu1:hover {
 background-image: url(../images/Buttons/start1.png);
}

 

[SimoNxD]

Ja aber was ich im endefeckt erreichen möchte, ist ja, ich hab ja nicht nur ein button und müsste ja dann 6 doer 7 verschiedne css sachen schreiben dafür, da würde der script ja wenn man mehrer onmouse functionen hat ewig lang werden, kann man dies nicht mit javascript bzw. einer function komprimieren :x?

 

[Wustersoss]

Wenn du im Markup mit Javascript 6 Bilder tauschen willst, hast du 6 Ressourcen.
Wenn du im Markup mit CSS 6 Bilder tauschen willst, hast du 6 Ressourcen.

Wo ist die Effizienz von Javascript gegenüber CSS.
Mit Javascript musst du zudem voraussetzen, dass das User Javascript eingeschaltet hat.

Stilangaben gruppieren könnte interessant für dich sein: Grundlagen -- Einführung in Cascading Style Sheets -- bjoernsworld.de

Die gesamte Anleitung ist zu empfehlen.

 

[SimoNxD]

Nun noch ne kurze Frage

a.menu1 { background-image: url(../images/Buttons/start.png); background-repeat: no-repeat; display: block; height: 30px; width: 20px;}a.menu1:hover { background-image: url(../images/Buttons/start1.png);}

Hier ist ja zu sehen ''a.menu1'' und in der html datei wird nur die class ''menu1'' angegeben habe meine CSS datei aber extern sprich nicht in der html datei, ledeglich ein verweis bzw pfad zur css datei.
kann ich in der CSS datei auch ohne ''#'' arbeiten?! sprich auch nur ''a.menu1'' anstatt ''#a.menu1'' ?

 

[Wustersoss]

Was referenziert das Rautenzeichen in einer CSS-Datei?
Eine ID und ein Punkt eine Klasse.
a ist hier das Element.

Eine Übersicht über gute Tutorials zu CSS steht hier: CSS lernen

 

[SimoNxD]

was raute bedeutet weiß ich nicht mir wurde es so beigebracht.. habe immer mit den gedanken gelebt das es sowas wie bei html ist bei html halt <> und bei CSS #

Also hat # im ende fekt nix zu bedeuten?

 

[Tar]

Mit #bla sprichst du <XXX id="bla"> an, mit .bla <XXX class="bla">.