Discussion :

[hello world]

Bonjour à tous,

Je travail actuellement sur un menu en javascript utilisant la technique de sprite, mais voilà je bloque.

Une présentation vaut mieux que toute explication :

funsk8te.free.fr

Petite explication quand même: j'ai crée un sprite et mon menu fonctionne, mais pas comme je le voudrais, en faite j'aimerais que l'image monte ET remplace la première hors là elle se superpose et le problème c'est que le bouton survolé est translucide et donc devrait refléter le background, mais là l'image orange reste, ça détruit l'effet.

j'ai bien farfouiller dans le code sprite.js mais je suis pas un pro du javascript alors si une âme charitable peut y jeter un oeil, il faudrait donc que l'image "monte" de 35px (hauteur du bouton) et ne se superpose pas.

voici le bout de code problématique amon avis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// JavaScript Document
 
$(function(){
 
           $('#navigation li a').append('<span class="hover"></span>')
 
           $('#navigation li a').hover(function() {
 
        // Stuff that happens when you hover on + the stop()
        $('.hover', this).stop().animate({
            'opacity': 1
            }, 500,'easeOutSine')
 
    },function() {
 
        // Stuff that happens when you unhover + the stop()
        $('.hover', this).stop().animate({
            'opacity': 0
            }, 500, 'easeOutQuad')
 
    })
           });

[dragonno]

Je ne vois pas ce que tu veux dire par l'image monte, dans ton lien du site, le menu me semble impeccable.

Pour remplacer une image par une autre il faut changer le contenu du "src" de la balise <img> :

<img src="image1.jpg" alt="image de base" width="100px" height="16px">

La solution que je vois c'est de mettre à zéro le contenu du src quand l'image montante arrive au-dessus de la première :

src="#"

Je ne te répond pas plus précisément car je ne comprend pas bien ton bout de code, mais je te donne le principe à appliquer.

[hello world]

Bonjour et merci pour ton intervention, enfaite je viens de m'apercevoir que mon sprite n'etait pas la bon...

Si tu retourne sur mon site tu verra le problème et tu comprendra mieux.

Pour la solution dont tu me parle ce serait dans le HTML que ca se passe est non dans le script sprite.js.

En faite je n’utilise pas de balise <img>, j’utilise une balise <li> puis j’intègre l'image dans le css. En gros tout le travail d'animation est fait par JQuery et le bout de code que j'ai présenter.

[danielhagnoul]

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#navigation a .hover {
	background: transparent  url(images/navi1.png) no-repeat;

Si ce bout de code s'applique bien au problème, j'ai regardé 5s seulement, alors avec un fond transparent, il est normal de voir le fond orange !

[hello world]

mais alors comment faire pour ne plus voir se fond orange quand je suis .hover sur ma navigation ?...

[danielhagnoul]

Bonjour

C'est du CSS, changez la couleur du background de transparent à celle de votre choix.