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

[hippocampe]

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;
    }



[*Splash*]

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;
    }

[Invité]

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++

[*Splash*]

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*]

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;
}

[Invité]

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);});});


.

a++

[*Splash*]

Effectivement c'est inutile

[hippocampe]

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

Encore merci Splash, Milouze pour cette réponse rapide

Je passe en résolu