DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
JS niet nodig als het een parent is, dan gebruik je natuurlijk gewoon: parent:hover img { wijziging }
“Specialization is for insects”.—Robert Heinlein
tis lastig spul...zeker als je er nog niet heel veel van snapt 
misschien nog wat hulp
ik heb nu dit, dat laat de hele tekst hoveren
maar hoe kan ik dit nu combineren met een sprite...dat terwijl ik het woord hover
ook een image hover
misschien nog wat hulp
ik heb nu dit, dat laat de hele tekst hoveren
| 1 2 3 4 5 6 7 8 | $(document).ready(function() { $("#letters").hover(function() { $(".letter1").toggleClass("rood"); $(".letter2").toggleClass("blauw"); $(".letter3").toggleClass("geel"); $(".letter4").toggleClass("oranje"); }); }); |
maar hoe kan ik dit nu combineren met een sprite...dat terwijl ik het woord hover
ook een image hover
Zijn letter1/letter2/letter3/letter4 children van #letters? Zo ja, dan kun je het toch gewoon met CSS doen...?
en in je CSS
| 1 2 3 4 5 6 | <div id="letters"> <span class="letter1">A</span> <span class="letter2">B</span> <span class="letter3">C</span> <span class="letter4">D</span> </div> |
en in je CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #letters span { .... } .letter1 { ... } .letter2 { ... } .letter3 { ... } .letter4 { ... } #letters:hover span { .... } #letters:hover .letter1 { ... } #letters:hover .letter2 { ... } #letters:hover .letter3 { ... } #letters:hover .letter4 { ... } |
Nee.
Je zet dat plaatje normaal als background met een position. En als je hovert zorg je dat de position zo staat dat je een ander deel van het plaatje te zien krijgt. Je maakt dus bijv. de normal en hover boven elkaar en met background-position zorg je dat je eerst het bovenste deel van die afbeelding te zien krijgt en als je hovert het tweede deel.quote:Op zaterdag 26 november 2011 09:37 schreef MrNiles het volgende:
tis lastig spul...zeker als je er nog niet heel veel van snapt
misschien nog wat hulp
ik heb nu dit, dat laat de hele tekst hoveren
[ code verwijderd ]
maar hoe kan ik dit nu combineren met een sprite...dat terwijl ik het woord hover
ook een image hover
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
het letterstuk werkt..maar ik wil tegelijkertijd ook een image veranderenquote:
Zijn letter1/letter2/letter3/letter4 children van #letters? Zo ja, dan kun je het toch gewoon met CSS doen...?
[ code verwijderd ]
en in je CSS
[ code verwijderd ]
hier werd aangeraden dmv sprites...
sprites werkt wel met css...maar hoe te combineren met jQuery
againquote:Op zaterdag 26 november 2011 09:44 schreef boem-dikkie het volgende:
[..]
Je zet dat plaatje normaal als background met een position. En als je hovert zorg je dat de position zo staat dat je een ander deel van het plaatje te zien krijgt. Je maakt dus bijv. de normal en hover boven elkaar en met background-position zorg je dat je eerst het bovenste deel van die afbeelding te zien krijgt en als je hovert het tweede deel.
het hoveren werkt...letters...en image...APART
moet kan ik dit tegelijk triggeren...dus hover over tekst, change tekst EN image
Je roept in je jQuery toch al een class aan? Dan gebruik je toch gewoon je css?quote:
[..]
het letterstuk werkt..maar ik wil tegelijkertijd ook een image veranderen
hier werd aangeraden dmv sprites...
sprites werkt wel met css...maar hoe te combineren met jQuery
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
kijk..en dat gaat m me nou net een stukje te snelquote:Op zaterdag 26 november 2011 09:46 schreef boem-dikkie het volgende:
[..]
Je roept in je jQuery toch al een class aan? Dan gebruik je toch gewoon je css?
$("#letters").hover(function() {
letters is dan de class?
dus als ik dan #letters gebruik in css bij de image...en in html ook deze class bij de image zet...maar moet ik dan nog iets in de jquery toevoegen?
#letters is de id van je div.quote:
[..]
kijk..en dat gaat m me nou net een stukje te snel
$("#letters").hover(function() {
letters is dan de class?
dus als ik dan #letters gebruik in css bij de image...en in html ook deze class bij de image zet...maar moet ik dan nog iets in de jquery toevoegen?
$(".letter1").toggleClass("rood");
Hier zet je dat als je in de div #letters hovert over .letter1 hij de class 'rood' moet krijgen.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
je hebt een supermooie site, en veel mooie dingen gemaakt...dat heb je vast ook niet in 1 dag geleerdquote:
Oh absoluut, maar als je al bezig gaat met jQuery, font-faces e.d. terwijl je nog niet eens het verschil kent tussen een class en een ID...quote:
[..]
je hebt een supermooie site, en veel mooie dingen gemaakt...dat heb je vast ook niet in 1 dag geleerd
Nee.
goed punt...ik geef het opquote:
[..]
Oh absoluut, maar als je al bezig gaat met jQuery, font-faces e.d. terwijl je nog niet eens het verschil kent tussen een class en een ID...
.
Nou, het mag sowieso niet met wordpress. |Dan wordt je plan afgewezen. Dus ik ga snel lynda af denk ik.quote:
Mooi getekend zo
[ afbeelding ]
Dit is het overzicht, met thumbnails die ik ga tekenen gok ik.
[ afbeelding ]
Als je op een thumbnail of titel klikt kom je bij het daadwerkelijke recept terecht.
Wat er dus geupload moet gaan worden is platte tekst, 2 afbeeldingen en een titel.
Verder komt er op de site nog een home met (denk ik) een slider, wat leuke artikelen uit de nieuwspagina, nieuwe recepten, dat soort dingen. Contactformulier komt er ook uiteraard, en een zoekfunctie
Ik wil een rechthoek van 720px bij 360px maken, elke pixel moet individueel aangestuurd kunnen worden. Ik had al een oplossing gemaakt in PHP die er als volgt uit ziet:
Probleem hierbij is dat er dus zo'n 260.000 divjes aangemaakt worden wat natuurlijk niet echt ten goede komt aan de snelheid/performance. Hebben jullie misschien iets van suggesties waarin ik dit het beste kan maken? jQuery of iets?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php $pix=1; $divId=1; $var="px"; for($i=0; $i<360; $i ++) { for($j=0; $j<720; $j++) { echo "<div id=\"$divId\" style=\"position:absolute; height:$pix$var; width:$pix$var; background:#000000; top:$i$var; left:$j$var;\"></div>"; $divId++; } } ?> |
Probleem hierbij is dat er dus zo'n 260.000 divjes aangemaakt worden wat natuurlijk niet echt ten goede komt aan de snelheid/performance. Hebben jullie misschien iets van suggesties waarin ik dit het beste kan maken? jQuery of iets?
Wat wil je doen met al die pixels die aangestuurd kunnen worden? Ik denk dat het waarom belangrijker is om te weten, dan het hoe. 
dat dus.
In het PHP topic werd mij ook al de vraag gesteld waarom ik het niet in Canvas maak.
Alleen kom ik er niet helemaal uit bij Canvas, de enige manier die ik tot dusver heb kunnen vinden om een pixel te tekenen is als volgt:
Lijkt mij volgens mij niet de bedoeling om een simpele pixel te tekenen met een lineTo...
Ik kan ook niet echt tutorials vinden die het hebben over pixels, tutorials gaan meteen over allemaal "fancy" dingen met allemaal toeters en bellen er op.
Alleen kom ik er niet helemaal uit bij Canvas, de enige manier die ik tot dusver heb kunnen vinden om een pixel te tekenen is als volgt:
| 1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(1,1); ctx.stroke(); </script> |
Lijkt mij volgens mij niet de bedoeling om een simpele pixel te tekenen met een lineTo...
Ik kan ook niet echt tutorials vinden die het hebben over pixels, tutorials gaan meteen over allemaal "fancy" dingen met allemaal toeters en bellen er op.
Dat ja.quote:
Wat wil je doen met al die pixels die aangestuurd kunnen worden? Ik denk dat het waarom belangrijker is om te weten, dan het hoe.
Elke pixel is gelijk aan een bepaald gebied gebaseerd op gps coördinaten. Aan de hand van de gps coördinaten wil ik bijvoorbeeld met de flickr api nagaan hoeveel foto's er geposts zijn in een bepaalde tijd in dat gebied. Vervolgens moet de kleur van de pixel gebaseerd worden op het aantal geplaatste foto's in een bepaald gebied. Voorbeeld van wat mijn eindresultaat ongeveer moet gaan worden: linkquote:
Wat wil je doen met al die pixels die aangestuurd kunnen worden? Ik denk dat het waarom belangrijker is om te weten, dan het hoe.
Maar even voor de duidelijkheid, ik zit nog helemaal in de beginfase, het eerste wat ik nu wil nagaan is hoe ik op een snelle manier een rechthoek op mijn scherm tover.
Als je begint met en basiskleur en daar pixels / divs eroverheen zet om de kleur sterker te maken scheelt het al een boel pixels als je leeg begint, toch?
Daar heb je wel een goed punt inderdaad, zo'n 70% van de aarde bestaat uit water, denk dat er vanuit die gebieden niet echt gepost wordt op Flickr bijvoorbeeld. Blijft er zo'n 30% over wat land is, en van die 30% heb je dan ook nog grote gebieden waar geen activiteit is. Als ik een schatting moet maken wordt slechts 15 a 20 % van het rechthoek ingevuld met gekleurde pixels.quote:
Als je begint met en basiskleur en daar pixels / divs eroverheen zet om de kleur sterker te maken scheelt het al een boel pixels als je leeg begint, toch?
Ik ga me nu weer wat verder inlezen over wat je allemaal met HTML5 Canvas kan doen, lijkt me toch beter dan met divjes werken, als ik 20% van het rechthoek moet invullen zit ik namelijk nog steeds met +- 50.000 divjes wat natuurlijk niet echt snel is.
