[JS / CSS] Content laten veranderen op tijd

[Verwijderd]

Heey jongens,

Allereerst sorry voor mijn vage titel. Mocht iemand na dit verhaal een beter alternatief hebben, dan hoor ik dat graag. Ik wist gewoon echt niet hoe ik het moest noemen Hier komt het probleem

Ik wil voor een website iets maken dat er uitziet als op de Fok!Frontpage. Misschien bezoeken jullie die wel eens en weten jullie meteen waar ik het over heb:



Op het plaatje zie je de prijsvraag. Niet dat ik op mijn website een prijsvraag wil , maar ik wel een soort techniek gebruiken zoals ze dat daar doen.

Zoals je ziet, zie je 3 verschillende dingen die je kunt 'winnen'. Deze drie dingen hebben allemaal een plaatje en na verloop van een paar seconden vliegt het van de ene prijs over naar de andere. Je kunt ook gebruikmaken van mouse-overs, dat stopt het allemaal.

Ik weet niet hoe een dergelijk script heet, anders had ik dat kunnen zoeken op de vele JavaScript-sites van het Internet Ook heb ik gekeken in de broncode van Fok!, maar daar ziet het er nogal vies uit,.. als ik dat zo mag zeggen.. Ik zie niet echt hoe ik het aan zou moeten passen.

Weten jullie iets?

[moozzuzz]

Bedoel je iets als op deze website (hier ligt de basis van je wens, neen)?

Volgens mij gewoon de inhoud van een div op tijd en stond veranderen?

[Verwijderd]

moozzuzz schreef op woensdag 04 oktober 2006 @ 17:25:
Bedoel je iets als op deze website (hier ligt de basis van je wens, neen)?

Volgens mij gewoon de inhoud van een div op tijd en stond veranderen?

zoiets inderdaad maar dan zou ik ook nog graag de optie hebben zoals op Fok!, dat er door de gebruiker zelf ook direct een specifieke keuze gemaakt kan worden.

Ik kwam op het idee om het te doen aan de hand van http://www.thecity.org. Daar heb je bovenaan een flash-applicatie. Nu vind ik flash-applicaties vies dus ik dacht, dat moet ook kunnen met CSS en JS

[Fuzzillogic]

Veruit het makkelijkst is om de diverse stukjes content achter elkaar in divjes te zetten, en dan simpelweg met [element].style.display="none" en [element].style.display="block" te tonen en te verbergen.

[moozzuzz]

Verwijderd schreef op woensdag 04 oktober 2006 @ 17:27:
zoiets inderdaad maar dan zou ik ook nog graag de optie hebben zoals op Fok!, dat er door de gebruiker zelf ook direct een specifieke keuze gemaakt kan worden.

Ik denk dat je adh van de code en de hint van Nexxennium je aardig op weg bent. Met wat uitbreiding en onMouseOver/onClick werk ben je waar je wilt zijn!

[Verwijderd]

Wat ik ongeveer wil bereiken is hetvolgende:



Wellicht dat het dan iets duidelijker is?

Ik wil dus ook enkel maar een plaatje aan de linker (wellicht rechterkant, moet nog even kijken) en aan de zijkanten dan een datum en een titel. Zoals je ziet heeft 1 titel een andere class dan de andere, deze is dan ook geselecteert op dat moment.

Ik hoef geen hele vlakken tekst elke keer te laten zien. Enkel een plaatje (wat vormgegeven kan worden met behulp van css).

[user109731]

* user109731 kreeg net een goed tentamencijfer terug...

HTML:

<script type="text/javascript">
var plaatjes = new Array("http://www.google.nl/intl/nl_nl/images/logo.gif", "http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif", "http://www.live.com/live/1.100.7.337/img/wl_jewel.gif");
var animatieAan = true;
var currentImage = 0;

function showPlaatje(index) {
  document.getElementById('plaatje').src = plaatjes[index];
}
function nextImage() {
  if (!animatieAan) return;
  
  currentImage = plaatjes[currentImage+1] ? currentImage+1 : 0;
  showPlaatje(currentImage);
}
window.onload = function() {
  setInterval(nextImage, 2000);
}
</script>

<a href="pagina1.htm" onMouseOver="animatieAan = false; showPlaatje(0)" onMouseOut="animatieAan=true">Pagina 1</a>
<a href="pagina2.htm" onMouseOver="animatieAan = false; showPlaatje(1)" onMouseOut="animatieAan=true">Pagina 2</a>
<a href="pagina3.htm" onMouseOver="animatieAan = false; showPlaatje(2)" onMouseOut="animatieAan=true">Pagina 3</a>

<p><img src="http://www.google.nl/intl/nl_nl/images/logo.gif" id="plaatje">

Eventueel kun je je images nog laten preloaden. Het gedeelte tussen onMouseOver kan misschien beter in 1 functie, zeker als het om veel links gaat, maar dat lijkt me niet zo moeilijk om zelf te veranderen. Tis nogal een mix engels/nederlands geworden...

edit:
getest, en nog iets geoptimaliseerd.

[ Voor 21% gewijzigd door user109731 op 04-10-2006 18:21 ]

[Verwijderd]

Grote prutser schreef op woensdag 04 oktober 2006 @ 17:49:
/me kreeg net een goed tentamencijfer terug...

<knip code>

Niet getest, maar het gaat om het idee he Eventueel kun je je images nog laten preloaden. Sorry voor de mix engels/nederlands, zie ik nu pas...

Thanks man! Ik heb hem even in een .html gegooid en het werkt Super! Ik ga er meteen mee aan de slag

[user109731]

Heb 'm nog iets ingekort, misschien handig om 'm opnieuw te kopieeren...

[Verwijderd]

Grote prutser schreef op woensdag 04 oktober 2006 @ 18:17:
Heb 'm nog iets ingekort, misschien handig om 'm opnieuw te kopieeren...

Mooi Nu werken de plaatjes inderdaad roterend met een linkje erachter. Wat ik alleen niet voor elkaar krijg is dat er per link een class toegevoegd kan worden wanneer deze geselecteerd is.

Heb je daar misschien een antwoord op? Dat zou helemaal top zijn
(vanzelfsprekend krijg je alle credits in de broncode )

[Fuzzillogic]

Waarom gebruik je niet gewoon CSS hover met een animated gif voor de animatie? Liever geen JS gebruiken als dat niet nodig is.

[Verwijderd]

Nexxennium schreef op woensdag 04 oktober 2006 @ 18:47:
Waarom gebruik je niet gewoon CSS hover met een animated gif voor de animatie? Liever geen JS gebruiken als dat niet nodig is.

Een animated gif? Het moet wel enigzins te bedienen zijn met een CMS

[user109731]

Verwijderd schreef op woensdag 04 oktober 2006 @ 18:34:
[...]
Wat ik alleen niet voor elkaar krijg is dat er per link een class toegevoegd kan worden wanneer deze geselecteerd is.

Als ik je goed begrijp maakt dat de boel wel wat complexer :

HTML:

<script type="text/javascript">
var images = new Array("http://www.google.nl/intl/nl_nl/images/logo.gif", "http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif", "http://www.live.com/live/1.100.7.337/img/wl_jewel.gif");
var currentLink, slideshow = true, currentImage = 0;

function showImage() {
    if (currentLink) currentLink.className = '';
    document.getElementById('image').src = images[currentImage];
  
    currentLink = document.getElementById('link'+currentImage);
    currentLink.className = 'active';
}
function nextImage() {
    if (!slideshow) return;
    currentImage = images[parseInt(currentImage)+1] ? parseInt(currentImage)+1 : 0;
    showImage();
}
function mouseOver(a) {
    slideshow = false;
    currentImage = a.id.substr(4);
    showImage();
}
window.onload = function() {
    setInterval(nextImage, 2000);
    showImage();
}
</script>
<style type="text/css">
    a.active { color:red }
    a { color:blue }
</style>
<a href="pagina1.htm" onMouseOver="mouseOver(this)" onMouseOut="slideshow=true" id="link0">Pagina 1</a>
<a href="pagina2.htm" onMouseOver="mouseOver(this)" onMouseOut="slideshow=true" id="link1">Pagina 2</a>
<a href="pagina3.htm" onMouseOver="mouseOver(this)" onMouseOut="slideshow=true" id="link2">Pagina 3</a>

<p><img src="http://www.google.nl/intl/nl_nl/images/logo.gif" id="image">

[crisp]

Nexxennium schreef op woensdag 04 oktober 2006 @ 18:47:
Waarom gebruik je niet gewoon CSS hover met een animated gif voor de animatie? Liever geen JS gebruiken als dat niet nodig is.

da's een verkeerde insteek; CSS is voor styling en JS voor behavior. CSS gebruiken voor behavior (zoals bijvoorbeeld de suckerfish dropdowns) is gewoon fout. De situatie hier is een grensgeval imo.

[Fuzzillogic]

crisp schreef op woensdag 04 oktober 2006 @ 21:50:
[...]

da's een verkeerde insteek; CSS is voor styling en JS voor behavior. CSS gebruiken voor behavior (zoals bijvoorbeeld de suckerfish dropdowns) is gewoon fout. De situatie hier is een grensgeval imo.

Hovertjes vallen, zeker in dit geval, zeker onder styling. Dropdown-menuutjes e.d. zijn dan een grensgeval ja, maar aangezien een site m.i. in ieder geval ten minste navigeerbaar en leesbaar moet zijn zonder JS lijkt me een CSS-oplossing sowieso nodig, eventueel als fall-back voor als er geen JS is.

En als ik zie hoeveel JS-code hier nodig is voor het effect zou voor mij de keuze heel simpel zijn

[crisp]

Een hover waarbij de achtergrond of de fontstyle van het element wat je hovert veranderd is inderdaad een visueel effect wat puur styling is. Een hover waarbij je bepaalde content zichtbaar maakt is al een behavior, dus CSS voor dropdowns is zeker geen grensgeval maar gebruik van de verkeerde techniek.
CSS is geen fallback voor JS, het heeft immers een heel ander doel en daar zit imo geen overlap tussen.

In dit geval is het een beetje de vraag of je de images als styling moet zien of als onderdeel van de content. Gezien het feit dat er img-elementen worden gebruikt en geen backgrounds zegt semantisch gezien dat het om content gaat.

[ Voor 27% gewijzigd door crisp op 04-10-2006 22:45 ]

[Verwijderd]

Grote prutser schreef op woensdag 04 oktober 2006 @ 20:04:
[...]

Als ik je goed begrijp maakt dat de boel wel wat complexer :

Grote Prutser, thanks

Omdat het altijd leuk is wat mensen doen met jouw stukje code, zal ik ook maar het resultaat geven na een lange avond knutselen.

Moet er nog wel een beetje aan tweaken, maar het is al wel aardig gelukt. Niet?

Nogmaals: Hulde aan Grote Prutser