JavaScript/CSS(?) Problem

[WeMa]

Hallo,
Ich hab mir grade eine Seite mit einem CSS Gerüst gebastelt
und möchte nun den JavaScript-Mouseover Effekt einbauen:

<div id="head">
</div>

<div id="menue2">
<p><a href="arbeit.html"
onmouseover="austausch1.src='/imgs/arbeit.gif';"
onmouseout="austausch1.src='/imgs/arbeit.gif';">

<img src="/imgs/arbeit.gif"
border="0"
name="austausch1">Hallo
</a><br />

Geht das überhaupt? Und wenn ja was habe ich falsch gemacht? Das funktioniert bei mir nämlich irgendwie nicht.

Ich freue mich auf Eure Antworten!!!

MfG

WeMa

 

[_Thor_]

Hi,

du solltest als erstes 'name' durch 'id' ersetzen, denn 'name' ist veraltet und sollte nicht mehr verwendet werden.

Dann brauchst du im Javascript eine Funktion, die du mit onmouseover aufrufst und ihr das neue Bild übergibst, das gleiche machst du mit 'onmouseout'

<a href="arbeit.html" onmouseover="javascript:swap('neuesBild.jpg');" onmouseout="javascript:swap('neuesBild.jpg');">dein link</a>

in der Funktion schreibst du dann

function swap(image){
  document.getElementById('[COLOR=#800080]austausch1[/COLOR]').src = image;
}

Die das ersetzen von name durch id hat noch einen vorteil, so kannst du nämlich im Javascript durch getElementById('austausch1') direkt auf das Bild zugreifen.

Hab das alles jetzt nicht getestet, aber wenn ich mich nicht irre, sollte das so funktionieren. Ansonsten nochmal melden ;)

[edit]funktioniert[/edit]

 

[WeMa]

Vielen Dank

Vielen Dank für deine Antwort, aber, wo muss ich das hin machen?

function swap(image){
  document.getElementById('austausch1').src = image;
}

Kannst du mir nicht evtl. schreiben, wie dann die ganze Seite aussieht, das auch ich des kapier(sorry, bin noch ziemlicher anfänger)?? Das wäre sehr nett von dir!

 

[crash]

Was hat denn "javascript:" in einem Event-Handler zu suchen? Niemals javascript: benutzen!

Das Mouseover- und Mouseout-Event sollte besser das Bild selbst haben.

 

[WeMa]

und

Und was soll ich jetzt machen/was mache ich am besten um das hinzubekommen, das da dann das eine Bild mit dem anderen Ausgetauscht wird, wenn man mit der Maus drüber fährt?

 

[crash]

<img src="foo.png" onmouseover="this.src = 'bar.png'" onmouseout="this.src = 'foo.png'" alt="text" />

 

[WeMa]

Danke

DANKE funktioniert jetzt Perfekt!!
Nur eine Sache ned, um des Bild is jetzt son Blauer rahmen, wie bekomme ich den weg??

 

[crash]

Mit CSS:

a img { border: 0; }

 

[gollum1990]

Oder auch im IMG Tag.
(<img ... border="0">)

 

[crash]

Na besser doch:

style="border: 0"

 

[WeMa]

wo hin

Und..wo muss das dann hin??:

style="border: 0"

 

[crash]

Ins <img />

 

[WeMa]

OK, das hab ich jetzt gemacht, aber unter Firefox kommt da bei mir immer noch der rahmen und bei Internet Explorer(6.0) gar kein Bild....! Woran liegt das den jetzt?

PS: Hab die Seite jetzt mal hochgeladen: Testseite

MfG


WeMa

 

[THE_fan]

</a><br /><a href="arbeit.html" <img style="border: 0" src="/Buttons/Arbeit.gif" onmouseover="this.src = '/effekt/Arbeit.gif'" onmouseout="this.src = '/Buttons/Arbeit.gif'" alt="text" border="0" /></a>

Musst das <a href""> natürlich auch schließen ;)

 

[WeMa]

Hab ich doch, oder nicht?

 

[THE_fan]

Nö, hinter "arbeit.html" im <a href>-Tag fehlt das >

 

[WeMa]

Ohhh, stimmt, danke, jetzt funz alles perfekt!!
Danke an alle!!!!