[JavaScript] mouseover meerdere identieke plaatjes

[Verwijderd]

Ik zal ff uitleggen wat mijn probleem is (genoeg gezocht via search):

Zie http://www.freestyle-design.nl/cmd/index.php?page=portfolio

Ik heb daar een aantal documenten staan die downloadbaar zijn in 2 soorten bestanden. Voor elk soort bestand dus een ander plaatje. Nu staan er 3 documenten die elk in 2 soorten bestanden worden aangeboden.

Voor alle .doc gebruik ik icon_doc.gif en voor alle .pdf gebruik ik icon_pdf.gif

Al deze plaatjes krijgen een mouseover. Voor de pdf's:

code:

icon_pdf8a = new Image;
icon_pdf8a.src = "img/icon_pdf_off.gif";
icon_pdf8b = new Image;
icon_pdf8b.src = "img/icon_pdf_on.gif";

en:

code:

<a target="_blank" href="http://www.link.com/blabla.doc" 
onmouseover="chngImg('icon_pdf','icon_pdf8b');" onmouseout="chngImg('icon_pdf','icon_pdf8a');">

Alle 3 de pdf plaatjes heb ik voorzien van bovenstaand stukje code. Maar zoals je ziet werken de eerste 2 mouseovers niet correct. Bij een mouseover over 1 en 2 wordt de mouseover toegekend aan 3. Duidelijk ?

Dit wordt denk ik veroorzaakt door een conflict. Nl, alle 3 de plaatjes heb ik dezelfde name gegeven (name="icon_pdf).

Dit is simpel op te lossen door 3 verschillende stukjes code, maar dat is juist wat ik niet wil.

Is het dus mogelijk om 1 stukje code te gebruiken voor alle 3 de plaatjes?

[crisp]

zet je mouseover niet op je anchor, maar op je image zelf; dan kan je mbv van het this keyword naar je image verwijzen en heb je geen (deprecated) name attribuut meer nodig

[Verwijderd]

t/m m'n mouseover in de image zelf te zetten snap ik het nog

maar wat je dan zegt?


Ik ben maar een simpele designer met (nog) weinig script ervaring

[crisp]

ok, kort voorbeeldje:

JavaScript:

icon_pdf8a = new Image;
icon_pdf8a.src = "img/icon_pdf_off.gif";
icon_pdf8b = new Image;
icon_pdf8b.src = "img/icon_pdf_on.gif";

function chngImg(img, ref) {

  img.src = window[ref].src;

}

en dan in je img tags (dus in plaats van in je a-tags):

HTML:

onmouseover="chngImg(this, 'icon_pdf8b');"
onmouseout="chngImg(this, 'icon_pdf8a');"

de this verwijst dus naar je img-tag zelf in deze context, en als zodoende is dus het img argument in de functie ook een directe verwijzing.
Je preload is inderdaad handig, en omdat globals attribuut zijn van het window object kan je ze dus ook via window[var] aanspreken (hoewel een array misschien mooier was geweest, maar je eventueel ook direct een object referentie had kunnen meegeven).

voorbeeld array:

code:

var preload = [];
preload['icon_pdf8a'] = new Image();
preload['icon_pdf8a'].src = 'img/icon_pdf_off.gif';

en dan ipv window[ref] dus preload[ref] gebruiken - is iets netter

voorbeeld object referentie meegeven:

JavaScript:

icon_pdf8a = new Image;
icon_pdf8a.src = "img/icon_pdf_off.gif";
icon_pdf8b = new Image;
icon_pdf8b.src = "img/icon_pdf_on.gif";

function chngImg(img, ref) {

  img.src = ref.src;

}

en dan met

HTML:

onmouseover="chngImg(this,icon_pdf8b);"
onmouseout="chngImg(this,icon_pdf8a);"

let op het ontbreken van quotes om het 2e argument!

lees ook eens over FIR; daarbij combineer je de on en off image in 1 plaatje en gebruik je dat als achtergrondplaatje van je anchor. Bij mouseover en mouseout pas je dan je backgroundPosition aan zodat een ander deel van het plaatje zichtbaar is - heel effectief ook (een soort sprite-idee)

[ Voor 72% gewijzigd door crisp op 29-11-2003 01:17 ]

[sjaakaq]

hmm..kijke es op http://www.siol-a1.tk daar heb ik ook van die image swaps bij onmouseover. Ik heb zo'n standaard scriptje, in de head sectie maak je een array aan van plaatjes en in de img tags kun je daar naar verwijzen. Kijk eens zou ik zeggen

[Verwijderd]

crisp geweldig

zie hier het resultaat

http://www.freestyle-design.nl/cmd/index.php?page=portfolio


thanx again