28219 sujets

CSS et mise en forme, CSS3

[Résolu] Image map + rollover pour un menu

Bonjour,
J'essaye de combiner, sans succès jusqu'à présent, deux techniques exposée dans les exemples d'alsa, à savoir:
- image map, zone réactive.
- rollover en CSS

Dans l'état actuel, les zones sont définies correctement, les liens sont actifs, donc a priori, la partie "image map" fonctionne.
Là où ça ne va plus, c'est pour la définition du rollover qui est basé dans l'exemple sur la balise <a>
Dans mon CSS je retrouve ceci:

#image {    /* bloc image en arrière-plan */
float: right;
position: absolute;
margin: 1%;
width : 250px;
height: 317px;
background: url(../images/menubc.gif) top left no-repeat;
}
#btblanc {
float: left;
display: block;
width : 25px;
height: 33px;
margin-left: 64px;
margin-top: 125px;
}
a.btblanc:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(../images/btblanc.gif); /* source de l'image d'arrivée */
}


Et j'intègre ça dans mon HTML:

<div id="image">
	<a id="btblanc" href="#" title="btblanc"></a>	
</div>


Le tout étant ici pour une zone, "btblanc", les autres suivant le même schéma, évidemment. Smiley lol

J'ai beau modifier le bloc #btblanc et le passer en a.btblanc Smiley biggol , rien n'y fait, l'image ne se charge pas lors du survol...
Des idées, commentaires?
Suis complètement paumé là. Smiley decu

Encore merci d'avoir pris le temps de me lire Smiley cligne
Modifié par citronized (22 Feb 2005 - 14:50)
connecté
Administrateur
Ps : c'est un problème de mise en forme, donc je déplace dans le salon CSS Smiley smile
Ben ça n'a pas l'air de passionner grand monde Smiley lol !
Disons alors que ce sera plutôt un WIP qu'une question pour le moment Smiley biggol (Work In Progress).
Après avoir isolé mon code dans 2 fichiers (CSS et HTML), histoire d'éliminer les erreurs dues au reste de code, j'ai réussi à faire UN bouton réactif!
Pourquoi qu'un? Ben parce que pour le moment, j'ai essayé de recoller le plus possible au code initial, et qu'il n'y a que quand j'utilise le mot "image" en lieu et place de "btblanc" que cela fonctionne...
Je rajouterais d'ailleurs, que dans le doute et pour éviter la confusion (dans mon esprit), j'ai modifié de nom de mon bloc contenant l'image entière (#image) et ça fonctionne toujours. Donc pas de lien de cause à effet entre la dénomination du bloc et de la balise inline Smiley confus puisque ça fonctionne encore?
Je ne trouve pas non plus de propriété CSS appellée "image"... Smiley biggol
Je trouverais...je vais quand même pas tous les appeller "a.image", non?

Merci de m'avoir lu Smiley langue
Modérateur
citronized a écrit :

Le tout étant ici pour une zone, "btblanc", les autres suivant le même schéma, évidemment.


Que veux-tu faire exactement ? Tu as plusieurs liens dans ton menu ? Le background qui change au passage de la souris, est-il le même pour tous les liens ?
Je fais pas ça pour augmenter mon nombre de post, hein? Smiley sweatdrop
Mea culpa, en modifiant la class "image" par "btblanc" ça fonctionne quand même, j'avais dû me planter quelque part sans le voir...
Si on pouvait me jetter la première pierre, je suis trop lapide... Smiley confused
Merkel a écrit :


Que veux-tu faire exactement ? Tu as plusieurs liens dans ton menu ? Le background qui change au passage de la souris, est-il le même pour tous les liens ?


J'ai une image d'une télécommande avec des boutons.
J'ai délimité les boutons par des class "a.btblanc" par exemple.
Lors du passage de la souris, je voudrais que le bouton se baisse (de la télécommande), puis clic suivant un lien.
Les images de boutons ne sont pas les mêmes.

Si ce n'est pas assez clair ou précis, n'hésite pas.
Et merci! Smiley biggrin
Modifié par citronized (16 Feb 2005 - 16:54)
Bon, ben résolu tout seul en fait. Ca venait de l'utilisation d'un bloc (?) à la place d'un class.
Le CSS

/* --MenuImage-- */

#test {    /* bloc image en arrière-plan */
float: right;
position: absolute;
margin: 1%;
width : 250px;
height: 317px;
background: url(menubc.gif) top left no-repeat;
}
a.btblanc {
float: left;
display: block;
width : 25px;
height: 33px;
margin-left: 64px;
margin-top: 125px;
}
a.btnoir {
position: absolute;
float: left;
width : 52px;
height: 50px;
margin-left: 13px;
margin-top: 88px;
}
a.btrouge {
position: absolute;
float: left;
width : 53px;
height: 47px;
margin-left: 53px;
margin-top: 62px;
}
a.btbleu {
position: absolute;
float: left;
width : 24px;
height: 37px;
margin-left: 105px;
margin-top: 94px;
}
	 
a.btblanc:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(btblanc.gif); /* source de l'image d'arrivée */
}
a.btnoir:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(btnoir.gif); /* source de l'image d'arrivée */
}
a.btrouge:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(btrouge.gif); /* source de l'image d'arrivée */
}
a.btbleu:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(btbleu.gif); /* source de l'image d'arrivée */
}


Le HTML:

<div id="test">
	<a class="btblanc" href="#" title="btblanc"></a>	
	<a class="btnoir" href="#" title="btnoir"></a>
	<a class="btrouge" href="#" title="btrouge"></a>
	<a class="btbleu" href="#" title="btbleu"></a>
</div>


Smiley biggol
Modifié par citronized (16 Feb 2005 - 16:59)
En fait c'est résolu sous FF, mais je ne l'avait pas testé sous IE Smiley biggol
Je sais, je suis grave.
Le fait est que depuis j'ai lu que les attributs "position: absolute" et "float:left" sont incompatibles Smiley bawling . C'est dommage, c'est jusqu'à présent la seule solution qui fonctionne (sous FF1.0).
Mon menu est déglingué par la droite sous IE 6 ... sauf un bouton!
Comment cela se fait-il??? Smiley sweatdrop
Bon, après avoir relu ce que j'avais sous la main quant au positionnement (http://www.grappa.univ-lille3.fr/polys/htmlcss/index.php?page=css_positionnement)
j'ai, je pense, enfin compris pourquoi ces attributs sont incompatibles, et donc en gommant mon "float: left" et un "display: block" qui traînait, le problème est...résolu, sous FF comme MSIE.

Tourner sept fois... Smiley biggol

Donc si ça intéresse quelqu'un et si personne ne trouve d'erreur grotesque, voici ce que donne le code:
CSS

#image {    /* bloc image en arrière-plan */
position: absolute;
margin: 1%; /* marge autours de l'image */
width : 250px; /* largeur de l'image */
height: 317px; /* hauteur de l'image */
background: url(image.gif) top left no-repeat;
}
a.zone1 {
position: absolute;
width : 25px; /* largeur de la zone */
height: 33px; /* hauteur de la zone */
margin-left: 64px; /* distance entre le bord gauche de l'image & la zone*/
margin-top: 125px; /* distance entre le bord haut de l'image & la zone*/
}
a.zone2 {
position: absolute;
width : 25px;
height: 33px;
margin-left: 22px;
margin-top: 100px;
} 
a.zone1:hover {
background-image: url(zone1.gif); /* image de remplacement lors du survol*/
}


Et le HTML:

<div id="image">
	<a class="zone1" href="#"></a>	
	<a class="zone2" href="#"></a>
        ...
</div>
Sujet clos
Aller à