[client side javascript] dynamisch aanpassen imageMap

[Reveller]

Situatie
op mijn webpagina staan onder andere:
- 5 tumbnails en
- 1 grote foto. Hieraan heb ik de naam 'lf' (lead-feature) toegekend.

Wanneer iemand op 1 van de 5 tumbnails klikt, wordt er op de plaats van de image genaamd 'lf' een grote afbeelding van dat product gezet. Rechtsonderaan deze grote foto's staat 'klik voor meer info!'. Als iemand op dat stuk van de foto klikt, moet hij worden doorverwezen naar een bepaalde pagina. Dus als volgt:

stap 1: gebruiker klikt op tumbnail 1:

HTML:

<a href="#" onclick="show('lf', 'lf1')">
  [img]"product1.gif"[/img]
</a>

stap 2: javascript gaat lopen:

HTML:

function show(targetName, targetImage){
    document.images[targetName].src = eval(targetImage + ".src");
}

stap 3: uiteindelijk krijgt deze img-tag als src de waarde "product1.gif". Default laat de image genaamd 'lf' een plaatje genaamd 'welcome.gif' zien:

HTML:

[img]"welcome.gif"[/img]

Nu mijn vraag
Zoals gezegd maak ik gebruik van een imagemap genaamd 'lf'. Deze ziet er als volgt uit en staat helemaal onder aan mijn pagina gedefinieerd:

HTML:

<map name="lf">
  <area shape="rect" coords="261,204,584,220" href="products.asp?id=1">
</map>

Je voelt hem al aankomen: als iemand op tumbnail 2 klikt (onclick="show('lf', 'lf2')"), en 'lf' (de grote foto) een vergroting van product 2 laat zien, wil ik graag dat de map genaamd 'lf' ook verwijst naar de goede pagina: products.asp?id=2.

stap 4: zou dus moeten zijn: imagemap wordt client-side, dynamisch aangepast aan het plaatje waar op is geklikt.

Dus mijn vraag - hoe kan ik er met een tweede onclick functie voor zorgen dat de imagemap naar de juiste pagina verwijst?

getrachte oplossing
ik had zelf het volgende geschreven:

HTML:

function changeImageMap(id){
    document.write("<map><area shape='rect' coords='261,204,290,220' href='products.asp?id='"+id+"></map>")
}

de tumbnail image tag zou er dan als volgt uitzien:

HTML:

<a href="#" onclick="show('lf', 'lf1'); changeImageMap('2')">
  [img]"product2.gif"[/img]
</a>

Dit werkt alleen niet correct - zodra ik op de tumbnail klik, loopt m'n hele pagina 'vast': alle html wordt vervangen door de regel '<map><area shape='rect' coords='261,204,290,220' href='products.asp?id=2"></map>'. Je ziet dat er id=2 staat, dus eea wordt wel doorgegeven...

Wie kan mij helpen dit script werkend te krijgen?
Ik hoop dat ik duidelijk ben in mijn uitleg

[.oisyn]

<h1>Javascript hoort in W&G!!!!</h1>
lees de quickstart guide nou eens

Programming & Webscripting -> Webdesign & Graphics

[Morrar]

Deze is al een keertje langsgeweest, en toen ook al door mij beantwoord: ZOEKEN dus...

Mah goed nog maar een keer: de map kun je niet aanpassen. De area is ook hetzelfde dus: roep met die map een JS functie aan en zorg dan in die functie dat je de goede pagina laadt!

ff in tekst:
- zorg ervoor dat zodra show() wordt aangeroepen er een variabele (neem: CurrURL) gezet wordt met het URL dat getoond moet worden.

- zorg dat de href van de <area> altijd naar bijvoorbeeld "javascript:showURL();" wijst

- maak een functie showURL() die er bijvoorbeeld zo uitziet:
function showURL()
{ self.location.href = CurrURL; //of een andere manier om het URL te openen...
}

Suc6

[Blorgg]

Lekkere reactie .oisyn

[Morrar]

Tsja ag, ik kan me die reactie wel voorstellen... De mods worden denk ik een beetje gek van al die mensen die niet ffies lezen (en dus ook niet zoeken ). Check verder es zijn lijst met posts, beetje helpdesk achtig mayb?