Hover image
Ik zit met het volgende: Ik wil wanneer je over een tumb van een project heen gaat, dat er een afbeelding overheen komt te liggen als het waren. Deze afbeelding is een pattern van vierkantjes met daartussen transparantie.
Hoe doe ik dit met jquery? Ik had zelf de plugin van jquery gedownload: Imghover. Deze doet het alleen met fade (wat tevens wel de bedoeling is) maar dat loopt niet erg smooth. Kan dit ook met mouseover en out? en hoe zou dan deze code eruit moeten zien?
Alvast bedankt voor de medewerking!
M.v.g Casper
Voorbeeldje:
Code (php)
1
2
3
4
5
2
3
4
5
$('.thumbs').each(function(i, e) {
$('.thumb', e).click(function() {
$(this).addClass('overrule');
});
});
$('.thumb', e).click(function() {
$(this).addClass('overrule');
});
});
Is even snel een hersenspinsel, maar je snapt wel wat ik bedoel.
Succes!
Gewijzigd op 09/03/2011 19:36:42 door Niels K
JSFX_AnimatedRollovers
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$('img').hover(function() { //De call-back functie bij mouseOn
$(this).fadeOut('slow'); //Slow, fast of een getal in miliseconden ( 1000ms = 1 s)
},
function() { //De call-back functie als bij mouseOut
$(this).fadeIn('slow'); //This betekend het element waarop gehoverd is
});
$(this).fadeOut('slow'); //Slow, fast of een getal in miliseconden ( 1000ms = 1 s)
},
function() { //De call-back functie als bij mouseOut
$(this).fadeIn('slow'); //This betekend het element waarop gehoverd is
});
Klopt, ik wil dus wanneer je over een tumb gaat, dat de afbeelding: img_hover.png er als het waren overheen komt te liggen. Waar moet ik dan het pad van deze afbeelding plaatsen?
Gewijzigd op 10/03/2011 09:47:01 door Casper B
Nee dat wilt hij niet ;)
@Casper
Afbeelding gewoon in css inladen en opmaken (positioneren etc)
zijn de: i en e gewoon namen die je eraan geeft of?
Ik heb me even weer wat meer in de code verdiept. Als het goed is zou de code er zo uit kunnen zien.
Want wat hij namelijk doet is, wanneer het document ready is, voert hij de functie .imghover uit en die heeft wee de functie om de source uit de js bestand van Jquerys plugin: Image hover te gebruiken. Dit doet het, maar hij laat even de afbeelding niet zien, zou dit kunnen zijn dat deze dan op 0 opacity wordt gezet? en zoja welk stukje script moet gewijzigd worden?
<script>
$(document).ready(function(){
$('.imghover').imghover(function()
{
$(this).source('')
});
});
</script>
Gewijzigd op 11/03/2011 12:24:34 door Casper B
jQuery werkt bijna altijd volgens dit principe:
$(selector).evenement(callback);
- selector: je kan html elementen aanspreken zoals je ze aanspreekt in css.
bv. '.imghover' is gelijk welk html element met class="imghover"
bv. '#content ul li.navigation' is een <li class="navigation">, binnen een <ul>, op zijn beurt ingebed in een element met id="content"
- evenement:
javascript evenement. Laat telkens de 'on' weg.
bv. click (= onClick); hover ; mouseover; ...
- callback: een functie. Ofwel geef je een functienaam mee, ofwel schrijf je de functie declaratie hier volledig (functie zonder naam)
met andere woorden: dat wordt dus eerder iets als
$('.imghover').hover(function(e) ...
kijk ook hier eens:
http://www.visualjquery.com/
Gewijzigd op 11/03/2011 16:56:42 door Kris Peeters
En wat bedoel je dan met callback, wat kun je daarmee doen?
Groeten
Gewijzigd op 11/03/2011 20:17:58 door Casper B