Image qui grossit / zone réactive
minimouse
Messages postés
44
Statut
Membre
-
minimouse Messages postés 44 Statut Membre -
minimouse Messages postés 44 Statut Membre -
bonjour à tous,
j'ai fait un comportement (afficher/masquer les calques avec 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>
A rajouter dans le body
Est-ce que quelqu'un aurait une idée?
D'avance merci
j'ai fait un comportement (afficher/masquer les calques avec 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>
<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
<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>
Est-ce que quelqu'un aurait une idée?
D'avance merci
A voir également:
- Image qui grossit / zone réactive
- Alternative zone telechargement - Accueil - Outils
- Image iso - Guide
- Reduire taille image - Guide
- Légende image word - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
2 réponses
Salut,
Le plus simple de faire un cs ou o passage sur la foto on charge l'image agrandi ( car ta doit avoir deux image histoire de pas en déformer une ;) )
matte sa ==>> https://www.alsacreations.com/ ( ya un exemple come sa sur le site mais je c plu ou ? :O )
Bonne recherche ;)
Le plus simple de faire un cs ou o passage sur la foto on charge l'image agrandi ( car ta doit avoir deux image histoire de pas en déformer une ;) )
matte sa ==>> https://www.alsacreations.com/ ( ya un exemple come sa sur le site mais je c plu ou ? :O )
Bonne recherche ;)
C'est un gif animé ton exemple ^^ et en plus tu le voi comme mmoa.. il se déforme quand tu l'agrandi :X ( réaction normal.. car tu agrandi les pixel )
Pour revenir sur ta zone réactive tu pe utiliser le principe des map html et du "area shape" ( voir ici => https://cyberzoide.developpez.com/html/map.php3 )
Sinon si tu ve faire un zoom, tu va etre obliger d'utiliser soit du flash ( que tu fai avant ),soit un language coté client afin qu'il puissent interagir..
Je suis intéressé si tu trouve la solution mais je ne voit pas vraiment autre chose que le flash qui pourrait te donner un effet correcte ( pas comme l gif animé hein :P )
Bonne chance...
Pour revenir sur ta zone réactive tu pe utiliser le principe des map html et du "area shape" ( voir ici => https://cyberzoide.developpez.com/html/map.php3 )
Sinon si tu ve faire un zoom, tu va etre obliger d'utiliser soit du flash ( que tu fai avant ),soit un language coté client afin qu'il puissent interagir..
Je suis intéressé si tu trouve la solution mais je ne voit pas vraiment autre chose que le flash qui pourrait te donner un effet correcte ( pas comme l gif animé hein :P )
Bonne chance...
j'ai le code pour les zones réactives
et le code au niveau de mon image
mais je n'arrive pas à associer les 2 ... la zone réactive et l'image qui grossit
<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
et le code au niveau de mon image
<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>
mais je n'arrive pas à associer les 2 ... la zone réactive et l'image qui grossit
je te remercie pour ta réponse hyper rapide mais ce que je souhaite c'est un effet dans ce style là
http://yves.marsal.free.fr/myoast16.htm
c'est à dire une photo qui grossit progressivement et non pas avoir 2 photos (une petite et une plus grande). De plus ce n'est au passage de la souris sur la photo mais sur une zone réactive autre que sur la photo...