[CSS] Affichage 2 images en même temps ?

Affichage 2 images en même temps ? [CSS] - HTML/CSS - Programmation

Marsh Posté le 05-10-2005 à 22:05:28    

Bonsoir,
 
Débutant en CSS, j'aurais besoin d'aide pour finaliser la conception d'un menu.
 
Fonctionnement actuel :
 
J'ai une image avec 6 zones qui, au passage de la souris, affiche une image partant de ce point. Ceci fonctionne parfaitement.
 
Maintenant ce que j'aimerais faire, c'est afficher une deuxième image au passage de la souris sur 1 zone ...
 
J'ai cherché, mais rien a faire, mise à part que mes 2 images n'en fassent plus qu'une, mais c'est beaucoup trop gros :(
 
Voici un bout de code :

Code :
  1. #menu2 {
  2. top:181px;
  3. left:260px;
  4. }
  5. #menu2:hover{
  6. top:89px;
  7. left:259px;
  8. height:102px;
  9. padding-left:180px;
  10. background-image:url(2-2.gif);
  11. z-index:10;
  12. width: 142px;
  13. voice-family: "\"}\"";
  14. voice-family:inherit;
  15. width: 0px;
  16. }


 
Ce code m'affiche donc l'image 2-2.gif quand je passe sur la zone "menu2". J'aimerais donc pouvoir afficher l'image 2-1.gif (à un autre endroit) en même temps ...
 
Merci d'avance pour vos idées :)
 
Bonne continuation

Reply

Marsh Posté le 05-10-2005 à 22:05:28   

Reply

Marsh Posté le 05-10-2005 à 22:08:30    

C'est possible en CSS3 : avoir plusieurs background. Par contre, ça ne fonctionne que sous Safari :D

Message cité 1 fois
Reply

Marsh Posté le 05-10-2005 à 22:10:54    

FlorentG a écrit :

C'est possible en CSS3 : avoir plusieurs background. Par contre, ça ne fonctionne que sous Safari :D


 
:) mince alors, ca fait pas énorme en compatibilité :)
 
donc pas possible avec du firefox/ie6 ?
 
merci pour la réponse :)

Reply

Marsh Posté le 05-10-2005 à 22:15:29    

En trichant un peu... Imagine que ton élément #menu2 est un li, avec un lien dedans :

<li><a href="pouet.html">Pouet</a></li>


Rajoute un span :

<li><a href="pouet.html"><span>Pouet</span></a></li>


En truandant bien, tu pourra afficher un background sur le a, et aussi un sur le span :

a:hover {
  background: url('truc.png');
}
a:hover img {
  background: url('truc2.jpg');
}


Faut aussi mettre un padding sur le a, enfin à toi de voir suivant ce que tu veux faire...

Message cité 1 fois
Reply

Marsh Posté le 05-10-2005 à 22:17:13    

FlorentG a écrit :

En trichant un peu... Imagine que ton élément #menu2 est un li, avec un lien dedans :

<li><a href="pouet.html">Pouet</a></li>


Rajoute un span :

<li><a href="pouet.html"><span>Pouet</span></a></li>


En truandant bien, tu pourra afficher un background sur le a, et aussi un sur le span :

a:hover {
  background: url('truc.png');
}
a:hover span {  
  background: url('truc2.jpg');
}


Faut aussi mettre un padding sur le a, enfin à toi de voir suivant ce que tu veux faire...


Reply

Marsh Posté le 06-10-2005 à 10:07:21    

Déjà, merci pour la réponse, je vais essayer ce soir, et je vous tiens au courant :)
 
pour gatsusat, j'ai pas tout compris ;)

Reply

Marsh Posté le 06-10-2005 à 12:36:51    

j'ai corrigé un buot du code de Flo

Reply

Marsh Posté le 06-10-2005 à 12:43:40    

Ah merde ouais :D

Message cité 1 fois
Reply

Marsh Posté le 06-10-2005 à 13:38:39    

FlorentG a écrit :

Ah merde ouais :D


Ben oué gamin, tu commence à vieillir

Reply

Marsh Posté le 06-10-2005 à 16:19:58    

J'ai un petit souci :
 
voci donc la modification de mon code :
 

Code :
  1. #menu3{
  2. top:198px;
  3. left:260px;
  4. }
  5. #menu3:hover{
  6. top:198px;
  7. left:260px;
  8. height:139px;
  9. padding-left:165px;
  10. background-image:url(3-2.gif);
  11. }
  12. #menu3:hover span{
  13. top:10px;
  14. left:10px;
  15. height:139px;
  16. padding-left:165px;
  17. background-image:url(2-2.gif);
  18. }


 
puis :
 

Code :
  1. <li><a id="menu3" title="menu3" accesskey="3" href="#"><span>Menu 3</span></a></li>


 
et j'ai toujours une seule image qui apparait ...
 
Merci de votre aide :)

Reply

Marsh Posté le 06-10-2005 à 16:19:58   

Reply

Marsh Posté le 09-10-2005 à 18:27:32    

up ?

Reply

Marsh Posté le 15-04-2008 à 14:51:22    

up pour une question identique...

Reply

Marsh Posté le 17-04-2008 à 08:15:30    

Bonjour,
en fait ça fonctionne chez moi sur FF et sur ie7, opera...mais pas sur ie6.
J'aimerai une soluce SVP pour le rendre compréhensible par ie6 SVP.
Mon bout de code HTML :

Code :
  1. <div id="menu_photo">
  2. <a href="index.php?page=photo" alt="Photographie" title="Photographie" ></a><span></span>
  3. </div>


et sa CSS :

Code :
  1. #menu_photo:hover span
  2. {
  3. position:absolute;
  4. top:470px;
  5. left:40px;
  6. height:50px;
  7. width:300px;
  8. background-image:url('../images/tphoto.gif');
  9. background-repeat: no-repeat;
  10. }


Message édité par snp le 17-04-2008 à 08:16:47
Reply

Marsh Posté le 17-04-2008 à 10:01:59    

Ce serait pas un IE6 popup bug des fois? Essaie d'ajouter ceci:  
 
overflow: hidden;     /** fix for IE6 popup bug */

Reply

Marsh Posté le 17-04-2008 à 10:24:01    

ajouté mais rien n'y fait.
merci pour le coup de main.
 
Autres suggestions ?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed