Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

img src vanuit een array...

Blux
23 antwoorden
  • Hoe laad ik een plaatje vanuit een array?

    Met andere woorden;

    in de body van een htm-pagina staat hier en daar vaak een <img> tag met als attribuut 'src="oorspronkelijk-plaatje.jpg" '.

    Als ik dat "oorspronkelijk-plaatje.jpg" echter in een array heb staan, wat vul ik dan binnen de <img> tag in om dat plaatje uit de array te halen en af te beelden met behulp van de <img> tag…?!

    Alvast bedankt voor jullie hulp…!
  • [quote:f810d3e29f="Blux"]Hoe laad ik een plaatje vanuit een array?

    Met andere woorden;

    in de body van een htm-pagina staat hier en daar vaak een <img> tag met als attribuut 'src="oorspronkelijk-plaatje.jpg" '.

    Als ik dat "oorspronkelijk-plaatje.jpg" echter in een array heb staan, wat vul ik dan binnen de <img> tag in om dat plaatje uit de array te halen en af te beelden met behulp van de <img> tag…?!

    Alvast bedankt voor jullie hulp…![/quote:f810d3e29f]
    Hangt ervan af of er initieel ook een plaatje getoond moet worden en/of deze zichtbaar is?

    Als je via DOM/javascript een img-element aanmaakt als je het plaatje wilt tonen, dan heb je geen lege img-element nodig.
  • Alvast bedankt voor je reactie… :wink:

    Ik wil inderdaad initieel al een plaatje weergeven en dat met behulp van een <img> tag…

    1) Punt is dat er vaak initieel [i:9dbe5d6831]eerst[/i:9dbe5d6831] een plaatje wordt geladen met behulp van <img [b:9dbe5d6831]src[/b:9dbe5d6831]="plaatje.jpg">…

    2) [i:9dbe5d6831]Vervolgens[/i:9dbe5d6831] worden er vaak onmouseover- en onmouseout-plaatjes geladen met behulp van deze betreffende functies binnen de <a> tags, waarbij de plaatjes in dat geval uit een array worden gehaald…

    3) Ik wil echter graag dat initiele plaatje [i:9dbe5d6831]ook al[/i:9dbe5d6831] uit de array kunnen halen… Waarom? Omdat ik dan met behulp van alle <img> tags binnen de body van mijn htm-document kan verwijzen naar de array met plaatjes. Verander ik dan een plaatje ergens in de array, dan wordt deze wijziging automatisch ook op de juiste plekken in de body van mijn document 'doorgevoerd'.

    Met de manier waarop ik een bepaalde site op dit moment aan het opzetten ben, zal dat veel werk schelen in het bijhouden van deze site in de toekomst…

    Hoop dat ik een beetje duidelijk ben… En dat je wellicht weet wat ik dan aan code moet gebruiken in die <img> tag en evt. functies binnen de header etc… :)

    Alvast bedankt!
  • Voor de duidelijkheid hier een stukje code wat ik toepas…;

    <a href="site_02.htm" target="_self" onmouseover=chgSet02(5,2,7) onmouseout=chgSet02(4,1,1)><img src="image/img_eb_off.gif" width="77" height="26" border="0" name=siteB></a>

    De benodigde plaatjes staan in een array in de header…

    Via onmouseover en onmouseout binnen de <a> tag worden op de juiste plekken in de site plaatjes veranderd, waarbij met behulp van de functie 'chgSet02(5,2,7)' de betreffende plaatjes uit de array worden gehaald (in dat geval dus drie verschillende plaatjes (5,2 en 7) uit drie verschillende arrays).

    In de source zie je binnen de <img>-tag het plaatje 'img_eb_off.gif' aangeroepen worden. Dit plaatje staat echter ook al in een van de zonet genoemde arrays… (de onmouseout-functie zorgt er in dit geval voor dat dit plaatje 'img_eb_off.gif' uit de array wordt gehaald en weer als het ware wordt 'teruggezet' op dezelfde plek als waar het al stond als de gebruiker van de hotspot af gaat met z'n muis…)

    Mijn vraag zal nu dus duidelijk zijn: hoe/met welke code haal ik binnen de <img> tag het plaatje 'img_eb_off.gif' ook meteen uit die array zonder het eerst specifiek te moeten noemen zoals ik nu doe…?! Anders moet ik nu nog naast het wijzigen van de bewuste plaatjes in de array ook het corresponderende plaatje wijzigen in de <img>-tag in de body… Dat kan volgens mij efficienter door in de <img>-tag meteen ook een verwijzing op te nemen naar de juiste plaatjes in de array 8)
  • [quote:b9a81075e3="Blux"]Voor de duidelijkheid hier een stukje code wat ik toepas…;

    <a href="site_02.htm" target="_self" onmouseover=chgSet02(5,2,7) onmouseout=chgSet02(4,1,1)><img src="image/img_eb_off.gif" width="77" height="26" border="0" name=siteB></a>

    De benodigde plaatjes staan in een array in de header…
    [/quote:b9a81075e3]
    Er zijn meerdere mogelijkheden…
    Hoe ziet de functie chgSet02(…) en de array eruit?
  • De bijbehorende functie ziet er als volgt uit…;

    function chgSet02 (s,t,c)
    {
    document.images.siteB.src = site.src;
    document.images.titel.src = titel[t].src;
    document.images.screenshot.src = screenshot[c].src;
    }


    De drie arrays, waar ik de plaatjes 'site', 'titel' en 'screenshot' uit haal, zijn (uiteraard) hetzelfde opgebouwd. Het gaat me in dit geval dus om het plaatje 'img_eb_off.gif' in de array 'site'…;

    var site = new Array;
    site[7] = new Image; site[7].src = "image/img_eb_off.gif";



    Ik hoop dat je hier genoeg aan hebt - zoniet dan geef je maar een gil :) … Alvast bedankt voor je hulp, it's appreciated! 8)
  • Het lijkt erop dat je ook een chgSet01, chgSet03, etc. hebt ofzo?

    Gaat het maar om één siteB, titel en screenshot?

    Ik zou het volgende doen….
    [list:d1a5e077d2]
    - de onmouseover en onmouseout verwijderen uit de HTML
    - de standaard img.src zetten op een "bezig_met_laden.gif"-plaatje.
    - naast het samenstellen van je array, direct daarna het plaatje toekennen aan het img-object. Idem voor onmouseover en onmouseout events. Dit d.m.v. DOM/javascript.
    [/list:u:d1a5e077d2]

    Wellicht dat er nog voorbeeldcode volgt door mij of iemand anders …
  • emm, dit is denk ik al wat te hoog gegrepen voor mij… :(

    Ik heb inderdaad ook een chgSet01, chgSet03, etc.

    In mijn eerste stukje code hierboven zie je de link <a href="site_02.htm" (en verder) aangeroepen worden > deze link maakt gebruik van de functie chgSet02 om op drie verschillende plekken in de site een ander plaatje te tonen dan het initiele plaatje wat al op die verschillende plekken staat.

    Tussen de twee tags van deze link wordt m.b.v. de <img>-tag het initiele plaatje geladen & ook wordt binnen deze zelfde tag meteen aangegeven dat het één van de plekken is waar een plaatje gewijzigd moet worden door de functie chgSet02 (dmv name=siteB)…

    Het liefst hou ik het zoveel mogelijk zoals het nu is en zou ik gebruik willen maken van; <img ..stukje-code-wat-het-juiste-plaatje-uit-de-array-haalt.. name=siteB>… (sorry als ik eigenwijs overkom :-? )

    Is dat laatste mogelijk…? Om mbv een stukje javascript of code direct binnen de huidige <img>-tag te verwijzen naar een specifiek plaatje in de array en de rest te laten zoals het is…? Dat geeft mij voor nu even het minste werk en zo blijft het namelijk 't best behapbaar voor me denk ik…

    Again - alvast bedankt voor je hulp! :wink:
  • Oh ja - de plekken 'siteB', 'titel' en 'screenshot' zijn inderdaad unieke plaatsen binnen de site - die komen elk maar op 1 plek voor in m'n site -, maar ik heb wel een array met verschillende screenshot-plaatjes, en een array met verschillende 'titel'-plaatjes etc.

    De afzonderlijke functies (chgSet01, chgSet02 etc.) halen hun 'eigen' screenshot, titel en button-afbeelding uit de verschillende arrays. De functie zelf wordt weer aangeroepen door een eventhandler (onmouseover & onmouseout in dit geval) binnen de betreffende link waar de gebruiker op kan gaan staan…
  • Een plaatje:
    [code:1:ecda59a961]
    <img src="tijdelijkplaatje.gif" alt="…" id="iets" class="hover">
    [/code:1:ecda59a961]
    Bij de volgende javascript op de pagina:
    [code:1:ecda59a961]
    var a = new Array();
    a['iets'] = new Array('img_normaal.gif', 'img_over.gif');
    window.onload = function() {
    var imgs = document.getElementsByTagName('img');
    for(var i=0;i<imgs.length;i++) {
    if(imgs[i].className=='hover' && a[imgs[i].id]) {
    imgs[i].onload=function() { imgs[i].setAttribute('src', a[imgs[i].id][0]); }
    imgs[i].onmouseover=function() { imgs[i].setAttribute('src', a[imgs[i].id][1]); }
    imgs[i].onmouseout=function() { imgs[i].setAttribute('src', a[imgs[i].id][0]); }
    }
    }
    }
    [/code:1:ecda59a961]
    Uitleg
    [list:ecda59a961]
    [*:ecda59a961]Het script zoekt naar plaatjes die "hover" als class hebben.
    [*:ecda59a961]Voor elk gevonden plaatje met deze class wordt gekeken of er een element in array "a" bestaat met het id van dit plaatje als key. Voor het plaatje met id "test" zou bijvoorbeeld als volgt een array-element gedefinieerd kunnen worden:
    [code:1:ecda59a961]a['test'] = new Array('img_test_normaal.gif', 'img_test_mouseover.gif');[/code:1:ecda59a961]
    [*:ecda59a961]Als er zo'n array-element bestaat, wordt ingesteld dat zodra het plaatje geladen is de src-attribuut van het plaatje ingesteld wordt op het eerste element van de array (in het voorbeeld dus "img_normaal.gif"). Hetzelfde plaatje wordt geladen als de "onmouseout"-actie plaatsvindt.
    [*:ecda59a961]Voor de "onmouseover"-actie wordt ingesteld dat als deze plaatsvindt het src-attribuut van het plaatje wordt ingesteld op het tweede element van de array.
    [/list:u:ecda59a961]
    Ik hoop dat je er wat aan hebt!
  • [quote:f2a8360f2f="Stijn."]Een plaatje:
    [code:1:f2a8360f2f]imgs[i].onload=function() { imgs[i].setAttribute('src', a[imgs[i].id][0]); [/code:1:f2a8360f2f][/quote:f2a8360f2f]
    twijfel of dit wel goed gaat. krijg je hier geen oneindige loop van?
    de onload event wordt pas geactiveerd, na het laden van het plaatje…
  • Stijn, dankjewel voor je mogelijke oplossing, ik zal het eens wat verder proberen te doorgronden, kijken of het een goeie oplossing is voor m'n site…

    Toch lijkt me dit voor nu nog steeds even te bewerkelijk… Is er echt geen eenvoudig regeltje code voor binnen de <img>-tag waar ik direct de juiste array mee kan benaderen om het juiste plaatje neer te zetten op die plek waar de <img>-tag zelf al staat…?!

    Zoiets als <img src="javascript:array.site[0];" name=siteB> oid (ik tik nu zo maar even wat neer…!)
  • h4xX0r,

    Ik snap nu ongeveer waar je op doelde met je berichtje 'Ik zou het volgende doen….'

    Ik heb een nieuwe functie aangemaakt direct onder de betreffende array die het juiste plaatje uit de array haalt;

    function loadSite02 (x)
    {
    document.images.siteB.src = site[x].src;
    }


    Beneden in de html waar het plaatje moet komen te staan heb ik de volgende code opgenomen;

    <a href="site_02.htm" target="_self" onmouseover=chgSet02(5,2,9) onmouseout=chgSet02(4,1,1)><img src="image/bezig_met_laden.gif" onload="loadSite02(4)" width="77" height="26" border="0" name=siteB></a>

    1) Eerst wordt er nu een 'bezig_met_laden'-plaatje neergezet,

    2) Op het moment dat dit plaatje geladen is wordt mbv de event handler 'onload' de functie 'loadSite02' aangeroepen.

    3) Vervolgens verschijnt met behulp van 'loadSite02' inderdaad het betreffende plaatje uit de array op de plek van het 'bezig_met_laden'-plaatje,

    4) Alleen krijg ik vervolgens een pop-upje met de melding 'stack overflow at line: 0'….
    Deze melding krijg ik ook opnieuw wanneer ik met de muis over het plaatje beweeg (en daarmee dus de de functie onmouseover uit de <a>-tag 'activeer'), en vervolgens nog een keer deze melding als ik met de muis weer van het plaatje af ga (waardoor 'onmouseout' geactiveerd wordt)…

    Is er een manier om dit af te vangen, waarbij de eerste keer al deze melding niet verschijnt bij het laden van het plaatje - en ik daarbij dus ook de onmouseover en onmouseout in de <a>-tag kan laten staan…?!

    Thanks alvast voor je tijd & aandacht!
  • >> is dit toevallig ook die 'oneindige loop' waar je het over had uit Stijn z'n voorbeeld, omdat ik de onload-event ook hier oproep na het laden van het plaatje…?

    Waardoor het geheugen volloopt en je die stack overflow krijgt…?! :(
  • Er zat inderdaad een foutje in m'n script bij de imgs.onload, heb het even verbeterd en ook meteen een testpagina gemaakt:

    http://stijn.gamerzheaven.nl/tests/JS4.htm

    (vorige script had ik gewoon even snel uit de losse pols getypt, vandaar)

    Ik wil je trouwens aanraden je HTML en Javascript een beetje te scheiden. Het is overzichtelijker en bespaart bandbreedte. Dus geen onmouseover enz. meer in de html-tags, maar document.getElementById('iets').onmouseover = … in de JS. En je javascript in een apart bestand in plaats van "inline".
  • [quote:a371fd130d="Blux"]Ik snap nu ongeveer waar je op doelde met je berichtje 'Ik zou het volgende doen….'
    [/quote:a371fd130d]
    Ik heb de code als volgt aangepast en rekening gehouden met je wens om de code zoveel mogelijk intact te laten…
    [code:1:a371fd130d]
    function Initialisatie()
    { var el;
    el = document.getElementById('site01');
    el.onmouseover=function() {chgSet01(5,2,9);}
    el.onmouseout=function() {chgSet01(4,1,1);}
    el.onmouseout();

    el = document.getElementById('site02');
    el.onmouseover=function() {chgSet02(5,2,9);}
    el.onmouseout=function() {chgSet02(4,1,1);}
    el.onmouseout();

    el = document.getElementById('site03');
    el.onmouseover=function() {chgSet03(5,2,9);}
    el.onmouseout=function() {chgSet03(4,1,1);}
    el.onmouseout();
    }

    function addEvent(obj, eventType, afunction, isCapture)
    { // W3C DOM
    if (obj.addEventListener)
    { obj.addEventListener(eventType, afunction, isCapture);
    return true;
    }
    else
    { // Internet Explorer
    if (obj.attachEvent)
    { return obj.attachEvent("on"+eventType, afunction);
    }
    else
    { return false;
    }
    }
    }

    addEvent(window,'load',Initialisatie,false);
    [/code:1:a371fd130d]
    <a
  • Yes…! Thanks a lot, h4xX0r! :D

    Ziet er mooi uit, die code, en is goed door me te volgen. Hier ga ik mee aan de slag in de gehele pagina…

    Mocht ik verder geen vragen meer tegenkomen, dan laat ik je het resultaat zien wanneer de site klaar is… 8)

    Stijn, jij ook bedankt voor je input, dat script van jou ga ik ook nog beter bestuderen… En inderdaad, je hebt gelijk wat betreft het zoveel mogelijk scheiden van het javascript en html, hou ik zeker rekening mee in de toekomst. Daaraan kan je maar weer zien dat ik vooral vormgever ben en minder 'programmeur' :wink:
  • Nog even een vraagje…

    Kan je -binnen- het ene js-bestand verwijzen naar een ander js-bestand > naar een array binnen een ander js-bestand…?!

    Alvast bedankt voor het antwoord… 8)
  • niemand een antwoord op m'n laatste eenvoudige vraag…?! ^ :roll: ^
  • Had het uitgestest (dat kun je natuurlijk zelf ook doen) maar was vergeten een reply te plaatsen.

    Het kan.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.