Image qui grossit/zone réactive

**minimouse** · 24/04/2007, 15h07

bonjour à tous,

j'ai fait un comportement (afficher/masquer les calques sur zone réactive, avec Dreamweaver), tout fonctionne correctement mais j'aimerais que lorsque la souris passe sur la zone réactive la photo apparaisse en grossissant. j'ai trouvé ce script
A rajouter entre <head> et </head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<script>
<!--
 
function expand() {
 
if (smallslot.width<=300) {
 
x=window.setTimeout('expand()', 100)
 
smallslot.width=smallslot.width + 5
 
smallslot.height=smallslot.height + 5
 
}
 
else {
 
setTimeout('reduce()', 500)
 
}
 
}
 
function reduce() {
 
if (smallslot.width>250) {
 
x=window.setTimeout('reduce()', 100)
 
smallslot.width=smallslot.width - 5
 
smallslot.height=smallslot.height - 5
 
}
 
}
 
//-->
 
</script>

A rajouter dans le body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="slot1"
style="width:250;height:110" onmouseover="expand()" align="left">
 
<dd><img id="smallslot" src="image.gif" width="250" height="110"
 
style="position:absolute; top:350; left:275; visibility:visible"> </dd>
 
</div>

mais je n'arrive pas à associer les comportements (afficher/masquer) et le fait que la photo grossisse ...

Est-ce que quelqu'un aurait une idée?
D'avance merci

**eveilside** · 24/04/2007, 15h43

salut , lors de ton passage avec la souris sur ta zone reactive tu lance une fonction qui montre ton image et celle qui la fait grossir et le tour est joué !

@ +

**minimouse** · 24/04/2007, 15h57

je te remercie Eveilside pour ta réponse :

je suis d'accord avec toi mais comment je fais ?
voilà ce que j'ai au niveau des zones réactives

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<body onmouseout="MM_showHideLayers('calccarte','','show','calcnord','','hide','calcnordouest','','hide','calcouest','','hide','calcsud','','hide','calcnordest','','hide')">
<div id="calccarte" style="position:absolute; left:16px; top:4px; width:366px; height:968px; z-index:1"><img balasrc="Carte.jpg" name="Image1" width="1000" height="596" border="0" usemap="#Map" id="Image1"> 
  <map name="Map">
    <area shape="poly" coords="463,225,451,228,451,238,460,246,470,248,479,248,488,253,490,265,505,264,503,253" href="#" onMouseOver="MM_showHideLayers('calccarte','','show','calcnord','','show')" onMouseOut="MM_showHideLayers('calccarte','','show','calcnord','','hide')">
    <area shape="poly" coords="446,249,436,254,429,259,418,267,403,264,397,259,397,283,415,288,430,291,434,305,428,319,436,330,445,320,456,312,468,311,488,315,491,304,480,282,484,270,488,263,485,255,452,246" href="#" onMouseOver="MM_showHideLayers('calccarte','','show','calnord','','hide','calcnordouest','','show')">
    <area shape="poly" coords="392,284,377,287,372,277,362,277,345,285,348,292,349,300,365,306,375,309,384,317,388,324,394,328,403,326,416,323,422,318,424,310,427,304,428,296,411,294" href="#" onMouseOver="MM_showHideLayers('calccarte','','show','calcnord','','hide','calcnordouest','','hide','calcsud','','show')" onMouseOut="MM_showHideLayers('calccarte','','show','calcnord','','hide','calcnordouest','','hide','calcsud','','hide')">etc etc

et au niveau de mon image j'ai ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="calcnord" style="position:absolute; left:13px; top:35px; width:128px; height:103px; z-index:2; visibility: hidden;"> 
  <div align="center"><img src="nord.jpg" width="200" height="143"><br>
    Images du nord</div>
</div>

Comment je dois faire pour associer les 2 éléments (la zone réactive et le code) pour que l'image grossisse ?
car si j'associe ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="calcnord" style="position:absolute; left:13px; top:35px; width:128px; height:103px; z-index:2; visibility: hidden;"> 
  <div align="center"><img src="nord.jpg" width="200" height="143"><br>
    Images du nord</div>
</div>

à mon image ça ne fonctionne pas ...

**eveilside** · 24/04/2007, 16h05

dans ton areashape>>onMouseOver :

tu met un truc du style : maFonction();

ta fonction ressemble a :

function maFonction()
{

document.getElementById('ton_image').style.visibility="visible";
ta_fonction_qui_fait_grossir();

}

**minimouse** · 24/04/2007, 16h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function maFonction()
{
 
document.getElementById('ton_image').style.visibility="visible";
ta_fonction_qui_fait_grossir();
 
}

désolée mais ou est-ce que je dois mettre ce bout de code ? peux-tu reprendre mon code pour que je vois ou je dois l'insérer ?

**eveilside** · 24/04/2007, 16h25

la fonction javascript tu la met entre <head> et </head>

comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
function maFonction()
{
 
document.getElementById('ton_image').style.visibility="visible";
 //met un id : <img src="tonimage" id="ton_image" style:"visibility: hidden">
 
ta_fonction_qui_fait_grossir(); //remplace par le vrai nom de la fonction
 
}
 
</script>

Puis onMouseOver="maFonction()"

tchao

Image qui grossit/zone réactive

JavaScript

Vue hybride

Discussions similaires

Partager

Partager