Jquery : Changement de logo à la div X
Résolu
borg80
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous!
Voila, je suis en train d'apprendre le jquery, et j'essaye de faire quelque chose d'assez sympa avec mon logo.
En effet, mon site est découpé en plusieurs sections ayant toutes une couleur distincte. Je souhaite donc que mon logo change de couleur en fonction de la section dans laquelle je me trouve. Ou plutôt : changer la source du logo en fonction de la section. Je suis sûr que vous allez parfaitement comprendre ce que j'essaye de faire... en vain. Après moult essais, je me tourne vers vous... désespéré :/
Si vous avez, ne serai-ce que l'ombre d'une piste à me donner, je suis preneur ^^
$('#sectra1_slidewebdesign') est l'ID qui introduit la section 2. C'est donc à partir de cette ID que je souhaite effectuer mon changement de source.
Je vois que vous êtes en train de vous dire : "mais... mais... Il nous a fait quoi là?". Ne soyez pas trop durs, je débute et j'y met tout mon coeur (et mon cerveau aussi).
Merci pour ceux qui pourront m'aider dans ma quête du savoir jquerryen :)!
Voila, je suis en train d'apprendre le jquery, et j'essaye de faire quelque chose d'assez sympa avec mon logo.
En effet, mon site est découpé en plusieurs sections ayant toutes une couleur distincte. Je souhaite donc que mon logo change de couleur en fonction de la section dans laquelle je me trouve. Ou plutôt : changer la source du logo en fonction de la section. Je suis sûr que vous allez parfaitement comprendre ce que j'essaye de faire... en vain. Après moult essais, je me tourne vers vous... désespéré :/
Si vous avez, ne serai-ce que l'ombre d'une piste à me donner, je suis preneur ^^
var logo = $("#sectra1_slidewebdesign").offset().top - 100;
var $nikka = $(window).scroll(function(){
if ( $nikka.scrollTop() > $('#sectra1_slidewebdesign')) {
$('#logo').attr('src','../imgs/logo/logo.png');
}else{
$('#logo').attr('src','../imgs/logo/logo-01.png');
}
$('#sectra1_slidewebdesign') est l'ID qui introduit la section 2. C'est donc à partir de cette ID que je souhaite effectuer mon changement de source.
Je vois que vous êtes en train de vous dire : "mais... mais... Il nous a fait quoi là?". Ne soyez pas trop durs, je débute et j'y met tout mon coeur (et mon cerveau aussi).
Merci pour ceux qui pourront m'aider dans ma quête du savoir jquerryen :)!
A voir également:
- Jquery : Changement de logo à la div X
- Probleme de cohabitation de jquery - Forum Javascript
- Afficher et cacher en jquery ✓ - Forum Javascript
- La faille csrf en jquery ? - Forum Javascript
- Problème requête Ajax avec jquery ✓ - Forum Webmastering
- Probleme de scope en jQuery. je conprend pas, ✓ - Forum Javascript
3 réponses
Salut
si tu as ce code pour afficher l'image
et que ta div a bien l'id "sectra1_slidewebdesign"
Alors le code çi dessous va marcher
tu peux faire plusieurs var de positions avec offset().top suivant les differentes ID de section et dans la function $(window).scroll(function() faire des if pour chaque variable de positions avec if ((A<B) && (A>C)) {...}
voila
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
si tu as ce code pour afficher l'image
<img id ="logo" src="../imgs/logo/logo.png>
et que ta div a bien l'id "sectra1_slidewebdesign"
Alors le code çi dessous va marcher
$(document).ready(function() {
//defini la position y de la div sectra dans la variable postion
var position = $('#sectra1_slidewebdesign').offset().top;
$(window).scroll(function(){
//si le scroll est supérieur ou égal a position changement img
if ( $(window).scrollTop() >= position)
{
$('#logo').attr('src','../imgs/logo/logo.png')
}
//si le scroll est inférieur a position retour img de base
if ( $(window).scrollTop() < position)
{
$('#logo').attr('src','../imgs/logo/logo-01.png')
}
})
})
tu peux faire plusieurs var de positions avec offset().top suivant les differentes ID de section et dans la function $(window).scroll(function() faire des if pour chaque variable de positions avec if ((A<B) && (A>C)) {...}
voila
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Bonsoir.
Peux tu montrer le code source entier de la page ?
Si je comprend bien tu utilise des ancres dans ton menu,
et il y a quelque part lorsque tu scroll un logo qui te suit ?
Peux tu montrer le code source entier de la page ?
Si je comprend bien tu utilise des ancres dans ton menu,
et il y a quelque part lorsque tu scroll un logo qui te suit ?
