Image qui grossit/zone réactive

Version imprimable

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:

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>  </script>
A rajouter dans le body
Code:

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

24/04/2007, 15h43
eveilside

salut

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

@ +

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:

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:

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:

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

24/04/2007, 16h05
eveilside

re !

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

}
24/04/2007, 16h16
minimouse
Code:

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 ?

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

comme ceci :

Code:

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

encore merci pour tes réponses

voilà le javascript que j'ai dans <head>

Code:

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

comment j'intègre ce que tu m'as donné ?
merci de ta patience

alors ta fonction :

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
<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
 
}
 
}
 
 
 
function maFonction()
{
 
document.getElementById('smallslot').style.visibility="visible";
 
expand(); 
 
}
 
 
 
//-->
 
</script>