Menu Special

freeway -
dolmenhir Messages postés 251 Statut Membre - 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

Afficher la suite

A voir également:

Menu Special
Caractere special - Guide
Menu déroulant excel - Guide
Symbole special - Guide
Canon quick menu - Télécharger - Utilitaires
Ecriture special facebook - Guide

6 réponses

Réponse 1 / 6

dolmenhir Messages postés 251 Statut Membre 25

tu veux l'afficher où ton image ?
sur le menu, sous la souris ? ou ailleurs dans la page ?

freeway

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

Réponse 2 / 6

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

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);
}

freeway

merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii bcp j veux essai d'adapter ce code avec mon besoin

Réponse 3 / 6

dolmenhir Messages postés 251 Statut Membre 25

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

freeway

merci a tous
derniere question si j veux afficher les image dans le meme emplacement

Réponse 4 / 6

dolmenhir Messages postés 251 Statut Membre 25

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>

freeway

merci bcp pour votre aide le menu ca marche bien thx

freeway

reslt
j renconter un autres prob lors de permutation des images j 'ai plusieus img j sais pas comment les gerer

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

Posez votre question

Réponse 5 / 6

dolmenhir Messages postés 251 Statut Membre 25

tu peux préciser ? parce que là c'est un peu flou pour moi
t'as pas une version en ligne ?

freeway

ok j veux t'envoyer le code et tu me corrige les fautes ok

freeway

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

Réponse 6 / 6

dolmenhir Messages postés 251 Statut Membre 25

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

Discussions similaires

TV continental Edison bloqué sur le menu

menu caché

Mon PC marque press the esc key for startup menu

♡ Coeur vide : Comment le faire ? (Solution !)

Comment activer le Bluetooth sur une TV Samsung ?

Menu Special

6 réponses

Votre réponse

Discussions similaires

Newsletters