Onderwerp: [javascript] 1 href link met daarin verschillende variabele URL's mogelijk?

Wanneer je op www.autotrack.nl een occasion bekijkt en vervolgens op "meer foto's" klikt, dan kom je op een pagina waarop je die kan bekijken.

Als je op de thumbnail klikt dan wordt d.m.v. javascript de betreffende foto getoond zonder refresh.

So far so good. Maar is het mogelijk om aan de betreffende foto nog een specifieke href link te hangen? Bijv. naar een nog grotere foto.

Ik ben al de hele dag aan het stoeien maar zonder resultaat. Ik heb nog wat andere sites gechecked maar op geen van de sites zie ik wat ik wil, ik vraag me af of het uberhaupt mogelijk is?

Ik heb o.a. geprobeerd de href een "name" te geven en die dan variabel te maken afhankelijk van welk plaatje je aanklikt, maar het werkt niet.
Het lukt wel met de img scr op deze manier: document["holder"].src
Maar bijv. een: document["linkholder"].href werkt niet...

en als je daar nu eens een onclick event aan hangt? bij het laden van de kleine foto, kun je dan het onclick event wijzigen naar de goeie vergrootte foto.

Ja, daarmee werk ik om met de thumbnail het middelgrote plaatje te verversen.

Maar de a href onclick van de thumbnail is natuurlijk een andere link dan de link die het middelgrote plaatje moet krijgen om het grote plaatje te openen.

Dit is mijn onclick event van de thumbnail:
<a href="##" onclick="imgAct('img#teller#')" ><img src="uploads/#afb_klein#" alt="" width="96" border="0" /></a>

(ik werk met ColdFusion waarbij alles tussen # niet meer is dan een variabele).

Volgens mij kan ik niet met de ene href de inhoud van een andere href d.m.v. javascript veranderen, of zie ik wat over het hoofd?

gewoon meerdere acties in je onclick zetten ( of mooie function schrijven )

en ja je kan met JS meerdere urls openen, ik heb geen code bij de hand, maar de truck zit hem in de namen van de (i)frames.

Is misschien lightbox (http://www.lokeshdhakar.com/projects/lightbox2/) niet een idee voor je? Zie je redelijk veel gebruikt worden nu en kan je heel leuk customizen!

Okee, ik ga weer verder met die onclick.

Ik hoef geen meerdere URLS tegelijk te openen, steeds maar 1 URL, maar wel afhankelijk van welk plaatje er wordt getoond d.m.v. een eerdere onclick.

Ik gebruik geen (i)frames.

Lightbox komt er later overheen maar dat kan pas als dit eerst werkt

Ik had hierboven mijn onclick link gepost. Maar mag ik vragen hoe de "target" a href eruit dient te zien? Met target bedoel ik hier niets met frames maar de href die een verwisselbare URL moet krijgen.

ik volg je niet helemaal, heb je een link van die autotrack url ?

Want ik klik door en zie nergens de tekst "meer fotos" staan.

http://www.autotrack.nl/owa_dima/owa...L&o_id=5324273

en dan "meer foto's"

Ok, wat ik zie: de meer fotos is een gewone a href ... ok prima,
en de pagina erachter:
http://www.autotrack.nl/owa_dima/owa...L&o_id=5324273

werkt met een function



maar even wat anders ... als jij afhankelijk van het gekozen plaatje ... een andere pagina wil tonen met dezelfde "link" ....
waarom niet een variabele in javascript aanmaken
var klikurl = 'http://www.google.com';

en dan een function aanroepen die
A) de foto ophaalt
B) zorgt dat die klikurl geupdate wordt ..


daarna is het simpel, je maakt een function aan opencustomurl() in je onclick
en die leest je klikurl in en zorgt dat je naar de pagina gaat ..



dwz als ik het goed begrepen heb ...


update de $ weggehaald, tis javascript geen PHP

Ja, dat is de goede pagina

A) krijg ik voor elkaar
B) niet

(het lukt me uiteraard wel als ik ververs na het aanklikken van een thumb maar dat is niet de bedoeling )

ok, maar waar loop je dan vast bij punt B ) ?

Ik heb een functie gemaakt die het plaatje zonder te verversen omwisselt. Maar de href (die nu nog leeg is) krijg ik niet meeveranderd. Ik zal hieronder mijn code posten. Maar als ik de functie imgAct wil uitbreiden gaat het mis, ik doe iets fout.

<script language="JavaScript" type="text/javascript">
<!--
// Browser Detect
bName = navigator.appName; //detect for Netscape 3+ or IE 4+
bVer = parseInt(navigator.appVersion);
if ((bName == "Netscape" && bVer >= 3) ||
(bName == "Microsoft Internet Explorer" && bVer >=4)) br = "n3";
else br = "n2";
// Create image objects, preload all active and inactive images.
if (br== "n3") {

// Active Spotlight Callouts

img1spot = new Image();
img1spot.src = "uploads/0c1a51b9cd9285be6774f1faa9e890061.jpg";
img2spot = new Image();
img2spot.src = "uploads/5508d8d50d5cb382c744601879f9abb6.jpg";
img3spot = new Image();
img3spot.src = "uploads/939b5c1047fa7dca64d5c096217417e6.jpg";
img4spot = new Image();
img4spot.src = "uploads/879c217619a4aa0b80bf825ec876006f.jpg";
img5spot = new Image();
img5spot.src = "uploads/8bae88baebfb986cdebc6798ad54d235.jpg";
img6spot = new Image();
img6spot.src = "uploads/b78f18c1d10b7f6439f0be8e87fbf63f.jpg";

}

function imgAct(imgName) {
if (br == "n3") {
document["holder"].src = eval(imgName + "spot.src");
}
}

function imgInact(imgName) {
if (br == "n3") {
document["holder"].src = "uploads/0c1a51b9cd9285be6774f1faa9e890061.jpg";
}
}


//-->
</script>






<a href=""><img name="holder" src="uploads/0c1a51b9cd9285be6774f1faa9e890061.jpg" alt="" width="400" border="0" /></a><br />
<br />

<table border="0" cellpadding="5" cellspacing="0">
<tr valign="top">
<td><a href="#" onclick="imgAct('img1')" ><img src="uploads/klein0c1a51b9cd9285be6774f1faa9e890061.jpg" alt="" width="90" border="0" /></a></td>
<td><a href="#" onclick="imgAct('img2')" ><img src="uploads/klein5508d8d50d5cb382c744601879f9abb6.jpg" alt="" width="90" border="0" /></a></td>
<td><a href="#" onclick="imgAct('img3')" ><img src="uploads/klein939b5c1047fa7dca64d5c096217417e6.jpg" alt="" width="90" border="0" /></a></td>
<td><a href="#" onclick="imgAct('img4')" ><img src="uploads/klein879c217619a4aa0b80bf825ec876006f.jpg" alt="" width="90" border="0" /></a></td>
</tr>
</table>

De bovenstaande code werkt perfect. Alleen de link ontbreekt dus

Dan hier de uitleg van mijn probeersel:

De <a href=""> wilde ik een naam geven zodat ik de imgAct functie kon uitbreiden met deze regel:
document["linkholder"].href = eval(imgName + "spot.href");
maar dat lukte niet. ik had hem erbij gezet in het rijtje onder new Image() maar het is natuurlijk geen image...

Dit brengt me op een volgend punt. Als ik nou straks 10 highres images met javascript op mijn pagina zet dan gaat hij ze volgens mij wel preloaden. Wat eigenlijk niet de bedoeling is, want hij mag ze pas gaan inladen als je op het middelgrote plaatje klikt.

Anyway, alvast erg bedankt voor de moeite die je hebt genomen!!!

function imgAct(imgName) {
if (br == "n3") {
document["holder"].src = eval(imgName + "spot.src");
}
}

daar moet je wezen voor je url variable

Ja, dat dacht ik al, zie ook mijn eerste post waarin ik dit erin probeerde te zetten:

document["linkholder"].href werkt niet...

Maar ik ben inmiddels wat verder. Ik gaf per ongeluk aan de href een name="bla" maar dat moest een id="bla" zijn. En het volgende werkt ook:

function imgAct(imgName,id) {
if (br == "n3") {
document["holder"].src = eval(imgName + "spot.src");
document.getElementById(id).href = 'http://www.irt.org';
}
}

Nu nog de vaste voorbeeld URL door de juiste betreffende URLs vervangen.