Plaatje in tabel verwisselen

[nickbear]

Beste mensen,

Ik heb eens een internetsite gezien, waarvan de indeling bestond uit een tabel dat in vieren opgedeeld was. De 2 linker tabellen stond informatie in over het project, en 1 van de rechter tabellen stond een fototje van het project. Daaronder stond een knop met 'verder' zodat het plaatje zich verwisselde (4 verschillende plaatjes).

Welnu, dit wil ik ook. Weet alleen niet in welke hoek ik het precies moet zoeken.

- Kan voor elk plaatje nieuwe HTML laden, lijkt me geen oplossing.
- Kan iframes gebruiken, maar hoe krijg ik het voor elkaar dat elke plaatje verwisseld word na het indrukken van die knop.
- Iets met een div.

Zou iemand mij in de juiste richting willen helpen?

Bij voorbaat dank!

[BtM909]

Makkelijkste is om daarvoor javascript te gebruiken. Waar je dus naar kan zoeken is hoe je met javascript bestaande plaatjes vervangt. Als je google daarvoor gebruikt, zul je zien dat er een hoop tutorials beschikbaar zijn om dit 'probleem' aan te pakken

Succes

[sariel]

Voor een stapel javascriptjes die het bovenstaande doen, klik

[nickbear]

swapimage ben ik wel mee bekend. Bijvoorbeeld onmouseover swapimage. Maar kan ik met een link waar je op klikt, 4x een ander plaatje erachter hangen?

groetjes (en bedankt voor de razend snelle reactie)

[BtM909]

Volgens mij kan je hier op GoT in dit subforum zelfs een voorbeeld vinden die een soort slideshow (wellicht is dat je magisch woord) weergeeft.

[nickbear]

Slideshow, dan krijg ik voornamelijk scripts met plaatjes die zichzelf verwisselen of zich automatisch voorbij laten komen... het kost me nog meer tijd dan dat ik dacht, een simpel plaatje te verwisselen. (geef de moed nog niet op hoor)

[CH4OS]

JavaScript:

function imgChange(nieuwPlaatje)
{
    document.getElementById('plaatje').src = "img/" + nieuwPlaatje;
}

HTML:

<a href="javascript:imgChange('image1.jpg')">Test</a>
<a href="javascript:imgChange('image2.gif')">Test2</a>
<img src="" id="plaatje" />

Deze is simpel, maar zou moeten werken...
Dit is overigens geen slideshow of iets dergelijks, maar vervangt het plaatje, als je een optie kiest... Dat was toch je bedoeling?

Voor een slideshow kan je dus deze functie makkelijk uitbreiden...

[ Voor 24% gewijzigd door CH4OS op 21-09-2006 09:05 ]

[nickbear]

GJ-tje schreef op donderdag 21 september 2006 @ 09:02:

JavaScript:

function imgChange(nieuwPlaatje)
{
    document.getElementById('plaatje').src = "img/" + nieuwPlaatje;
}

HTML:

<a href="javascript:imgChange('image1.jpg')">Test</a>
<a href="javascript:imgChange('image2.gif')">Test2</a>
<img src="" id="plaatje" />

Deze is simpel, maar zou moeten werken...
Dit is overigens geen slideshow of iets dergelijks, maar vervangt het plaatje, als je een optie kiest... Dat was toch je bedoeling?

Voor een slideshow kan je dus deze functie makkelijk uitbreiden...

Dit lijkt er inderdaad veel op, maar kan ik onder 1 link diverse plaatjes zetten i.p.v. 1 link 1 plaatje?

[Tepel]

JavaScript:

var counter = 1;
function imgChange()
{
    document.getElementById('plaatje').src = "img/plaatje_" + counter + ".jpg";
    counter++;
}

HTML:

<input type="button" name="yaarrrr" value="Next me Hearties!" onclick="imgChange();" />

en nu alleen nog de plaatjes
plaatje_1.jpg, plaatje_2.jpg, plaatje_3.jpg, plaatje_<x>.jpg aanmaken en voila

[crisp]

javascript: links zijn evil en de oorzaak van veel problemen (in m.n. IE)
Op het moment dat je een javascript: pseudo-protocol gebruikt zou er al een bel moeten gaan rinkelen dat een anchor gewoonweg niet het juiste element is om ervoor te gebruiken.

[hobbeldebobbel]

crisp schreef op vrijdag 22 september 2006 @ 01:18:
javascript: links zijn evil en de oorzaak van veel problemen (in m.n. IE)

ik gebruik ze nu best vaak maar ben tot nutoe niet echt problemen tegengekomen. Dus de beste manier is dan dus: <a href="#" onclick="functie()">link</a>
wat kan er dan eigenlijk nog meer mis gaan door een zoals jij dat noemt pseuo protocol?

[nickbear]

Ik heb ook al een passende oplossing gevonden, hij is hier te bekijken.

http://members.chello.nl/d.bosch9/selecteren/plaatjes3.html

[user109731]

hobbeldebobbel schreef op vrijdag 22 september 2006 @ 09:22:
[...]

ik gebruik ze nu best vaak maar ben tot nutoe niet echt problemen tegengekomen. Dus de beste manier is dan dus: <a href="#" onclick="functie()">link</a>

Waarom gebruik je dan het A-element? Imo eigenlijk net zoiets als het gebruiken van tabellen voor layout dus, je gebruikt een tag die daar heel niet voor bedoeld is. Beter zou misschien een button of span zijn?

"het werkt", is geen excuus, dat doen tabellen ook

[crisp]

idd, als het geen link is gebruik dan geen anchor.
Een anchor is wel een geschikt element op het moment dat je 'm gebruikt voor een non-JS alternatief (plus het bijkomend voordeel dat het gespiderd kan worden):

HTML:

<a href="alternatief.html" onclick="AjaxShizzle();return false">doe iets</a>

[hobbeldebobbel]

tja maar als het wel een link is in de zin van hij veranderd de document.location.href ...... dit is trouwens niet om jullie te pesten hoor... maar ik vraag het me echt gewoon serieus af.