all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le lundi 15 février 2010 - 22h43 par Gizmil.

Hello,

sur une page de mon site, j'ai des icônes que j'aimerais voir se colorer au passage de la souris histoire de dynamiser un peu :

http://www.lne-art.be/body.php?a=8&contenu=works_s2_03&work=work_02

Le truc, c'est que j'aimerais que lors de cette coloration au survol, l'image de l'icône demeure visible, quelque chose dans ce genre :

REPOS > http://www.siteduzero.com/uploads/fr/files/218001_219000/218177.gif

SURVOL > http://www.siteduzero.com/uploads/fr/files/218001_219000/218178.gif

Ou autre solution :

SURVOL > http://www.siteduzero.com/uploads/fr/files/218001_219000/218179.gif

Que j'utilise un png transparent ou tout autre format d'image opaque, mon idée est la même pour le procédé : utiliser z-index + position absolute.


J'avais vu un exemple sur le web il y a quelques temps. L'exemple en question ouvrait une infobulle donc un bloc avec du texte. Moi, j'aimerais revoir le système mais avec une image.

Du coup, j'essaye de mettre ça en CSS mais le résultat ne donne rien ! Alors, je me suis dis que j'allais passer ici ! :lol:

Parce que je suis sûr que certaines personnes doivent connaître la méthode...

Donc, si vous avez le temps d'y jeter un oeil, voici ma partie de code HTML :

<div id="bloc_icones">
<a href="body.php?a=8&contenu=works_s2_03&work=work_01"><img src="works_pages/images/menu_02/foret/grands_formats/icone_allee.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_02"><img src="works_pages/images/menu_02/foret/grands_formats/icone_aplats.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_03"><img src="works_pages/images/menu_02/foret/grands_formats/icone_arriere.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_04"><img src="works_pages/images/menu_02/foret/grands_formats/icone_avantg.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_05"><img src="works_pages/images/menu_02/foret/grands_formats/icone_bords.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_06"><img src="works_pages/images/menu_02/foret/grands_formats/icone_confusion.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_07"><img src="works_pages/images/menu_02/foret/grands_formats/icone_division.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_08"><img src="works_pages/images/menu_02/foret/grands_formats/icone_filant.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_09"><img src="works_pages/images/menu_02/foret/grands_formats/icone_soupl.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_10"><img src="works_pages/images/menu_02/foret/grands_formats/icone_sympto.gif" /><div></div></a>
<a href="body.php?a=8&contenu=works_s2_03&work=work_11"><img src="works_pages/images/menu_02/foret/grands_formats/icone_torpeur.gif" /><div></div></a>
</div>


Et voici la partie de code CSS :



#bloc_icones {
height:40px;
/*ci-dessous : 100% moins les 10px du margin*/
width:100%-10px;
margin:0 0 0 10px;
padding:20px 0 0 0;
}
#bloc_icones a {
float:left;
display:block;
height:40px;
width:40px;
margin:0 7px 0 0;
border:none;
/*pour le survol*/
position:relative;
z-index:24;
}
#bloc_icones div {
/*pour le survol*/
display:none;
}
#bloc_icones div:hover {
/*pour le survol*/
z-index:25;
position:absolute;
display:block;
height:40px;
width:40px;
left:-40px;
border:none;
background-image:url(images/icone_voir.gif);
}


Si vous pouviez me dire ce que vous en pensez... croyez-vous que j'ai commis une erreur quelque part ? Pourquoi cela ne marche-t-il pas ? Merci !

• participer

Message publié le mardi 16 février 2010 - 12h57 par foldi3.

salut

Je te donne la solution pour colorer tes images lorsque tu passe dessus après je te laisse te débrouiller pour la mise en page ;-)

un exemple ici : http://hold-em-poker.ch/allhtml/gizmil.php

et voila le code :

<style type="text/css"> .image1 a { display:block; width:40px; line-height:40px; vertical-align:middle; background:url([url=http://www.siteduzero.com/uploads/fr/files/218001_219000/218177.gif]http://www.siteduzero.com/uploads/fr/files/218001_219000/218177.gif[/url]) no-repeat; text-decoration:none; } .image1 a:hover { background:url([url=http://www.siteduzero.com/uploads/fr/files/218001_219000/218178.gif]http://www.siteduzero.com/uploads/fr/files/218001_219000/218178.gif[/url]) no-repeat; } </style> <div class="image1"> <p> <a href="ton_lien.html">&nbsp;</a> </p> </div>

J'espère que c ce que tu cherchais.

Salutations

Julien

• participer

Message publié le mardi 16 février 2010 - 15h27 par Gizmil.

Cool ! Oui, c'est ça ! En espérant que je sache l'appliquer à ma mise en forme html ! Merci bcp ! (-;

• participer

Message publié le mardi 16 février 2010 - 15h40 par Gizmil.

Ok ! En fait, après réfléexion de 10 secondes (lol), chose que j'aurais dû faire avant de poster, je me rend compte que la solution qure tu me donnes est justement ce que je voulais éviter ! Bon, je crois que pour cette fois, je vais faire comme ça quand même...

Mais imaginons que j'aie une miriade d'icônes à créer et que je sois un peu fade pour m'amuser à les faire en double, est-ce que l'utilisation du z-index et d'une méthode adaptée ne pourrait pas m'éviter ce labeur ?

Je pense que je dois pouvoir superposer 2 images, non ?

De plus, arrêtez-moi si je me trompe, la transparence du png est bien à présent reconnue par tous les naviguateurs, il me semble, non ? Je vois des sites web qui l'utilisent abondamment !

• participer

Message publié le mardi 16 février 2010 - 16h29 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

Mais imaginons que j'aie une miriade d'icônes à créer et que je sois un peu fade pour m'amuser à les faire en double, est-ce que l'utilisation du z-index et d'une méthode adaptée ne pourrait pas m'éviter ce labeur ?

tu peux le faire en JS ! ... c'est p-e pas ce que tu souhaites, mais ça marche bien et facilement configurable !

• participer

Message publié le mardi 16 février 2010 - 22h10 par Gizmil.

Ok ! Oui, vu les diverses sources que j'ai lu, je crois comprendre que ce n'est pas vraiment faisable avec du HTML, notamment avec des images !!

Merci ! (-;

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.