[CSS XHTML] image rotatie zonder herladen

[Verwijderd]

Hey jongens,

Ik weet niet of de titel helemaal goed is, want ik weet niet precies hoe men het noemt. Wellicht kom ik een heel eind als ik het gewoon uitleg

Ik werd gevraagd om een klein portfolio-websiteje in elkaar te flansen. Dit doe ik gewoon met CSS en XHTML enzo, verder geen poespas.. Alleen nu moet er 1 klein ietsie-pietsie dingetje in, dat ik gewoon niet begrijp en zelfs helemaal nergens kan vinden

Op de frontpage van de website komen drie (3) plaatjes te staan. Dit zijn fotootjes van een gebouw dat de persoon heeft ontworpen. Nu moet het zo zijn dat wanneer je op een linkje, dat eronder komt, 'verder' klikt.. dat de fotos een stukje opschuiven.

Dus..

FOTO 1 | FOTO 2 | FOTO 3

wanneer je dan op het linkje VERDER klikt.. moet er komen:

FOTO 2 | FOTO 3 | FOTO 4


Snapt iemand dit? Ik kan zelfs nergens een voorbeeldje vinden, ja.. op hyves. Maar daar gaat het niet zoals ik wil.. die laden een totaal nieuw soort van iFrame in, en dat wil ik natuurlijk niet.

Ik wil gewoon dat FOTO 1 t/m 10 ingeladen wordt, maar dat je telkens maar 3 fotos ziet.

Weten jullie wellicht waar zoiets te vinden is, of hebben jullie dit al ooit eens gemaakt en kun je me vertellen hoe?

Help me Thanks!

[Cloud]

Dit soort zaken werken vaak met Javascript, of nog vaker Flash/Shockwave en dergelijke. Met alleen CSS kom je er niet helaas. Ik heb ook even voor je gezocht, en alternatieven voor dit soort technieken kan ik ook niet vinden.

Tis helaas niet een simpel te bouwen iets

[disclaimer]voor zover ik weet[/disclaimer]

[ Voor 11% gewijzigd door Cloud op 07-06-2006 15:08 ]

[Verwijderd]

...een iframe gebruiken en met ankers navigeren naar de volgende drie?

[Cloud]

Verwijderd schreef op woensdag 07 juni 2006 @ 15:09:
...een iframe gebruiken en met ankers navigeren naar de volgende drie?

Dat moet ook wel kunnen, alleen geeft de TS in z'n startpost aan:

Verwijderd schreef op woensdag 07 juni 2006 @ 14:58:
die laden een totaal nieuw soort van iFrame in, en dat wil ik natuurlijk niet.

Dus ik weet niet of SnoRt dat wel wil

[André]

Welke scripts heb je al gevonden en wat werkte er niet? Wat heb je zelf al geprobeerd? Dit is min of meer een scriptrequest op deze manier.

[Verwijderd]

wolkje schreef op woensdag 07 juni 2006 @ 15:27:
[...]

Dat moet ook wel kunnen, alleen geeft de TS in z'n startpost aan:

[...]

Dus ik weet niet of SnoRt dat wel wil

hehe.. ik zal eens kijken naar die mogelijkheid.

Ik zat echter meer iets te denken van een <div>je van inhoud veranderen ofzo door het op een linkje klikken. Maar een iFrame moet in principe ook werken. Heb alleen zo'n hekel aan iFrame's

Toch bedankt hoor..
Als er nou eens voorbeeldjes zouden zijn

[DamadmOO]

3 divjes in je code en dan met javascript de innerhtml van deze divjes veranderen op het moment dat er op de verder link geklikt wordt. Als je alle 10 de plaatjes wil preloaden kan je deze gewoon als laatste voor je </body> zetten met een height=0 en een width=0. dan worden ze ingeladen zodra de rest van de pagina ingeladen is.

edit:
1 divje met 3 plaatjes kan natuurlijk ook

[ Voor 10% gewijzigd door DamadmOO op 07-06-2006 15:35 ]

[Verwijderd]

Je ziet, er zijn zat oplossingen voor te verzinnen,.. ga aan de slag!

[Verwijderd]

DamadmOO schreef op woensdag 07 juni 2006 @ 15:33:
3 divjes in je code en dan met javascript de innerhtml van deze divjes veranderen op het moment dat er op de verder link geklikt wordt. Als je alle 10 de plaatjes wil preloaden kan je deze gewoon als laatste voor je </body> zetten met een height=0 en een width=0. dan worden ze ingeladen zodra de rest van de pagina ingeladen is.

dit klinkt inderdaad goed. eens kijken of dit mogelijk is met een scriptje dat ik al heb liggen, heb je wellicht anders een idee hoe ik dit met javascript aan kan gaan pakken?

[Verwijderd]

André schreef op woensdag 07 juni 2006 @ 15:31:
Welke scripts heb je al gevonden en wat werkte er niet? Wat heb je zelf al geprobeerd? Dit is min of meer een scriptrequest op deze manier.

ow sorry,.. ik had wel al wat zelf geprobeerd. Maar ik kwam niet verder dan een script voor plaatjes.
Met de plaatjes is ook al gelukt, maar dan verander ik alleen een plaatje als ik op een ander plaatje klik.

code:

<div id="content">
<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>Mijn portfolio </h1>
<p>
<a onclick="return showPic(this)" href="inc/images/50jaartue/opdracht1 camera3.jpg" title="Raar gebouw van rechts">[img]"inc/images/50jaartue/opdracht1[/img]</a>
<a onclick="return showPic(this)" href="inc/images/50jaartue/opdracht2 camera1.jpg" title="Groen met iets geks en raars">[img]"inc/images/50jaartue/opdracht2[/img]</a>
<a onclick="return showPic(this)" href="inc/images/50jaartue/opdracht2 camera2.jpg" title="iek.. ziet er niet uit!">[img]"inc/images/50jaartue/opdracht2[/img]</a>
</p>

<p>[img]"inc/images/50jaartue/opdracht1[/img]</p>
<p id="desc">Gek gebouw</p>
</div>

Dit heb ik voor de plaatjes, maar ik dacht.. dat ik ook wel een volledige div hiermee zou kunnen veranderen, dat gaat helaas niet.. althans. met mijn kennis van javascript.

[Verwijderd]

Hoi,

Je kan dit ook doen door de afbeeldingen aan elkaar te plakken en ze vervolgens instellen als achtergrondafbeelding van een divje met de breedte van 3 plaatjes.

Het achtergrondplaatje is dus breder als de breedte van je divje.

En dan de background-position eigenschap wijzigen met javascript.

Kijk maar eens even!

P.S.
Dit is mijn eerste berichtje op dit forum, hopelijk nog vele.

[Verwijderd]

Je kan ook een div nemen met 'overflow: hidden' ter breedte van 3 plaatjes met hierbinnen een div met de 10 plaatjes, en deze laatste div met javascript positioneren binnen de 1e div.

[ Voor 6% gewijzigd door Verwijderd op 07-06-2006 20:30 ]