[JS / XHTML] link toevoegen aan veranderend plaatje

[Verwijderd]

Goedeavond jongens,

Ik zit nog lekker laat in de tuin te werken aan een website die ik moet ontwerpen voor iemand waarop zij haar portfolio wil tonen. Nu heb ik een heel leuk scriptje wat het mogelijk maakt om een plaatje te laten veranderen door een ander wanneer je op een link klikt, maar ik moet hier wat aan toevoegen.

Hetvolgende heb ik:

code:

<!-- BEGIN CONTENT -->
<div id="content">

<div id="column">

<div id="showcase">

<script type="text/javascript" language="javascript">
function showPic (whichpic) { 
    if (document.getElementById) { 
        document.getElementById('placeholder').src = whichpic.href; 
        if (whichpic.title) { 
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
        } else { 
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
        } 
        return false; 
    } else { 
        return true; 
    } 
}
</script>

<h1>Portfolio</h1>

<div class="left">
<ul>
<li><a href="#">[img]"upload/portfolio/master1/Master1-1.jpg"[/img]</a></li>
</ul>
</div>

<div class="right">
<ul>
<li><a onclick="return showPic(this)" href="upload/portfolio/master1/Master1-1.jpg" title="M1 Twist">[img]"upload/portfolio/master1/Master1-1.jpg"[/img]</a></li>
<li><a onclick="return showPic(this)" href="upload/portfolio/master2/Master2-1.jpg" title="M2 Living Tissue">[img]"upload/portfolio/master2/master2-1.jpg"[/img]</a></li>
<li><a onclick="return showPic(this)" href="upload/portfolio/T7/T7-1.jpg" title="T7 IJsmachine">[img]"upload/portfolio/T7/T7-1.jpg"[/img]</a></li>
</ul>
</div>

</div>

<div id="entry"><strong id="desc">Tekst</strong></div>

</div>
</div>
<!-- END CONTENT -->

Op zich al goed gelukt, maar wat ik nu moet doen is aan de 'placeholder' een link toevoegen.
Deze 'placeholder' dus:

code:

<a href="#">[img]"upload/portfolio/master1/Master1-1.jpg"[/img]</a>

De link moet tegelijk veranderen met het plaatje. Hij moet doorlinken naar een andere pagina waarop meer informatie te vinden is over het betreffende project.

Ik heb al wel wat gezocht, maar ik kom er helaas niet uit. Ook heb ik al iets toe proberen te voegen aal de <a href>.. een id dat ik dan weer wilde uitlezen met een hreflang.. maar dat werkte niet, ook kreeg ik het javascriptje niet voor elkaar. Ik was waarschijnlijk helemaal fout bezig,.. maar toch geprobeerd, wellicht deed ik wel iets goed (perongeluk )

Weet iemand van jullie een mogelijkheid om niet alleen het plaatje te laten veranderen, maar er dus ook een link aan toe te voegen?

Thanks!

[corani]

kun je niet een onClick event aan het plaatje hangen? in plaats van een link?
eventueel kun je ook met innerHTML een link + plaatje in een div schrijven, maar dat lijkt me een iets minder mooie oplossing

[Fuzzillogic]

Neem simpelweg de parent van je placeholder, dan heb je meteen het anchor element:

JavaScript:

document.getElementById('placeholder').parentNode.href="http://nieuwe link";

Off-topic, maar extragratis service:

document.write is een beetje ouderwets. En werkt ook niet meer in goed geserveerde XHTML. _{Bizar genoeg gebruikt Microsoft het als de 'officiele' work-around voor eolas-patent.}. En het language-attribuut van <script> is depricated

En dit is netter voor je border-probleem bij de images:

Cascading Stylesheet:

a img { border: none;}

[ Voor 58% gewijzigd door Fuzzillogic op 13-06-2006 00:32 ]

[Verwijderd]

Nexxennium schreef op dinsdag 13 juni 2006 @ 00:24:
Neem simpelweg de parent van je placeholder, dan heb je meteen het anchor element:

document.getElementById('placeholder').parentNode.href="http://nieuwe link";

hmm.. maar kan ik dit dan voor ieder plaatje ook een andere link laten worden? Ik snap het parent idee wel, maar ik weet niet hoe ik de link dan moet uitlezen.

[Fuzzillogic]

Verwijderd schreef op dinsdag 13 juni 2006 @ 00:28:
hmm.. maar kan ik dit dan voor ieder plaatje ook een andere link laten worden? Ik snap het parent idee wel, maar ik weet niet hoe ik de link dan moet uitlezen.

Dus als je op een plaatje klikt, dan moet er een nieuwe verschijnen? Wat je zou kunnen doen is alle benodigde linkjes al klaar zetten, met CSS op display: none; zetten, en met javascript weer aanzetten en/of verschuiven.

Of je zou een JS-arraytje kunnen maken met de linkjes erin.

[Verwijderd]

Thanks jongens, voor alle hulp.

Dit ga ik ook zeker even fiksen

Nexxennium schreef op dinsdag 13 juni 2006 @ 00:24:
En dit is netter voor je border-probleem bij de images:

Cascading Stylesheet:

a img { border: none;}

Verder heb ik een scriptje gevonden, dat ik goed kan aanpassen.
http://www.javascriptkit....ript2/rolldifferent.shtml