Bild bei Mouseover ändern

**AmicaNoctis** · 13.01.2010, 01:19

Hallo,

erstmal, wo kommt die Variable bild her? Am besten wäre es, wenn du das img-Element direkt mit übergibst:

HTML-Code:

<img onmouseover="mchange(this)" src="..." alt="..." />

Code:

function mchange (imgElem) {
    imgElem.src = ...;
}

Gruß,

Amica

**NextDon** · 13.01.2010, 01:28

erstmal danke für die Antwort.

Ich sehe schon es war nicht so klug den halben Code zu posten

(hatte auch gerade den ersten Post editiert als du schon am schreiben warst ^^)

Die Mouseover-Grafik ist ÜBERALL gleich.

ich habe aber mehrere Knöpfe:

Code:

<img name="grafik1" onmouseover="mchange('grafik1')
<img name="grafik2" onmouseover="mchange('grafik2')
<img name="grafik3" onmouseover="mchange(grafik3')
<img name="grafik4" onmouseover="mchange('grafik4')
<img name="grafik5" onmouseover="mchange('grafik5')

und möchte jetzt bei Knopf 1,2,3,4 oder 5 den Mouseover-Effekt einsetzen:

Code:

Das geht bei EINER Grafik:

function mchange(name)
{    
    document.grafik1.src = blub.jpg;
}

Aber möchte ich es jetzt für alle fünf benutzen geht es nicht:

function mchange(name)
{    
    document.name.src = blub.jpg;
}

Ich möchte es aber gerne über den Javascript-Code lösen und nicht mit ( onmouseover="this.src='neu.gif';" onmouseout="alt.gif';" )

**AmicaNoctis** · 13.01.2010, 01:35

Ok, aber die Antwort hast du schon bekommen oder bist du damit nicht einverstanden?

**NextDon** · 13.01.2010, 01:42

mh... funktioniert nicht

Ok, dann poste ich mal den ganzen Code, hab nur angst das so viel Code die Leute abschreckt und die dann nicht lesen bzw. antworten ^^

Code:

<a href="#" 
onmouseover="mopen('bilder/de-navioben-6-mouseover.gif','sprache')"
onmouseout="mclosetime('bilder/de-navioben-6.gif','sprache')">
<img name="sprache" 
src="bilder/de-navioben-6.gif" width="124" height="24" border="0"  /></a>

Code:

<script type="text/javascript"> <!--
var timeout    = 500;
var closetimer    = 0;
var ddmenuitem    = 0;

function mopen(bild,id)
{    
    *** Code1 *** document.sprache.src = bild;
    mcancelclosetime();
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
}
function mclose(bildb,id)
{
    
    *** Code1 ***  document.id.src = bild;
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime(bildb,id)
{
    closetimer = window.setTimeout(function(){mclose(bildb,id);}, timeout);
}
function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}
document.onclick = mclose; 
//--> </script>

*** Code 1 *** Funktioniert

*** Code 2 *** Leider nicht (wobei ich da ne "Variable" hin haben möchte)

dein Code habe ich versucht einzubauen geht aber leider nicht -.-

**AmicaNoctis** · 13.01.2010, 01:44

Wo und wie hast du meinen Code eingebaut und was geht dabei nicht? Dass deine Versuche nicht funktionieren, sehe ich auf Anhieb.

**NextDon** · 13.01.2010, 01:49

Ich hatte den einfach noch drangehängt ^^ (und natürlich beim aufruf auch noch nen 3tes ding)

Code:

function mopen(bild,id,imgElem)
{    
    imgElem.src = bild;
    mcancelclosetime();
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
}

**AmicaNoctis** · 13.01.2010, 01:52

Das wird jetzt zu chaotisch und ich kann dir nicht mehr folgen.

Jedenfalls ist das Grundproblem, dass du offenbar nur die statische Punktschreibweise kennst, z. B. document.body.firstChild

Es gibt auch auch noch die dynamische Array-Notation: document["body"]["firstChild"], die es dir erlaubt, statt der Strings beliebige String-Ausdrücke (also auch Variablen) zu benutzen.

Trotzdem ist es besser, mit this zu arbeiten, statt andauernd zu referenzieren und dereferenzieren.

Amica

**NextDon** · 13.01.2010, 01:59

Alles was ich möchte ist halt aus diesem Punkt hier eine Variable zu machen:

Code:

function mopen(HIER)
{    
 document.HIER.src = bild;
}

So dass ich die Grafik an verschiedenen Positionen ändern kann also z.B wenn HIER == Grafik1 oder Grafik2 oder Grafik3 ist:

Code:

function mopen(HIER)
{    
 document.GRAFIK1.src = bild;
 oder
 document.GRAFIK2.src = bild; 
 oder
 document.GRAFIK3.src = bild;
 oder
 document.GRAFIK4.src = bild;
}

Nur leider habe ich keine Ahnung wie man sowas macht also genau wie du sagst: ich kenne nur die statische Punktschreibweise -.-

Also wie ne ganz normale Variable in PHP nur wie mache ich dass *cry* Ich habe gelesen dass es irgendwie mit
getElementById gehen soll nur ich bekomms nicht hin ;(

**AmicaNoctis** · 13.01.2010, 02:01

Zitat von NextDon Beitrag anzeigen

Nur leider habe ich keine Ahnung wie man sowas macht also genau wie du sagst: ich kenne nur die statische Punktschreibweise -.-

Genau das habe ich dir eben erklärt!

Nicht document.HIER sondern document[HIER], was ist daran jetzt noch so schwierig?

**NextDon** · 13.01.2010, 02:04

JAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

DANKE DANKE DANKE

du hast ja keine Ahnung wie mein Kopf brumt nachdem ich 6 Stunden !!! schon daran sitze lol ^^ bin sooo müde aber ENDLICH jetzt kann ich pennen

und da ist es so einfach lol xD

**AmicaNoctis** · 13.01.2010, 02:14

Nichts für ungut, aber wenn du 1 von den 6 Stunden damit verbracht hättest, dich über die Grundlagen der JS-Syntax zu belesen, hättest du dir mindestens 4 der übrigen 5 ersparen können

Und wie gesagt: besser wäre es mit this zu arbeiten, denn erstens musst du für jedes neue Bild wieder ein eindeutiges name-Attribut vergeben und zweitens funktioniert alles nicht mehr, wenn zufällig im selben Dokument noch ein zweites name-Attribut mit demselben Wert vorkommt. Das kann z. B. schon durch Einbinden irgendwelcher Werbung passieren, ohne dass du darauf Einfluss hättest. Daher das betreffende Element direkt übergeben und nicht dessen Namen.

Bild bei Mouseover ändern