hover : afficher image

hover : afficher image - HTML/CSS - Programmation

Marsh Posté le 04-05-2005 à 18:37:29    

Alors je m'explique :
 
head2.gif est un rectangle gris dans lequel j'ai inscrit mon menu (Accueil, EDC, ...)
comme on peut le voir dans le css j'ai décalé les inscriptions du menu de 100px par rapport au bord gauche du rectangle
 
j'ai laissé un "trou" de 100px car je voudrais que lorsqu'on survole un nom du menu, une image (1.jpg) s'affiche à cet emplacement
or mon image s'affiche sur le nom du menu!
 
merci pour votre aide...
 

Code :
  1. HTML :
  2. <div class="head2">
  3. <div class="menuhaut"> 
  4. <a href="Accueil/accueil.php">Accueil</a> 
  5. <a href="EDC/edc_index.php">EDC</a> 
  6. <a href="ISO9001/iso_index.php">ISO 9001</a> 
  7. <a href="Applications/appli_index.php">Business Applications</a> 
  8. <a href="Autres/autres_index.php">Autres</a>
  9. </div>
  10. </div>


 

Code :
  1. CSS :
  2. .head2 {
  3. background-image: url('design/head2.gif');
  4. width: 1050px;
  5. height: 35px;
  6. }
  7. .menuhaut {
  8. float: left; /* on aligne le menu vertical à droite de son conteneur, head2 */
  9. margin-right: 10px;
  10. margin-top: 10px;
  11. margin-left:100px;
  12. }
  13. .menuhaut a {
  14. font-size: 16px;
  15. font-weight:bold;
  16. color:#000000;
  17. text-decoration: none; /* pour éviter le soulignement au survol */
  18. margin-left: 45px; /* espacement entre chaque sous-menu */
  19. }
  20. .menuhaut a:hover {
  21. background-image:url(design/1.jpg);
  22. background-repeat:no-repeat;
  23. }

Reply

Marsh Posté le 04-05-2005 à 18:37:29   

Reply

Marsh Posté le 04-05-2005 à 18:44:14    

http://www.meyerweb.com/eric/css/edge/popups/demo.html


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-05-2005 à 19:00:13    

Merci mais je me suis deja aidé de ce site la.
 
en fait je voudrais faire un truc dans ce style :
http://www.flowserve.com
 
quand on passe la souris sur un nom de menu, une image s'affiche à gauche.
or moi elle s'affiche sur le nom du menu
 
je ne vois pas ou est mon erreur
 
merci de m'aider

Reply

Marsh Posté le 04-05-2005 à 19:05:32    

JustOne72 a écrit :

Merci mais je me suis deja aidé de ce site la.
 
en fait je voudrais faire un truc dans ce style :
http://www.flowserve.com


Mais c'est pourtant exactement le comportement du lien vers le site d'Eric Meyer  :??:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 04-05-2005 à 20:31:27    

JustOne72 a écrit :

Merci mais je me suis deja aidé de ce site la.
 
en fait je voudrais faire un truc dans ce style :
http://www.flowserve.com
 
quand on passe la souris sur un nom de menu, une image s'affiche à gauche.
or moi elle s'affiche sur le nom du menu
 
je ne vois pas ou est mon erreur
 
merci de m'aider


Ok, tu veux faire pareil mais moins bien, super mais ça sera sans moi :jap:


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-05-2005 à 23:13:21    

masklinn a écrit :

Ok, tu veux faire pareil mais moins bien, super mais ça sera sans moi :jap:


 
Dans ce cas la c'est pas la peine de répondre...

Reply

Marsh Posté le 04-05-2005 à 23:36:28    

Peux-tu en dire un peu plus ?
Tu confirmes que la technique utilisée par Eric Meyer fonctionne ?
Est-ce simplement un problème annexe de positionnement de ton image ?
Quel schema de positionnement as-tu choisi ?
 
Ce tutoriel peut-il t'aider :  
http://css.alsacreations.com/Tutor [...] javascript


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 04-05-2005 à 23:44:57    

Pour ton exemple, je ferais un rollover tout ce qu'il y a de plus banal. Il vaut mieux éviter le javascript un maximum, mais quand c'est juste pour un agrément visuel, ce n'est pas trop grave. Fonctionne sous IE6, FF 1.03 et Opéra 8
 
Dans ta page principale, entre <head> et </head>

Code :
  1. <head>
  2. <script language="javascript" type="text/javascript">
  3. imgmenu1 = new Image();
  4. imgmenu1.src="images/menu1.jpg";
  5. imgmenu2 = new Image();
  6. imgmenu2.src="images/menu2.jpg;
  7. imgmenu3 = new Image();
  8. imgmenu3.src="images/menu3.jpg";
  9. imgmenu4 = new Image();
  10. imgmenu4.src="images/menu4.jpg";
  11. </script>
  12. </head>


 
Dans ta feuille de style, tu enlèves la marge de gauche et dans ton doc HTML, tu fais :

Code :
  1. <div class="head2">
  2. <div class="menuhaut">
  3. <img src="images/menu1.jpg" width="100" height="25" name="imageover" id="imageover" alt="Image illustration menu"> 
  4. <a href="Accueil/accueil.php" onMouseOver="imageover.src=imgmenu1.src">Accueil</a> 
  5. <a href="EDC/edc_index.php" onMouseOver="imageover.src=imgmenu2.src">EDC</a> 
  6. <a href="ISO9001/iso_index.php" onMouseOver="imageover.src=imgmenu3.src">ISO 9001</a> 
  7. <a href="Applications/appli_index.php">Business Applications</a> 
  8. <a href="Autres/autres_index.php">Autres</a>
  9. </div>
  10. </div>


 
Voilà, si j'ai bien compris ton soucis, ça devrait coller.
P.S.: J'ai supposé que c'était du HTML, si tu fais ton site en XHTML, certaines choses sont à revoir pour le W3C Compliant.


Message édité par The-Shadow le 04-05-2005 à 23:46:22
Reply

Marsh Posté le 05-05-2005 à 00:30:59    

The-Shadow a écrit :

Il vaut mieux éviter le javascript un maximum


En l'occurence on peut l'éviter intégralement et faire ce qu'il veut faire avec un total de 0 lignes de javascript [:itm]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-05-2005 à 00:44:29    

masklinn a écrit :

En l'occurence on peut l'éviter intégralement et faire ce qu'il veut faire avec un total de 0 lignes de javascript [:itm]


Ha ouai, j'avoue, je viens de regarder ton lien, c'est pas mal, je bookmark, c'est intéressant.

Reply

Sujets relatifs:

Leave a Replay

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