Sujet Précédent Sujet Suivant

Menu Special

Fermé
freeway - 7 mars 2009 à 13:27
dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009 - 7 mars 2009 à 19:54
Bonjour,
y a quelqu'un qui peut m'aider????
comment afficher une image au survol de la souris sur un menu sur un emplacement spécifier
et merci
A voir également:

6 réponses

Réponse 1 / 6
dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009 25
7 mars 2009 à 13:39
tu veux l'afficher où ton image ?
sur le menu, sous la souris ? ou ailleurs dans la page ?
0
freeway
7 mars 2009 à 14:28
merci pour ta reponse
je veux afficher l'image dans une cellule ou calque
lors du survol de la souris l'image s'affiche dans une cellule ou calque
0
Réponse 2 / 6
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 mars 2009 à 14:39
J avais fais ca il y as quelque temps pour quelqu un sur ce forum !

adapte le a tes besoins !

html et js 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>    
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <link rel="stylesheet" type="text/css" href="css.css" media="screen" />    
    <title>    
    </title>
<script type="text/javascript">
//<![CDATA[
//<!-- Script de Rad Zone pôur afficher les images via un lien
var subs_array = new Array("sub1","sub2","sub3","sub4", "sub5");
function displaySubs(the_sub){
        if (document.getElementById(the_sub).style.display==""){
        document.getElementById(the_sub).style.display = "none";return
  }
  for (i=0;i<subs_array.length;i++){
        var my_sub = document.getElementById(subs_array[i]);
        my_sub.style.display = "none";
        }
  document.getElementById(the_sub).style.display = "";
  }
//  End -->
//]]>
</script>  
  </head>  
  <body>    
    <div id="principal" style="position: absolute;">      
      <ul><li>        
        <a href="javascript:void(0)" class="headings" onmouseover="displaySubs('sub1')" onfocus="if(this.blur)this.blur()">&nbsp;Gentleman&nbsp;</a>        
        <p class="pedig" id="sub1" style="display: none;">          
          <img src="images/gentleman.jpg" alt="Gentleman" height="303" width="404" /><br />Gentleman<br />père ....<br />mère....<br />né en 1994 pie noir hongre 1m32<br />livre A<br />propriétaire JP Ithurbide<br />cavalière Marie Anna.....<br />dressage         
        </p></li><li>        
        <a href="javascript:void(0)" class="headings" onmouseover="displaySubs('sub2')" onfocus="if(this.blur)this.blur()">&nbsp;Iturri&nbsp;</a>        
        <p class="pedig" id="sub2" style="display: none;">          
          <img src="images/iturri.jpg" height="303" width="404" /><br />Iturri<br />père ....<br />mère....<br />né en 1998 pie bai hongre 1,40<br />livre A<br />propriétaire cavaliére Amaia Arbeletche<br />dressage voltige cascade obstacle         
        </p></li><li>        
        <a href="javascript:void(0)" class="headings" onmouseover="displaySubs('sub3')" onfocus="if(this.blur)this.blur()">&nbsp;Matoun de chatoa&nbsp;</a>        
        <p class="pedig" id="sub3" style="display: none;">          
          <img src="images/matoun.jpg" height="404" width="303" /><br />Matoun de chatoa<br />père urt de chahatoa<br />mère mademoiselleII par springbournecare<br />né en 2000 bai hongre taille 1,38 environ<br />pottok livre B<br />propriétaire JP Ithurbide<br />cavalière Marie Cazaumayou<br />dressage, voltige, obstacle         
        </p></li><li>        
        <a href="javascript:void(0)" class="headings" onmouseover="displaySubs('sub4')" onfocus="if(this.blur)this.blur()">&nbsp;oziriz&nbsp;</a>        
        <p class="pedig" id="sub4" style="display: none;">          
          <img src="images/oziriz.jpg" height="269" width="405" /><br />oziriz<br />père joko<br />mère dragon belza par quintze<br />né en 2002 pie noir étalon taille 1,30<br />pottok livre A<br />propiétaire Jean Michel Aizaguer<br />cavalière Joséphine Costenoble<br />joueur,gentil<br />dressage voltige cascade         
        </p></li><li>        
        <a href="javascript:void(0)" class="headings" onmouseover="displaySubs('sub5')" onfocus="if(this.blur)this.blur()">&nbsp;Pompon&nbsp;</a>        
        <p class="pedig" id="sub5" style="display: none;">          
          <img src="images/pompon.jpg" height="303" width="404" /><br />Pompon<br />Père Espantu<br />Mère Joliette II<br />né en 2003 alezan hongre taille 1,40<br />pottok livre A<br />propriétaire cavalière Caroline Etchehandy<br />caractère gourmand, brave<br />aptitude obstacle, voltige, dressage         
        </p></li>      
      </ul>    
    </div>  
  </body>
</html>


CSS 
body {
	background-color: #F4F9E6;
	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 80%;

	color: #000000;

	text-align: justify;

	padding: 5px;
}
#principal {
	top: 119px;

	padding: 0;

	width: 90%;

	z-index: 1;

	left: 50px;

}
p {

	padding: 10px;
}
ul {

	padding-right: 10px;
}
/* PLACE LES PHOTO OU TU VEUX */
p.pedig {
	font-family: Georgia, "Verdana", "Arial", "sans-serif";
	font-size: 12pt;
	color: #000000;
	position: absolute;
	left: 300px;
	top: 50px;
	padding: 10px;
	margin: 5px;
}
/*FIN*/
li {
	list-style-image: url(images/puce-fleche.png);
}
0
freeway
7 mars 2009 à 14:57
merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii bcp j veux essai d'adapter ce code avec mon besoin
0
Réponse 3 / 6
dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009 25
7 mars 2009 à 14:55
tu peux utiliser cet exemple, à adpater selon tes besoin 
<head>
<style type="text/css">
#zoneimage {
	border:1px solid #333;
}
div.image {
	visibility:hidden;
	position:relative;
	top:50px;
	left:10px;
}
</style>
</head>
<body style="margin:0;padding:0">

<a href="#" onclick="document.getElementById('image2').style.visibility = 'hidden';document.getElementById('image1').style.visibility = 'visible'">voir image 1</a>
<a href="#" onclick="document.getElementById('image1').style.visibility = 'hidden';document.getElementById('image2').style.visibility = 'visible'">voir image 2</a>

<div id="zoneimage">
<div id="image1" class="image"><img src="images/1.gif" alt="image1" /></div>
<div id="image2" class="image"><img src="images/2.gif" alt="image2" /></div>
</div></body>

Il existe bien sur d'autres méthodes, ce n'est qu'un exemple simple et rapide à déployer
0
freeway
7 mars 2009 à 15:11
merci a tous
derniere question si j veux afficher les image dans le meme emplacement
0
Réponse 4 / 6
dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009 25
7 mars 2009 à 15:14
dans ma méthode, toutes les images sont au même emplacement et le nombre est sans limite (théorique) 
<div id="zoneimage">
<div id="image1" class="image"><img src="images/1.gif" alt="image1" /></div>
<div id="image2" class="image"><img src="images/2.gif" alt="image2" /></div>
<div id="image3" class="image"><img src="images/3.gif" alt="image3" /></div>
<div id="image4" class="image"><img src="images/4.gif" alt="image4" /></div>
<div id="image5" class="image"><img src="images/5.gif" alt="image5" /></div>
<div id="image6" class="image"><img src="images/6.gif" alt="image6" /></div>
...
</div>

sert toi du style de #zoneimage" pour le placer où tu veux 
<style type="text/css">
#zoneimage {
border:1px solid #333;
position:absolute;
top:150px;
left:200px;
}

</style>
0
freeway
7 mars 2009 à 15:35
merci bcp pour votre aide le menu ca marche bien thx
0
freeway
7 mars 2009 à 19:30
reslt
j renconter un autres prob lors de permutation des images j 'ai plusieus img j sais pas comment les gerer
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009 25
7 mars 2009 à 19:32
tu peux préciser ? parce que là c'est un peu flou pour moi
t'as pas une version en ligne ?
0
freeway
7 mars 2009 à 19:41
ok j veux t'envoyer le code et tu me corrige les fautes ok
0
freeway
7 mars 2009 à 19:42
<a href="#" onmouseover="document.getElementById('image4').style.visibility = 'hidden';document.getElementById('image1').style.visibility = 'visible'"><img src="images/accessoiresFemme2.jpg" alt="" style="border-color:#FFFFFF"/></a><span class="style31"><a href="#" onmouseover="document.getElementById('image1').style.visibility = 'hidden';document.getElementById('image2').style.visibility = 'visible'"><font color="#000">Bijoux</font></a></span><br />
<span class="style31">
<a href="#" onmouseover="document.getElementById('image2').style.visibility = 'hidden';document.getElementById('image3').style.visibility = 'visible'"><font color="#000">Ceintures</font></a></span><br />
<span class="style31">
<a href="#" onmouseover="document.getElementById('image1').style.visibility = 'hidden';document.getElementById('image4').style.visibility = 'visible'"><font color="#000">Sac à main</font></a> </span><br />
<span class="style31"><a href="#" onmouseover="document.getElementById('image4').style.visibility = 'hidden';document.getElementById('image5').style.visibility = 'visible'"><font color="#000">Chaussures</font></a></span><br />
<span class="style31"><a href="#" onmouseover="document.getElementById('image5').style.visibility = 'hidden';document.getElementById('image6').style.visibility = 'visible'"><font color="#000">Lunettes</font></a></span></span><br />
<a href="#" onmouseover="document.getElementById('image7').style.visibility = 'hidden';document.getElementById('image8').style.visibility = 'visible'"><img src="images/accessoiresHomme2.jpg" alt="" width="318" height="56" style="border-color:#FFFFFF"/></a><br />
<a href="#" class="style31" onmouseover="document.getElementById('image8').style.visibility = 'hidden';document.getElementById('image7').style.visibility = 'visible'"><font color="#000">Cravates</font></a><br />


<div id="zoneimage">
<div id="apDiv25">
<div id="image1" class="image"><img src="images/accessories[1].jpg" alt="image1" /></div></div>

<div id="apDiv26">
<div id="image2" class="image"><img src="images/Bijoux.jpg" alt="image2" /></div></div>

<div id="apDiv27">
<div id="image3" class="image"><img src="images/Ceintures.jpg" alt="image3" /></div></div>

<div id="apDiv28">
<div id="image4" class="image"><img src="images/sac.jpg" alt="image4" /></div></div>


<div id="apDiv29">
<div id="image5" class="image"><img src="images/Chaussures.jpg" alt="image5" /></div></div>

<div id="apDiv30">
<div id="image6" class="image"><img src="images/Lunettesfemme.jpg" alt="image6" /></div></div>

<div id="apDiv33">
<div id="image7" class="image"><img src="images/cravates.jpg" alt="image7" /></div> </div>
<div id="apDiv32">
<div id="image8" class="image"><img src="images/hommeAccessoires.jpg" alt="image" /></div></div>
</div>
0
Réponse 6 / 6
dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009 25
7 mars 2009 à 19:54
minute papillon...
Je suis là pour t'aider, te donner des conseils ou des tuyaux, mais pas pour faire le boulot à ta place
Généralement, pour ce genre de chose je me fais payer, mais t'as probablement pas les moyens de t'offrir mes services ;)

Donc, à toi d'essayer de comprendre où ça coince
une piste :
tu utilises un onm=MouseOver pour afficher l'image, utilises le onMouseOut pour la faire disparaitre
0

Discussions similaires

Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses