changer d'image au passage souris sur boutons haut/bas

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu changer d'image au passage souris sur boutons haut/bas

Message par hippocampe Mar 11 Déc 2018 - 12:02

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 11/12/2018
Lien du forum : http://escale-majuscule.forumactif.org/

Description du problème

Bonjour,
J'aimerais savoir si c'est possible de changer l'image du bouton aller en bas/haut au survol de la souris pour agrémenter la déco
Merci à vous

J'ai trouvé ce script ici dans l'aide du forum
Code:
$(function(){
$("body").append('<div class="bouhautbas">
<a href="#top">
<img src="https://i.servimg.com/u/f37/16/04/56/28/haut10.png" alt="Aller en bas" />
<a href="#bottom">  
<img src="https://i.servimg.com/u/f37/16/04/56/28/bas11.png" alt="Aller en bas" />
</a></div>');
    });
et le CSS
Code:
/*BOUTONS ALLER EN BAS OU EN HAUT */
    .bouhautbas {
        bottom: 20px;
        right: 10px; /* remplacez left par right pour afficher les boutons à droite */
        position: fixed;
        z-index: 100;
    }
    .bouhautbas_1 {
        bottom: 50px;
        right 10px; /* remplacez left par right pour afficher les boutons à droite */
        position: fixed;
        z-index: 100;
    }

avatar

hippocampe
***

Masculin
Messages : 106
Inscrit(e) le : 30/12/2007

Voir le profil de l'utilisateur http://escale-majuscule.forumactif.org/
hippocampe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: changer d'image au passage souris sur boutons haut/bas

Message par *Splash* Mar 11 Déc 2018 - 16:11

Hi,

Ce qui est surprenant c'est le code CSS, seule cette partie est utile :
Code:
/*BOUTONS ALLER EN BAS OU EN HAUT */
    .bouhautbas {
        bottom: 20px;
        right: 10px; /* remplacez left par right pour afficher les boutons à droite */
        position: fixed;
        z-index: 100;
    }
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: changer d'image au passage souris sur boutons haut/bas

Message par Invité Mar 11 Déc 2018 - 17:39

Hello Hippocampe et Fred,

comme le souligne Fred, il faut mettre le bon style mon ami:

Ensuite ce script fera l'affaire en respectant bien les mêmes dimensions d'images 48px par 48px.

J'ai déposé 4 liens d'image avec pour chacun d'entre eux un commentaire afin de mieux te repérer.


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches sur toutes les pages.


Déposes ceci:
Code:

$(function(){
//Le lien de l'image d'origine aller en haut
var a='https://i.servimg.com/u/f87/11/26/21/37/arrow-17.png';

//Le lien de l'image au survol aller en haut
var b='https://i.servimg.com/u/f87/11/26/21/37/naviga13.png';     

//Le lien de l'image d'origine aller en bas
var c='https://i.servimg.com/u/f87/11/26/21/37/arrow-16.png';   

//Le lien de l'image au survol aller en bas
var d='https://i.servimg.com/u/f87/11/26/21/37/naviga12.png';

$("body").append('<div class="bouhautbas">
<a class="M14_top"href="#top"> <img src="'+a+'" alt="Aller en haut" />
<a class="M14_bottom"href="#bottom"><img src="'+c+'" alt="Aller en bas" />
</a></div>');
$('.M14_top img').hover(function(){
$('.M14_top img').attr('src',b);
}, function(){
$('.M14_top img').attr('src',a);
});$('.M14_bottom img').hover(function(){
$('.M14_bottom img').attr('src',d);}, function(){$('.M14_bottom img').attr('src',c);});});



Penses à cliquer sur le bouton VALIDER





a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: changer d'image au passage souris sur boutons haut/bas

Message par *Splash* Mar 11 Déc 2018 - 17:45

Le code CSS associé est celui-ci :
Code:
/*BOUTONS ALLER EN BAS OU EN HAUT */
    .bouhautbas {
        bottom: 20px;
        right: 10px; /* remplacez left par right pour afficher les boutons à droite */
        position: fixed;
        z-index: 100;
    }

*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: changer d'image au passage souris sur boutons haut/bas

Message par *Splash* Mar 11 Déc 2018 - 18:05

Autre variante pour avoir les boutons l'un au dessus de l'autre

La partie javascript


Ce script Sur toutes les pages
Code:
$(function(){
//Le lien de l'image d'origine aller en haut
var a='https://i.servimg.com/u/f87/11/26/21/37/arrow-17.png';
 
//Le lien de l'image au survol aller en haut
var b='https://i.servimg.com/u/f87/11/26/21/37/naviga13.png';    
 
//Le lien de l'image d'origine aller en bas
var c='https://i.servimg.com/u/f87/11/26/21/37/arrow-16.png';  
 
//Le lien de l'image au survol aller en bas
var d='https://i.servimg.com/u/f87/11/26/21/37/naviga12.png';

$("body").append('<div class="boutonhaut">
<a class="M14_top"href="#top"> <img src="'+a+'" alt="Aller en haut" />
</a></div>');

$("body").append('<div class="boutonbas">
<a class="M14_bottom"href="#bottom"><img src="'+c+'" alt="Aller en bas" />
</a></div>');
$('.M14_top img').hover(function(){
$('.M14_top img').attr('src',b);
}, function(){
$('.M14_top img').attr('src',a);
});$('.M14_bottom img').hover(function(){
$('.M14_bottom img').attr('src',d);}, function(){$('.M14_bottom img').attr('src',c);});});

La partie CSS


Mettre ce code :
Code:
.boutonhaut {
    bottom: 60px;
    right: 10px;
    position: fixed;
    z-index: 100;
}
.boutonbas {
    bottom: 10px;
    right: 10px;
    position: fixed;
    z-index: 100;
}
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: changer d'image au passage souris sur boutons haut/bas

Message par Invité Mar 11 Déc 2018 - 18:22

Re,

hum pourquoi mettre deux appels dans le body Fred?



Code:
$(function(){
//Le lien de l'image d'origine aller en haut
var a='https://i.servimg.com/u/f87/11/26/21/37/arrow-17.png';
 
//Le lien de l'image au survol aller en haut
var b='https://i.servimg.com/u/f87/11/26/21/37/naviga13.png';    
 
//Le lien de l'image d'origine aller en bas
var c='https://i.servimg.com/u/f87/11/26/21/37/arrow-16.png';  
 
//Le lien de l'image au survol aller en bas
var d='https://i.servimg.com/u/f87/11/26/21/37/naviga12.png';

$("body").append('<div class="boutonhaut">
<a class="M14_top"href="#top"> <img src="'+a+'" alt="Aller en haut" />
</a></div><div class="boutonbas">
<a class="M14_bottom"href="#bottom"><img src="'+c+'" alt="Aller en bas" />
</a></div>');


$('.M14_top img').hover(function(){
$('.M14_top img').attr('src',b);
}, function(){
$('.M14_top img').attr('src',a);
});$('.M14_bottom img').hover(function(){
$('.M14_bottom img').attr('src',d);}, function(){$('.M14_bottom img').attr('src',c);});});

Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: changer d'image au passage souris sur boutons haut/bas

Message par *Splash* Mar 11 Déc 2018 - 18:27

Effectivement c'est inutile
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: changer d'image au passage souris sur boutons haut/bas

Message par hippocampe Mar 11 Déc 2018 - 18:54

Merci c'est génial de votre part les amis

Encore merci Splash, Milouze pour cette réponse rapide

Je passe en résolu
avatar

hippocampe
***

Masculin
Messages : 106
Inscrit(e) le : 30/12/2007

Voir le profil de l'utilisateur http://escale-majuscule.forumactif.org/
hippocampe a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum