Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1201 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  hover : afficher image

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

hover : afficher image

n°1072265
JustOne72
Posté le 04-05-2005 à 18:37:29  profilanswer
 

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. }

mood
Publicité
Posté le 04-05-2005 à 18:37:29  profilanswer
 

n°1072276
masklinn
í dag viðrar vel til loftárása
Posté le 04-05-2005 à 18:44:14  profilanswer
 

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


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1072311
JustOne72
Posté le 04-05-2005 à 19:00:13  profilanswer
 

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

n°1072315
sibelius
Vous êtes sûr ?
Posté le 04-05-2005 à 19:05:32  profilanswer
 

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
n°1072378
masklinn
í dag viðrar vel til loftárása
Posté le 04-05-2005 à 20:31:27  profilanswer
 

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:


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1072522
JustOne72
Posté le 04-05-2005 à 23:13:21  profilanswer
 

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...

n°1072539
sibelius
Vous êtes sûr ?
Posté le 04-05-2005 à 23:36:28  profilanswer
 

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
n°1072552
The-Shadow
Développeur
T'as été voir dans ton profil?
Posté le 04-05-2005 à 23:44:57  profilanswer
 

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
n°1072600
masklinn
í dag viðrar vel til loftárása
Posté le 05-05-2005 à 00:30:59  profilanswer
 

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]


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1072614
The-Shadow
Développeur
T'as été voir dans ton profil?
Posté le 05-05-2005 à 00:44:29  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  hover : afficher image

 

Sujets relatifs
[PhpWebGallery] Gestion D'image sur 2 nv de Minibesoin d'aide pr afficher la valeur d'1 "label"
converssion entier -> string avec "Integer'image"[JAVA/Résolu] problème de rafraichissement avec une image ...
gestin d'un click sur une image[Dreamweaver] Résolution/Image
texte qui suit la courbe d'une image en forme de bulleMonter une image en mémoire
[HTML] faire apparaitre une image en survolant une autreAfficher page HTML dans mail
Plus de sujets relatifs à : hover : afficher image


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR