Rotate DIV backgrounds.
Hallo,
Ik ben bezig met een site, en eigenlijk wil ik proberen de header zoals deze site te krijgen:
http://www.salem-net.de/index.php
Is dit mogelijk dmv. ALLEEN JavaScript, CSS en HTML?
Of moet ik dan van die applications als 'Lightbox' en dergelijke downloaden?
~Tom Joosten.
Ik ben bezig met een site, en eigenlijk wil ik proberen de header zoals deze site te krijgen:
http://www.salem-net.de/index.php
Is dit mogelijk dmv. ALLEEN JavaScript, CSS en HTML?
Of moet ik dan van die applications als 'Lightbox' en dergelijke downloaden?
~Tom Joosten.
Lightbox = javascript.
Maar wat je hier ziet is flash.
Maar wat je hier ziet is flash.
Tom klopt je moet zoiets als de 'applicaties' als lightbox downloaden. Alleen dan jQuery en dan nog jQuery innerfade.
Hmm, flash kan ik niet gebruiken. Deze site moet volledig toegankelijk zijn op de Safari browser van de iPad en iPhone.
Moet ik voor dat jQuery nog iets extra's downloaden, of is dit de standaard service geleverd op de server zoals PHP?
EDIT: Het even gedownload, ik zie dat 'ie zo ook werkt. Da's nog eens leuk, bedankt!
Moet ik voor dat jQuery nog iets extra's downloaden, of is dit de standaard service geleverd op de server zoals PHP?
EDIT: Het even gedownload, ik zie dat 'ie zo ook werkt. Da's nog eens leuk, bedankt!
Gewijzigd op 30/06/2010 13:01:47 door Tom Joosten
jQuery is een taal (frame!) gemaakt in Javascript. Dit houd in dat het ervoor zorgt dat je gebruik kunt maken van javascript, zonder dat je veel rekening hoeft te houden met verschillen in browsers.
Je moet het jQuery pakket downloaden en deze bij elke request meesturen naar de browser. Klikje(); 24KB aan code gaat dus elke keer (indien niet gecached uiteraard) je server over.
Voor kleine dingen is dit dus niet aan te raden. Voor wat jij wilt, zou ik het gewoon doen.
Je moet het jQuery pakket downloaden en deze bij elke request meesturen naar de browser. Klikje(); 24KB aan code gaat dus elke keer (indien niet gecached uiteraard) je server over.
Voor kleine dingen is dit dus niet aan te raden. Voor wat jij wilt, zou ik het gewoon doen.
Hmm, ik krijg 't maar niet gefixed, ik zou 't lieftst hebben dat de Background-image verandert, maar als ik via de <ul><li></li></ul> dit doe (#portfolio), verminkt 't m'n hele pagina (http://hageveld.tomjoosten.nl/index.html)
Dit is nu met <img /> tags. Dit is niet echt wat ik wil. Kan iemand mij dit uitleggen <--( Niet voor me maken, dan leer ik nog wat), zodat ik de div achtergrond ermee kan laten veranderen? :)
Dit is nu met <img /> tags. Dit is niet echt wat ik wil. Kan iemand mij dit uitleggen <--( Niet voor me maken, dan leer ik nog wat), zodat ik de div achtergrond ermee kan laten veranderen? :)
Gewijzigd op 30/06/2010 14:06:44 door Tom Joosten
Je moet in de div zelf de background-image veranderen, niet in de stylesheet.
Dus:
Kan eventueel ook met jQuery:
Ik hoop dat dit is wat je bedoelde?
Dus:
Code (php)
1
2
3
2
3
<div id="iets" class="eenClass" style="background-image: url(linkNaarDeImage)">
vulling
</div>
vulling
</div>
Kan eventueel ook met jQuery:
Code (php)
1
2
3
4
2
3
4
$('#iets').hover(
function() { (this).css('background-image','url(image_link_url)') }, // Wanneer de muis over de div gaat.
function() { (this).css('background-image','url(originele_image_link_url)') } // Wanneer er niet gemuisd wordt over het plaatje.
);
function() { (this).css('background-image','url(image_link_url)') }, // Wanneer de muis over de div gaat.
function() { (this).css('background-image','url(originele_image_link_url)') } // Wanneer er niet gemuisd wordt over het plaatje.
);
Ik hoop dat dit is wat je bedoelde?
Nee, ik bedoelde met de jQuery innerFade die mij net is toegewezen. Ik denk dat je deze even moet doorlezen om te zien wat ik bedoel. :)
Je specificeert nergens de <ul id="portfolio"> in je content?
Evenals geen enkele met de ID van news.
En wil je het menu namaken van die site die je geeft? Dus die rij waarbij de achtergrond veranderd als je eroverheen hovered?
Evenals geen enkele met de ID van news.
En wil je het menu namaken van die site die je geeft? Dus die rij waarbij de achtergrond veranderd als je eroverheen hovered?
Gewijzigd op 30/06/2010 15:02:01 door Justin S
Nee, deze heb ik even verwijderd, anders kon ik niet verder. Ik zal 't weer even online zetten. Een minuutje.
Nee, hier was geen sprake van. Dit kan ik zelf wel, maar ik heb problemen met 't jQuery gedeelte, dit is nieuw voor me.
Als ik het goed begrijp wil je in de header gewoon een slideshow? Zoals die getoond wordt op die andere site die je in je TS geeft op de index pagina?
Ja. Da's 't precies. Alleen dan de achtergronden van een DIV. de hele DIV veranderen gaat niet, want dan zit er nog een list omheen die de layout verziekt. :(
Ik raad elke jQuery user aan het google content delivery system te gebruiken, oftwel het gewoon van de google servers halen, heb je meteen grote kans dat hij al gecached is door een andere site:
http://webmuch.com/how-why-you-should-use-google-cdn/
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://webmuch.com/how-why-you-should-use-google-cdn/
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
Je moet dan eens kijken naar de Cycle plugin. Deze is daar meer voor geschikt. Er is een uitgebreide user handleiding hoe je dingen uit moet voeren e.d.
Het werkt vrij simpel:
Het werkt vrij simpel:
Ik zal er eens naar kijken, bedankt!
Dankje, dit werkt helemaal!




