[RESOLU]Liens non cliquables à cause d'une image qui bouge sur un men

Bonjour à tous !

J'ai un soucis avec le menu lavalamp en jquery ( http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ )

Je vais essayer d'être explicite le plus possible :

J'ai donc pris ce menu et je l'ai bidouillé, en fait à la place de la petite barre bleue qui se déplace j'ai mis une image qui couvre le texte. A cette image j'ai appliqué une opacité afin que l'on puisse quand même voir le menu derrière.

Voici un screenshot :

http://img10.hostingpics.net/pics/395698CapturerJPG.jpg

Oui mais voilà; comme vous vous en doutez les liens appliqués aux <li> sont derrière l'image (qui se déplace en fonction de la position de la souris) et donc non cliquables !

J'ai essayé plusieurs choses, les z-index par exemple, essayé de rendre opaque le menu et de mettre l'image derrière...etc ou encore essayé de mettre un div avec un block lien par exemple devant l'image mais ça ne fonctionne pas.
J'ai exploré beaucoup de pistes sans résultat.
Je pense que l'idée du div avec un block lien devant l'image est la meilleure solution mais j'ai dû mal m'y prendre!

C'est pourquoi je sollicite votre aide, si vous avez une idée, une piste ou quelque chose je suis preneur !
N'hésitez pas à me demander mon code si besoin ou à me poser des questions si je n'ai pas été assez explicite.

Merci d'avoir lu
Modifié par tyrants (30 Nov 2010 - 20:22)

Hello,

tu as résolu ton problème de hit ?
sinon on peux jeter un oeil sur la source ?

bonne soirée!

Yop !

Et bien non je n'ai pas encore trouvé la solution !
J'ai bien continuer à faire quelques essais mais ça ne donne rien.

Voici mon code html pour le menu :

<ul class="lavaLampBottomStyle" id="3">
    <a href="index.html"><li class="current">Accueil</li></a>
    <li><a href="#">Disco</a></li>
    <li><a href="#">Live</a></li>
    <li><a href="#">Media</a></li>
	<li><a href="#">Contact</a></li>
	
</ul> 

Note : la classe "current" définie la position initiale de l'image

Voici le javascript dans la page html :

$(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 1000,
                click: function(event, menuItem) {
                    return true;
                }
            });
        });

Le code js du menu Lavalamp :

(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

(désolé de la longueur)

Et enfin le css :

/***************MENU********************************/

        .lavaLampBottomStyle {
            position: absolute;
			width: 500px;
            height: 53px;
            background-color: white;            
          /*  border: 2px solid gray;*/			 
			padding: 0px;
			left:50%;	
	        margin-left:-266px;
			text-align:center;
			
	

        }
                .lavaLampBottomStyle li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampBottomStyle li.back {
					    
					    
                        background: url("../images/lame.png") no-repeat;
						opacity:0.6;
                        width: 100px;
                        height: 53px;
                        position: absolute;
						
						
						
                    }
                    .lavaLampBottomStyle li  a{
						font-family: "faith", arial, sans-serif; 
						font-size:30px;
						text-align: center;
						color:white;
						text-decoration :none;
						
				        width: 100px;
                        height: 53px;                                           
                        display: block;
						background:#000000;		
                        position: relative;
                        overflow: hidden;
						
						}
					.lavaLampBottomStyle li a {
						
						
                        
                    }   
                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
                            border: none;
							

		
                        }          

						
						
				
						
						
						
						
						
/*********************POLICE************************************/

@font-face { font-family : 'faith';
src: url('../css/FaithCollapsing.ttf') format('truetype'); }

A savoir que le menu est contenu dans un div dont voici le code CSS :

#conteneurM
{
	
    background : #000000;
	width: 724px;
	height: 550px;
	margin-left: 150px;
	border-bottom : 2px solid grey;   
	
	
}

N'hésitez à me corriger ou à me donner des conseils sur d'autres erreurs, j'ai tellement trituré le code que j'ai du faire un peu n'importe quoi !

Merci d'avoir lu !

Mon problème est résolu grâce à un pote (Vaga on t'aime).
La solution des z-index était finalement la bonne sauf que je ne l'appliquais pas aux bonnes classes ou que je n'avais pas pensé à ne pas afficher de background. Voilà donc la solution si jamais quelqu'un aurait le même problème un jour :

a écrit :

Ajouter :
z-index : 4;
à la règle :
.lavaLampBottomStyle li.back

z-index : 10;
à la règle :
.lavaLampBottomStyle li a

En faisant ça on a plus l'image car elle est sous le fond de .lavaLampBottomStyle li a
donc on supprime le fond:
background: none;

Ensuite pour avoir un fond noir on ajoute :
background: #000; à .lavaLampBottomStyle

Merci encore à Vaga, ça lui ferra plaisir si il passe par là