Zobrazte 2 rôzne obrázky (alternatívny obrázok pre každý obrázok) na myši pomocou jednej funkcie - javascript, javascript-events

Pracujem už niekoľko hodín a snažím sanechajte si urobiť poslednú časť laboratória. Čo musím urobiť, je, aby moja webová stránka zobrazila dva obrazové súbory s rôznymi názvami a zmenila obrázok, keď na ne prejdem kurzorom cez funkciu. Keď umiestnim kurzor myši na prvý obrázok, mal by sa zmeniť na radiačný znak, a keď umiestnim kurzor myši na druhý obrázok, malo by sa zmeniť na znak biologického nebezpečenstva. Kedykoľvek presuniem myš od jedného z obrázkov, mal by sa tento obrázok zmeniť späť na otáznik. Myslím, že viem, ako používať rovnakú funkciu na prácu s viac ako jedným obsluhovačom udalostí; problém je, že neviem, ako použiť tú istú funkciu na zmenu obrázka (pri prejdení myšou) na iný obrázok, na základe toho, nad ktorým obrázkom sa moja myš vznáša; neviem, ako urobiť funkciu, aby skontrolovala, ktorý obrázok onmouseover sa hlási k.

Prirodzene by som predpokladal, že použijem ifvyhlásenie za toto, ale bez ohľadu na to, čo robím, nemôžem „dostať funkciu na odlíšenie obrázkov. Vždy sa zdá, že chce použiť prvý obrázok, ktorý som uviedol. Momentálne to funguje presne tak, ako chcem, okrem oba obrázky sa pri prejdení myšou zmenia na to isté.

Tu mám kód pre stránku funkcie (pravdepodobne tam, kde sú problémy):

function changePic_onmouseover()
{
if(document.images[0].onmouseover)
{
this.src = "02-Radiation.jpg";
}
else if(document.images[1].onmouseover)
{
this.src = "03-Biohazard.jpg";
}
}
function changePic_onmouseout()
{
if(document.images[0].onmouseout)
{
this.src = "01-Question.jpg";
return true;
}
else if(document.images[1].onmouseout)
{
this.src = "01-Question.jpg";
return true;
}

}

A tu je text tela, kde som pridal obslužné rutiny udalostí s vlastnosťami objektu:

document.images[0].onmouseover = changePic_onmouseover;
document.images[0].onmouseout = changePic_onmouseout;
document.images[1].onmouseover = changePic_onmouseover;
document.images[1].onmouseout = changePic_onmouseout;

Nemusí to byť najjednoduchší spôsob, ako to urobiť, ale potrebujem to mať takto nastavené.

odpovede:

1 pre odpoveď č. 1

pretože ste povedali, že to musíte takto štruktúrovať, nezmieňujem žiadny z dôvodov nepoužívania tohto prístupu a pokúsim sa odpovedať priamo na vašu otázku.

tento riadok:

if(document.images[0].onmouseover)

iba testuje, „či má prvý obrázok v dokumente definovaný presun kurzora myši“ a nemá nič spoločné s práve vykonávanou funkciou

Ak chcete zistiť, či sa volá vykonávajúci prvok, pretože „používate priamo pripojené obslužné programy (na rozdiel od delegovania udalostí), stačí začiarknuť„ toto “:

if(this == document.images[0])

alebo môžete otestovať proti cieľu udalosti, ale to „vyžaduje trochu šikanovania crossbrowsera ... niečo také by fungovalo

function changePic_onmouseover(e) {
if(!e) e = window.event;
var target = e.target || e.srcElement;
if(target == document.images[0]) // do stuff

---

1 pre odpoveď č. 2

Čo vlastne robíte s týmto riadkom:

if(document.images[0].onmouseover)

je skontrolovať, či vlastnosť onmouseover má hodnotu, ktorá sa hodnotí ako true. Keď ste udalosti priradili, vždy sa vyhodnotí ako pravdivá.

Ak chcete zistiť, o ktorý prvok ide, chcete ho porovnať:

if(document.images[0] == this)

Keď priraďujete udalosti, viete, o aký prvok ide, takže by bolo pre mňa jednoduchšie mať pre každú udalosť samostatné funkcie, než sa snažiť v čase udalosti zistiť, ktorý obrázok sa má použiť:

document.images[0].onmouseover = function(){ this.src = "02-Radiation.jpg"; };
document.images[0].onmouseout = function(){ this.src = "01-Question.jpg"; };
document.images[1].onmouseover = function(){ this.src = "03-Biohazard.jpg"; };
document.images[1].onmouseout = function(){ this.src = "01-Question.jpg"; };

---

0 pre odpoveď č. 3

čo tak zmeniť obrázok na pozadí iba pomocou CSS a vlastnosti: hover?

exemple

naozaj potrebujete na to použiť js? =) Veľa šťastia

---