hover : afficher image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : hover : afficher image

JustOne72

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 :

HTML :
<div class="head2">
<div class="menuhaut">
<a href="Accueil/accueil.php">Accueil</a>
<a href="EDC/edc_index.php">EDC</a>
<a href="ISO9001/iso_index.php">ISO 9001</a>
<a href="Applications/appli_index.php">Business Applications</a>
<a href="Autres/autres_index.php">Autres</a>
</div>
</div>

Code :

CSS :
.head2 {
background-image: url('design/head2.gif');
width: 1050px;
height: 35px;
}
.menuhaut {
float: left; /* on aligne le menu vertical à droite de son conteneur, head2 */
margin-right: 10px;
margin-top: 10px;
margin-left:100px;
}
.menuhaut a {
font-size: 16px;
font-weight:bold;
color:#000000;
text-decoration: none; /* pour éviter le soulignement au survol */
margin-left: 45px; /* espacement entre chaque sous-menu */
}
.menuhaut a:hover {
background-image:url(design/1.jpg);
background-repeat:no-repeat;
}

Publicité

masklinn

í dag viðrar vel til loftárása

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

JustOne72

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

sibelius

Vous êtes sûr ?

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

masklinn

í dag viðrar vel til loftárása

JustOne72 a écrit :

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

JustOne72

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

sibelius

Vous êtes sûr ?

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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 :

<head>
<script language="javascript" type="text/javascript">
imgmenu1 = new Image();
imgmenu1.src="images/menu1.jpg";
imgmenu2 = new Image();
imgmenu2.src="images/menu2.jpg;
imgmenu3 = new Image();
imgmenu3.src="images/menu3.jpg";
imgmenu4 = new Image();
imgmenu4.src="images/menu4.jpg";
</script>
</head>

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

Code :

<div class="head2">
<div class="menuhaut">
<img src="images/menu1.jpg" width="100" height="25" name="imageover" id="imageover" alt="Image illustration menu">
<a href="Accueil/accueil.php" onMouseOver="imageover.src=imgmenu1.src">Accueil</a>
<a href="EDC/edc_index.php" onMouseOver="imageover.src=imgmenu2.src">EDC</a>
<a href="ISO9001/iso_index.php" onMouseOver="imageover.src=imgmenu3.src">ISO 9001</a>
<a href="Applications/appli_index.php">Business Applications</a>
<a href="Autres/autres_index.php">Autres</a>
</div>
</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

masklinn

í dag viðrar vel til loftárása

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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.

FORUM HardWare.fr

Programmation

HTML/CSS

hover : afficher image

Sujets relatifs
[PhpWebGallery] Gestion D'image sur 2 nv de Mini	besoin 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 bulle	Monter une image en mémoire
[HTML] faire apparaitre une image en survolant une autre	Afficher page HTML dans mail
Plus de sujets relatifs à : hover : afficher image

Page générée en 0.090 secondes