Bildwechsel bei Mouseover

Tamoi

Ich suche ein Javascript um folgendes umzusetzen:
siehe am Beispiel:
http://www.reiterhof-toedt.de/beispiel/

Beim Mouseover über Link1, ändert sich das Bild 0 in Bild A
Bis hierhin ist es kein Problem!

Jetzt soll aber zusätzlich, beim Überfahren von Link 2, sich das Bild 0 in Bild B wechseln! Da ich Bild 0 nur einen Namen vergeben kann (name="image1") weiss ich nicht wie ich dies umsetzen soll. Könnt ihr mir weiterhelfen?
__________________________________________________________
Hier der code:
<html>
<head>
<script language="JavaScript">
var NN3 = false;
image1= new Image();
image1.src = "0.jpg";
image1on = new Image();
image1on.src = "a.jpg";
image2= new Image();
image2.src = "0.jpg";
image2on = new Image();
image2on.src = "b.jpg";
image3= new Image();
image3.src = "0.jpg";
image3on = new Image();
image3on.src = "c.jpg";

function on3(name) {
document[name].src = eval(name + "on.src");
}
function off3(name) {
document[name].src = eval(name + ".src");
}
NN3 = true;
function on(name) {
if (NN3) on3(name);
}
function off(name) {
if (NN3) off3(name);
}
</script>
</head>
<body>
<table border=0 align=left width="100%">
<tr>
<td valign=top>
<p><img src="0.jpg" name="image1" height=150 width=150 border=0></p></td>
<td valign=top>
<p><a href="http://www.ebay.de" ONMOUSEOVER="on('image1');" ONMOUSEOUT="off('image1')">Link1</a></p>
<p><a href="http://www.mobile.de">Link2</a></p>
<p><a href="http://www.transfermarkt.de">Link3</a></p></td>
</tr>
</table>
</body>
</html>

synaptic

vergib dem ding ne id, die dem namen gleich ist..
mit document.getElementById(DIE_ID);
kannste dir des objekt ranholen und document.getElementById(DIE_ID).src="bild.jpg"; ist dann die zuweisung eines neuen bildes in die entsprechende src.
wenn du den bildern keine höhe und breite mitgibst wird sich das ding automatisch der echten grösse des bildes anpassen!

Tamoi

Hi synaptic, mit deiner Aussage, kann ich nichts richtiges anfangen! Da fehlt mir wohl das wissen zu! Kannst du´s mir verständlicher erklären? Vielen Dank

synaptic

Code

function bildwechsel(obj, src){
var bildobjekt = document.getElementById(obj);
var bildquelle = src;
bildobjekt.src = bildquelle;
}

HTML

<img id="datbild" name="datbild" src="" />
<br />
<a href="#" onmouseover="bildwechsel('datbild', 'http://home.arcor.de/synaptic/eis.jpg');">dat is ein link mit mouseover</a>

man vergibt eine ID, damit man via document.getElementByID() das objekt ranholen und in einer variablen speichern kann.
dann kommt nen punkt und dahinter des zu ändernde attribut benennt nach dem '=' kommt dann der wert der zugewisen werden soll in gänsefüßli.

Tamoi

Also das klappt bei mir nicht. Hab den ganzen Tag versucht den code und den htm text einzufügen. nichts geht!!!

synaptic

sind ja ach zwei kleine fehler drin.. das eis.png muss nen eis.jpg sein und beim onmousover fehlt nen "e"
sollte onmouseover sein...
mit etwas nachdenken und grundkenntnissen hätte des schon auffallen können..
hab oben den text editiert und die fehler korrigiert...

Tamoi

So sieht mein Code jetzt aus.
Der Mouseover funzt, wechselt aber nicht wieder zurrück.
Was mache ich falsch?

<html>
<head>
<script language="JavaScript">
function bildwechsel(obj, src){
var bildobjekt = document.getElementById(obj).src="a.jpg";
var bildquelle = src;
bildobjekt.src = bildquelle;
}
</script>
</head>
<body>
<table border=0 align=left width="100%">
<tr>
<td valign=top>
<img id="datbild" name="datbild" src="0.jpg" />
<br />
</td>
<td valign=top>
<p><a href="#" onmouseover="bildwechsel('datbild', 'http://home.arcor.de/synaptic/eis.jpg');">dat is ein link mit mouseover</a></p>
<p><a href="http://www.mobile.de">Link2</a></p>
<p><a href="http://www.transfermarkt.de">Link3</a></p></td>
</tr>
</table>
</body>
</html>

synaptic

na wenn du nen effekt bei mouseover UND auch bei onmouseout haben willst, solltest du auch nen onmouseout einbauen... -.-
also etwas mitdenken is im bereich webdevelopment schon gefragt!

und benutz doch bitte die codetags im editor(#= code, < > = html, und das phpding is ja offensichtlich..), um deinen codefaxen hier übersdichtlicher zu gestalten
[Blockierte Grafik: http://home.arcor.de/synaptic/codetag.png]

Tamoi

Vielen vielen Dank synaptic. Du hast mir echt weitergeholfen. Vielleicht fange ich mit meinen 62 Jahren, nochmal an zu studieren. Ist ja alles so einfach.

synaptic

ob du es glaubst oder nicht, ich habe während meiner studienzeit zwei leutz im kurs gehabt, die mit 65 und 67 noch angefangen haben russisch zu studieren...
und beide können es heute!

und nur mal nebenbei bemerkt.. html ist kein hexenwerk, ebensowenig wie javascript...
wenn man diese sachen benutzen möchte sollte man sich schon die grundlagen aneignen, sonst wird das nix.
letztlich hat man nämlich keinen nutzen, wenn man sich jeden code zusammenschreiben lässt.. da kann man nämlich direkt hier im jobforum nen auftrag ausschreiben und ne gegenleistung vereinbaren!

Tags