Créer bouton en CSS

Résolu/Fermé
Utilisateur anonyme - 4 nov. 2012 à 15:34
 Utilisateur anonyme - 4 nov. 2012 à 19:03
Bonjour, j'essaye de créer un bouton en CSS qui va apparaître en survolant mon image. Le problème, c'est que le bouton apparait derrière mon image, alors que moi je voudrais qu'il soit dessus :/

voici mon code pour le test :

<html>
	
	<style type="text/css">
		#dl
		{
			position: absolute;
			opacity: 0.7;
		}
		#dl:hover
		{
			position: absolute;
			opacity: 1;
			background-image: url(bouton.png);
			background-repeat: no-repeat;
		}
	</style>

	<a href="#" id="dl" ><img align="left" src="barre.png"/></a>

</html>


est-ce que quelqu'un aurait une solution? please
A voir également:

8 réponses

Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
4 nov. 2012 à 16:50
Un petit z-index:10 sur la div à mettre devant, et un z-index plus faible sur l'image peut-être ?
0
Utilisateur anonyme
4 nov. 2012 à 17:23
j'ai déjà essayé mais ça ne marche pas !

au début je l'ai fait avec les balises onMouseOver/out, mais le problème, c'est que l'image du fond était caché, malgré que le bouton soit en PNG
0
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
4 nov. 2012 à 17:25
le z-index ne fonctionne que sur les éléments avec une position (relative,absolute,ou fixed) si vous avez essayer avant de mettre une position, c'est normal que ça ne fonctionnait pas.
0
Utilisateur anonyme
4 nov. 2012 à 17:46
jai aussi mit les positions (absolute / relative / fixed) pour les deux, j'ai tourné et viré dans chaque sans mais rien y fait
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
4 nov. 2012 à 17:55
Exact, j'avais pas fais assez gaffe à ce que tu as fait, le background d'un éléments est forcément derrière les éléments qu'il contient.
Pour que le z-index fonctionne, il faut sortir l'image de liens, ce qui ne t'avance pas je pense pour ce que tu cherche à faire, soit tu ruse en css en mettant un height/width pour couvrir la div, soit tu passe par JS, je ne vois aps d'autre solution pour le moment.
0
Utilisateur anonyme
4 nov. 2012 à 18:05
le JS serait une bonne option, masi je n'ai pas les compétence requise :/
0
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
4 nov. 2012 à 18:17
Le début de fonction que je t'ai donné dans l'autre sujet ne peut pas t'aider ?
0
Utilisateur anonyme
4 nov. 2012 à 18:29
non justement c'est pour ça que je cherche une aure méthode
0
j'ai créé toutes les images en double comme je t'ai dit dans l'autre sujet, mais on voit que ce n'est pas un vrai bouton parce qu'il a un temps de chargement de l'image qui est vraiment long :/
0