Agrandir la zone où survol la souris

Fermé
horju - 3 nov. 2009 à 10:44
 horju - 4 nov. 2009 à 11:44
Bonjour,
Bonjour
1.j'ai fais un menu déroulent avec une image pour bouton comment agrandir la zone où survol la souris à toute mon image selon sa position
voici monn code:

<style type="text/css">
#info {height:400px; position:relative;}
body { background-color:#EBE7D8; }


#titre {padding:0 0 10px 0; margin:0; list-style:none;
width:181px; background: # no-repeat
left bottom; position:absolute; z-index:500; top:0.5em; left:0.2em;
font-family:arial, sans-serif; }





#adn {padding:0 0 10px 0; margin:0; list-style:none;
width:181px; background: # no-repeat
left bottom; position:absolute; z-index:500; top:6em; left:-4em;
font-family:arial, sans-serif; }

#menuOuter {padding:0 0 10px 0; margin:0; list-style:none;
width:0; height:0; background: no-repeat
left bottom; position:absolute; z-index:300; top:8em; left:17em;
font-family:arial, sans-serif; border:2px solid black; }
#menuOuter li#menu1 {float:left; width:201px;}
#menuOuter table {border-collapse:collapse; padding:0; margin:0;
width:0; height:0; margin:-1px -4px -1px -4px;}
#menuOuter li#menu1 a#menuLink { padding:10px 0 0 0;
margin:0; no-repeat left:4; top;
height:20em; width:18em; font-size:12px;
font-family:arial, sans-serif; color:#000; font-weight:bold;
text-decoration:none;}
#menuOuter ul {position:absolute; left:-1; top:-2; padding:0; margin:0;
list-style:none; height:0; overflow:hidden;}

#menuOuter li#menu1 a#menuLink:hover {border:0; color:#4B0082; position:relative; left:-25em; }
#menuOuter1 li#menu1:hover > a#menuLink {color:#4B0082;}
#menuOuter :hover ul {position:relative; left:7em; top:-7.5em; height:auto;
overflow:visible; padding:-5 ; margin:0; list-style:none; width:28em;{display:block;} }

#menuOuter :hover ul ul {position:absolute; left:-22em; top:37px; height:0;
overflow:hidden;width:282em;{display:block;}}

#menuOuter :hover ul li a {display:; padding:-5; margin:20;
width:181px;
no-repeat left:10em; top: 9d9a9a; color: 9d9a9a; text-align:left; line-height:18px;
cursor:pointer; font-weight:; text-decoration:none; }

#menuOuter :hover ul :hover {background-position:left -25em;}

#menuOuter :hover ul li:hover > a {background-position:left -25em;}

#menuOuter :hover ul li {float:left;}

#menuOuter :hover ul :hover ul li a:hover {color:#000;}
#menuOuter :li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuOuter :hover li a:hover
{
background-image: none;
background-color: #F2462E;
}

div#background {width:700px; height:465px; background:url(black.jpg);}


#menuOuter1 {padding:0 0 10px 0; margin:0; list-style:none;
width:0; height:0; background: no-repeat
left bottom; position:absolute; z-index:300; top:22em; left:42em;
font-family:arial, sans-serif; border:2px solid black; }
#menuOuter1 li#menu1 {float:left; width:201px;}
#menuOuter1 table {border-collapse:collapse; padding:0; margin:0;
width:0; height:0; margin:-1px -4px -1px -4px;}
#menuOuter1 li#menu1 a#menuLink { padding:10px 0 0 0;
margin:0; no-repeat left top;
height:20em; width:18em; font-size:12px;
font-family:arial, sans-serif; color:#000; font-weight:bold;
text-decoration:none;}
#menuOuter1 ul {position:absolute; left:81; top:-2; padding:0; margin:0;
list-style:none; height:0; overflow:hidden;}

#menuOuter1 li#menu1 a#menuLink:hover {border:0; color:#4B0082; position:relative; left:-25em; }
#menuOuter1 li#menu1:hover > a#menuLink {color:#4B0082;}
#menuOuter1 :hover ul {position:relative; left:6em; top:-7.5em; height:auto;
overflow:visible; padding:0 ; margin:0; list-style:none; width:18em;}

#menuOuter1 :hover ul ul {position:absolute; left:17em; top:37px; height:0;
overflow:hidden;}

#menuOuter1 :hover ul li a {display:; padding:0; margin:0;
width:181px;
no-repeat left:1em; top; color:; text-align:left; line-height:18px;
cursor:pointer; font-weight:; text-decoration:none; }

#menuOuter1 :hover ul :hover {background-position:left -5em;}

#menuOuter1 :hover ul li:hover > a {background-position:left 0em;}

#menuOuter1 :hover ul li {float:left;}

#menuOuter1 :hover ul :hover ul li a:hover {color:#000;}

div#background {width:700px; height:465px; background:url(black.jpg);}



#menuOuter2 {padding:0 0 10px 0; margin:0; list-style:none;
width:0; height:0; background: no-repeat
left bottom; position:absolute; z-index:300; top:8em; left:42em;
font-family:arial, sans-serif; bo3rder:2px solid black; }
#menuOuter2 li#menu1 {float:left; width:201px;}
#menuOuter2 table {border-collapse:collapse; padding:0; margin:0;
width:0; height:0; margin:-1px -4px -1px -4px;}
#menuOuter2 li#menu1 a#menuLink { padding:10px 0 0 0;
margin:0; no-repeat left top;
height:20em; width:18em; font-size:12px;
font-family:arial, sans-serif; color:#000; font-weight:bold;
text-decoration:none;}
#menuOuter2 ul {position:absolute; left:81; top:-2; padding:0; margin:0;
list-style:none; height:0; overflow:hidden;}

#menuOuter2 li#menu1 a#menuLink:hover {border:0; color:#4B0082; position:relative; left:-25em; }
#menuOuter2 li#menu1:hover > a#menuLink {color:#4B0082;}
#menuOuter2 :hover ul {position:relative; left:6em; top:-7.5em; height:auto;
overflow:visible; padding:0 ; margin:0; list-style:none; width:18em;}

#menuOuter2 :hover ul ul {position:absolute; left:17em; top:37px; height:0;
overflow:hidden;}

#menuOuter2 :hover ul li a {display:; padding:0; margin:0;
width:181px;
no-repeat left:1em; top; color:; text-align:left; line-height:18px;
cursor:pointer; font-weight:; text-decoration:none; }

#menuOuter2 :hover ul :hover {background-position:left -5em;}

#menuOuter2 :hover ul li:hover > a {background-position:left 0em;}

#menuOuter2 :hover ul li {float:left;}

#menuOuter2 :hover ul :hover ul li a:hover {color:#000;}

div#background {width:700px; height:465px; background:url(black.jpg);}



#menuOuter3 {padding:0 0 10px 0; margin:0; list-style:none;
width:0; height:0; background: no-repeat
left bottom; position:absolute; z-index:300; top:22em; left:17em;
font-family:arial, sans-serif; bo3rder:2px solid black; }
#menuOuter3 li#menu1 {float:left; width:201px;}
#menuOuter3 table {border-collapse:collapse; padding:0; margin:0;
width:0; height:0; margin:-1px -4px -1px -4px;}
#menuOuter3 li#menu1 a#menuLink { padding:10px 0 0 0;
margin:0; no-repeat left top;
height:20em; width:18em; font-size:12px;
font-family:arial, sans-serif; color:#000; font-weight:bold;
text-decoration:none;}
#menuOuter3 ul {position:absolute; left:81; top:-2; padding:0; margin:0;
list-style:none; height:0; overflow:hidden;}

#menuOuter3 li#menu1 a#menuLink:hover {border:0; color:#4B0082; position:relative; left:-25em; }
#menuOuter3 li#menu1:hover > a#menuLink {color:#4B0082;}
#menuOuter3 :hover ul {position:relative; left:6em; top:-7.5em; height:auto;
overflow:visible; padding:0 ; margin:0; list-style:none; width:18em;}

#menuOuter3 :hover ul ul {position:absolute; left: 7em; top:37px; height:0;
overflow:hidden;}

#menuOuter3 :hover ul li a {display:; padding:0; margin:0;
width:1841px;
no-repeat left:1em; top; color:#; text-align:left; line-height:18px;
cursor:pointer; font-weight:; text-decoration:none; }

#menuOuter3 :hover ul :hover {background-position:left -5em;}

#menuOuter3 :hover ul li:hover > a {background-position:left 0em;}

#menuOuter3 :hover ul li {float:left;}

#menuOuter1 :hover ul :hover ul li a:hover {color:#000;}

div#background {width:700px; height:465px; background:url(black.jpg);}


</style>



</style>

<MARQUEE>
<a href=""><IMG height=100 src="molecule.jpg" width=100 border=0></a>      
                  
<a href=""><IMG height=100 src="Gerson-TZSP-Nauka.jpg" width=100 border=0></a>       
<IMG height=100 src="chromosome.gif" width=100 border=0>
</MARQUEE>


<ul id="menuOuter">
<li class="drop" id="menu1"<<HEAD></HEAD><IMG HEIGHT="120" SRC="ANCONSULTATION-EN-GENETIQUE.gif" WIDTH="120">
<ul class="niveau2">
<li><A HREF="1-1CONSULTATION DYSMORPHOLOGIE.php3" style="border: 1px solid black;
height:20px;">CONSULTATION DYSMORPHOLOGIE</a></li>
<li> <A HREF="1-1CONSULTATION NEUROLOGIQUE.php3" style="border: 1px solid black;
height:40px;">CONSULTATION NEUROLOGIQUE</a></li>

<li><A HREF="1-1CONSULTATION PRESYMPTOMATIQUE.php3" style="border: 1px solid black;
height:20px;">CONSULTATION PRESYMPTOMATIQUE</a></li>

<li><A HREF="1-1CONSULTATION CONSEIL GENETIQUE.php3" style="border: 1px solid black;
height:20px;">CONSULTATION CONSEIL GENETIQUE</a></li>




</ul>
</li>
</ul>




<ul id="menuOuter1">
<li class="drop" id="menu1"<IMG HEIGHT="120" SRC="ANCENTRE-PLURIDISCIPLINAIRE.gif" WIDTH="120">

<ul>
<li><a href="4-1framepage-genetique-clinique.php3" style="border: 1px solid black;
height:20px;">CONSULTATIONS de
<BR> GENETIQUE CLINIQUE</a></li>
<li><a href="#link" style="border: 1px solid black;
height:40px;"></a></li>
<li><a href="2-1framepage-genetique-clinique.php3" style="border: 1px solid black;
height:20px;">CONSULTATIONS_de
<BR> GYNECOLOGIE</a></li>
<li><a href="#link" style="border: 1px solid black;
height:40px;"></a></li><li><a href="2-1framepage-genetique-clinique.php3" style="border: 1px solid black;
height:20px;">PONCTIONS OVULAIRE</a></li>

</ul>
</li>
</ul>

<ul id="menuOuter2">
<li class="drop" id="menu1"<IMG HEIGHT="120" SRC="ANCENTRE-DE-REFERENCE.gif" WIDTH="120">

<ul>
<li><A HREF="CENTRE DE REFERENCE.php3" style="border: 1px solid black;
height:20px;">CENTRE DE REFERENCE</a></li>

</ul>
</li>
</ul>

<ul id="menuOuter3">
<li class="drop" id="menu1"<IMG HEIGHT="120" SRC="ANLABO.gif" WIDTH="120">

<ul>

<li><a href="2-1framepage-genetiquemedical.php3" style="border: 1px solid black;
height:20px;">GENETIQUE MEDICAL</a></li>
<li><a href="2-2LABOCHROMOSOMI.PHP3" style="border: 1px solid black;
height:40px;">GENETIQUE CHROMOSOMIQUE</a></li>

<li><A HREF="2-3framepage-biologiecellulaire.php3" style="border: 1px solid black;
height:40px;">BIOLOGIE CELLULAIRE</a></li>

<li><A HREF="2-4framepage-oncologie.php3" style="border: 1px solid black;
height:40px;">ONCOLOGIE</a></li>


</ul>
</li>
</ul>

<ul id="adn">

<li>
<IMG height=400 src="ADN1.png" width=400 border=0 > </li>

</ul>

<ul id="titre">

<li>
<IMG height=100 src="DEPARTEMENT DE GENETIQUE MEDICAL.png" width=150 > </li>

</ul>
<!-- Créée avec Matizha Sublime 3.0 * http://www.matizha.com -->
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="Matizha Sublime 3.0">
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="">
</HEAD>
<BODY>




</BODY>
</HTML>
merci julie
A voir également:

1 réponse

Salut donc il te suffit de faire un petut javaScript pour agrandir ton image lorsque la souris la survole:

<img src="url-de-ton-image" onmouseover="this.height=60; this.width='65'" onmouseout="this.height=30; this.width=35" >


onmouseover: height;width: la taille que tu veux lui donner quand tu survoles avec ta souris
onemouseout:height;width: la taille par de ton image défaut

dis moi si c'est sa que tu voulais exactement...
0
merci
ce n'est pas ce que je veux
Qd je change mon image de position , la zone de sur vole de la souris ne change pas : le menu apparrait au passage de la souriss ) merci beaucoup juju
0