image réactive : modification de l'image au passage de la souris

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Mer 31 Oct 2012 - 23:23

Bonjour/bonsoir !

j'ai suivi ce tutoriel là http://forum.forumactif.com/t231069-creer-une-image-reactive pour l'appliquer à une carte. Je me demandais comment faire en sorte, en plus des liens, de modifier l'image au passage de la souris sur chacune des zones.
une petite illustration (parce que je ne suis pas certaine d'être très claire avec mes explications =S) :
carte de base : http://i36.servimg.com/u/f36/12/56/43/35/carte115.jpg
lors du survol de la zone : http://i46.servimg.com/u/f46/12/56/43/35/rouge110.jpg
enfin, ce n'est qu'un exemple ^^"

merci d'avance ! Very Happy


Dernière édition par MlleAlys le Jeu 1 Nov 2012 - 22:11, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Kinotto le Jeu 1 Nov 2012 - 14:22

Bonjour,

C'est tout à fait réalisable à l'aide de ce code :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Image qui change au passage de la souris</title>
    </head>
    <body>
        <img src="image_1.png" alt="Image" onmouseover="javascript:this.src='image_2.png';" onmouseout="javascript:this.src='image_1.png';" />
    </body>
</html>

Pensez à modifier les champs de liens. Wink

En espérant vous avoir aidé,
Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 14:39

merci ! Very Happy
mais je n'y arrive pas... est ce qu'on m'expliquer comment fonctionne le code et ce que je dois remplacer ? =S
et, qu'en est-il des zones délimitées grâce au tuto ? dois-je ajouter ce code au premier ? où ça ?

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Kinotto le Jeu 1 Nov 2012 - 15:21

Re,

Hum...à la base le code que je vous ai donné n'a aucun rapport avec le tutoriel que vous aviez mentionné. Il vous suffit de modifier image_1.png par votre image, ainsi de suite pour la _2 et remplacez également la dernière par la même image utilisée pour le premier. Wink

Cordialement

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 15:56

mais alors l'image change lorsqu'on passe la souris sur l'image, mais pas sur une zone particulière n'est ce pas ? c'est plutôt ça que je cherche en fait ^^"

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Kinotto le Jeu 1 Nov 2012 - 16:02

Re,

Sur un zone particulière, je ne pense pas que cela soit réalisable...
Mais effectivement le code que je vous ai donné ne fait que changer l'image.

Cdlt

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 16:07

ok, merci beaucoup pour la réponse en tout cas ^^

y aurait-il sinon un autre moyen de mettre en évidence la zone tracée ?

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Kinotto le Jeu 1 Nov 2012 - 16:10

Re,

Avec de l'opacité peut-être ?
Cdlt

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 16:19

comment ça ?


ah, sinon j'ai trouvé cela en farfouillant : http://jsfiddle.net/sb9j7/
c'est à peu près l'idée que je cherche, mais si je reconnais le code html, je n'y connais rien en javascript... ^^"
Où/comment l'installer, et comment pourrais-je l'adapter ?

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Kinotto le Jeu 1 Nov 2012 - 16:29

Re,

un exemple assez simple pour une opacité 0.3 en dessous du stade visible ;
Code:
filter: alpha (opacity=70);
     -moz-opacity: 0.7;
     opacity:  0.7;

Pour l'effet au passage de la souris, il va nous falloir deux étapes : un code normal affiché sans évènement à déclencher de la part du visiteur, et un code au passage de la souris à l'aide de la propriété hover.
CSS
Code:
.test{
filter: alpha (opacity=100);
     -moz-opacity: 1.0;
     opacity:  1.0;}

/*ici l'opacité est normale et maximale*/

.test:hover{
filter: alpha (opacity=70);
     -moz-opacity: 0.7;
     opacity:  0.7;}

/*ici l'opacité est à 0.3 en dessous de un*/
HTML
Code:
<div class="test"><img src="URL DE L'IMAGE"></img></div>

Regardez le résultat vous-même. Wink
On peut ensuite ajouter d'autres effets, comme une transition évoluée dont on peut contrôler le temps.

Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 16:49

mais comment l'intégrer au code du tutoriel, c'est à dire faire zone par zone sur ma carte ? ^^"

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Kinotto le Jeu 1 Nov 2012 - 17:07

Re,

Cela me dépasse complètement... Le mieux serait d'effectuer plusieurs essais pour voir et attendre un résultat potable. :/
Mais la première technique que nous avions abordée au début de ce sujet ne vous convient-elle pas ? pourtant elle me semble bien relever le problème, puisqu'on passe à un niveau graphique qu'on allie au codage. rambo

Cdlt

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 18:16

Eh bien, pas vraiment : je voudrais que chaque zone soit mise successivement en valeur au passage de la souris sur l'une d'elles, comme dans l'exemple des légumes mis plus haut, et non pas juste quand la souris passe sur l'image en général =S

Il faudrait juste que je comprenne comment fonctionnel'exemple des légumes de façon à l'adapter (simplifié ^^") à ma carte : Je ne comprends pas le code javascript... ><"


MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Manumanu le Jeu 1 Nov 2012 - 19:11

Bonjour,

Il s'agit d'une imagemap. Voici un outil qui devrait t'aider : http://www.image-maps.com/

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 19:48

oui je connais c'est ce que j'ai utilisé pour définir mes zones...


EDIT :
aaaaaaaah !!! je crois que j'ai trouvé quelque chose, je vais essayer de suite ! \o/


Dernière édition par MlleAlys le Jeu 1 Nov 2012 - 20:08, édité 2 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Adam_sfp le Jeu 1 Nov 2012 - 20:03

Bonsoir

Vous pouvez essayer ce plugin
http://davidlynch.org/projects/maphilight/docs/
exemple
http://jsfiddle.net/adam_sfp/sb9j7/1189/

cordialement



Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 20:08

Effectivement, j'avais dû faire une erreur dans les codes. Seulement maintenant, je suis un peu perdue : Je me retrouve à la sortie avec :
- un code html : ça ok j'ai compris comment il fonctionne, enfin je crois ^^" :
Code:
<img id="Image-Maps_4201211011439537" src="http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="1000" height="1470" alt="" />
<map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537">
<area shape="poly" coords="326,418,250,432,248,377,171,285,128,299,90,288,33,296,9,333,38,504,71,536,95,602,40,645,43,709,264,845,303,831,323,770,303,645,327,602,280,550,376,405," href="http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg" alt="" title="" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i46.servimg.com/u/f46/12/56/43/35/rouge110.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg';" />
</map>
- et un code css :
Code:
<style type="text/css">
   dl.image_map {
        display:block;
        width:1000px;
        height:1470px; background:url(http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg);
        position:relative;
        margin:2px auto 2px auto;}
</style>

<dl class="image_map">
</dl>
et là j'avoue que je suis un peu perdue : il ne ressemble pas à ce que l'on met dans le css habituellement, alors comment dois-je faire exactement (surtout des balises "<dl>" ? dois je les mettre dans mon sujet ou dans le css ?) ?




EDIT :
pardon, je n'avais pas vu le nouveau post.
le premier lien ne fonctionne pas, et le deuxième... il n'y a pas de changement de l'image lors du survol de la zone, si ? =S

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Manumanu le Jeu 1 Nov 2012 - 20:45

Ton second code n'est pas du CSS, c'est du HTML avec du CSS intégré dans une balise style.

Ce CSS ne correspond de toute façon pas à ton code HTML au-dessus.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 20:47

...

je ne comprends pas alors, à quoi correspond ce code ? Que dois je faire finalement pour obtenir sur mon sujet le résultat obtenu sur le générateur de carte ? Neutral

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Adam_sfp le Jeu 1 Nov 2012 - 20:54

@MlleAlys a écrit:

EDIT :
pardon, je n'avais pas vu le nouveau post.
le premier lien ne fonctionne pas, et le deuxième... il n'y a pas de changement de l'image lors du survol de la zone, si ? =S
Bonsoir

les liens fonctionnent de mon coté...
pour le 2eme essayez en cliquant sur run

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 21:03

les deux liens fonctionnent à présent, cela devait être un problème de ma connexion...
par contre, que dois-je faire du code javascript ? ^^"



(dans le cas du générateur, le code html ne fonctionne pas, et cela m'affiche l'image de départ avec la zone puis la fin du code sous forme de texte :
)

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Adam_sfp le Jeu 1 Nov 2012 - 21:08

Bonsoir

Poster votre code
que vous obtenez avec ce site
http://www.image-maps.com/

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 21:14

j'obtiens ce code :
Code:
<div style="text-align:center; width:1000px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201211011439537" src="http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="1000" height="1470" alt="" />
<map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537">
<area shape="poly" coords="361,406,251,422,247,367,170,286,124,298,88,284,41,294,16,324,41,521,70,541,94,599,41,641,43,711,268,845,309,838,326,759,322,618,265,542," href="www.estrelane.forumactif.com" alt="ouest" title="ouest" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i46.servimg.com/u/f46/12/56/43/35/rouge110.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg';" />
</map>
</div>

Tient, je n'arrive pas à afficher l'image que ça me donne ici Shocked , cela n'affiche que le code :

<div style="text-align:center; width:1000px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201211011439537" src="http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="1000" height="1470" alt="" />
<map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537">
<area shape="poly" coords="361,406,251,422,247,367,170,286,124,298,88,284,41,294,16,324,41,521,70,541,94,599,41,641,43,711,268,845,309,838,326,759,322,618,265,542," href="www.estrelane.forumactif.com" alt="ouest" title="ouest" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i46.servimg.com/u/f46/12/56/43/35/rouge110.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211011439537').src= 'http://i36.servimg.com/u/f36/12/56/43/35/carte114.jpg';" />
</map>
</div>

voilà ce que cela donne sur un de mes sujets : http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#50 (ne faites pas attention à la trop grande taille de l'image ^^")

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Adam_sfp le Jeu 1 Nov 2012 - 21:23

Bonsoir

Poster votre code
que vous obtenez avec ce site
http://www.image-maps.com/
*donnez le code html obtenu sans le modifier...

en suivant cette exemple
http://www.screencast.com/t/uh4XPgsQ

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 21:39

oui, c'est bien ce que je fais depuis le début...

Code:
<div style="text-align:center; width:500px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201211011439537" src="http://i46.servimg.com/u/f46/12/56/43/35/cartem10.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="500" height="735" alt="" />
<map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537">
<area shape="poly" coords="194,198,126,213,126,186,86,144,12,157,20,254,46,298,16,325,22,355,153,427,158,365,172,299,134,276," href="http://estrelane.forumactif.com/c1-les-terres-de-l-ouest" alt="ouest" title="ouest"  />
<area shape="rect" coords="498,733,500,735" href="http://www.image-maps.com/index.php?aff=mapped_users_4201211011439537" alt="Image Map" title="Image Map" />
</map>
</div>
           

(ça ne marche toujours pas ici : )
<div style="text-align:center; width:500px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201211011439537" src="http://i46.servimg.com/u/f46/12/56/43/35/cartem10.jpg" usemap="#Image-Maps_4201211011439537" border="0" width="500" height="735" alt="" />
<map id="_Image-Maps_4201211011439537" name="Image-Maps_4201211011439537">
<area shape="poly" coords="194,198,126,213,126,186,86,144,12,157,20,254,46,298,16,325,22,355,153,427,158,365,172,299,134,276," href="http://estrelane.forumactif.com/c1-les-terres-de-l-ouest" alt="ouest" title="ouest" />
<area shape="rect" coords="498,733,500,735" href="http://www.image-maps.com/index.php?aff=mapped_users_4201211011439537" alt="Image Map" title="Image Map" />
</map>
</div>

mais cela fonctionne sur mon forum : http://estrelane.forumactif.com/t6-un-peu-de-geographie-la-carte#50


Pour cette étape là pas de soucis, mais lorsque j'essaye en plus d'utiliser la fonction "Use Rollover Image", cela me donne ce que j'ai posté dans mon message précédent (d'où mon sujet, dans l'espoir d'avoir un autre moyen d'obtenir le même effet).

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par Adam_sfp le Jeu 1 Nov 2012 - 21:55

Bonsoir

C'est normal que cela ne fonctionne pas ici
il faut déjà activer le html

http://forum.forumactif.com/t285442-activation-du-html-3-points-de-controle?highlight=html

On va ensuite utiliser le script de ce site.
http://davidlynch.org/projects/maphilight/docs/
A ce moment la coller ceci dans gestion des codes javascript
En cochant sur toutes les pages.


Code:
(function(G){var B,J,C,K,N,M,I,E,H,A,L;B=document.namespaces;J=!!document.createElement("canvas").getContext;if(!(J||B)){G.fn.maphilight=function(){return this};return }if(J){E=function(O){return Math.max(0,Math.min(parseInt(O,16),255))};H=function(O,P){return"rgba("+E(O.substr(0,2))+","+E(O.substr(2,2))+","+E(O.substr(4,2))+","+P+")"};C=function(O){var P=G('<canvas style="width:'+O.width+"px;height:"+O.height+'px;"></canvas>').get(0);P.getContext("2d").clearRect(0,0,P.width,P.height);return P};var F=function(Q,O,R,P,S){P=P||0;S=S||0;Q.beginPath();if(O=="rect"){Q.rect(R[0]+P,R[1]+S,R[2]-R[0],R[3]-R[1])}else{if(O=="poly"){Q.moveTo(R[0]+P,R[1]+S);for(i=2;i<R.length;i+=2){Q.lineTo(R[i]+P,R[i+1]+S)}}else{if(O=="circ"){Q.arc(R[0]+P,R[1]+S,R[2],0,Math.PI*2,false)}}}Q.closePath()};K=function(Q,T,U,X,O){var S,P=Q.getContext("2d");if(X.shadow){P.save();if(X.shadowPosition=="inside"){F(P,T,U);P.clip()}var R=Q.width*100;var W=Q.height*100;F(P,T,U,R,W);P.shadowOffsetX=X.shadowX-R;P.shadowOffsetY=X.shadowY-W;P.shadowBlur=X.shadowRadius;P.shadowColor=H(X.shadowColor,X.shadowOpacity);var V=X.shadowFrom;if(!V){if(X.shadowPosition=="outside"){V="fill"}else{V="stroke"}}if(V=="stroke"){P.strokeStyle="rgba(0,0,0,1)";P.stroke()}else{if(V=="fill"){P.fillStyle="rgba(0,0,0,1)";P.fill()}}P.restore();if(X.shadowPosition=="outside"){P.save();F(P,T,U);P.globalCompositeOperation="destination-out";P.fillStyle="rgba(0,0,0,1);";P.fill();P.restore()}}P.save();F(P,T,U);if(X.fill){P.fillStyle=H(X.fillColor,X.fillOpacity);P.fill()}if(X.stroke){P.strokeStyle=H(X.strokeColor,X.strokeOpacity);P.lineWidth=X.strokeWidth;P.stroke()}P.restore();if(X.fade){G(Q).css("opacity",0).animate({opacity:1},100)}};N=function(O){O.getContext("2d").clearRect(0,0,O.width,O.height)}}else{C=function(O){return G('<var style="zoom:1;overflow:hidden;display:block;width:'+O.width+"px;height:"+O.height+'px;"></var>').get(0)};K=function(P,S,T,W,O){var U,V,Q,R;U='<v:fill color="#'+W.fillColor+'" opacity="'+(W.fill?W.fillOpacity:0)+'" />';V=(W.stroke?'strokeweight="'+W.strokeWidth+'" stroked="t" strokecolor="#'+W.strokeColor+'"':'stroked="f"');Q='<v:stroke opacity="'+W.strokeOpacity+'"/>';if(S=="rect"){R=G('<v:rect name="'+O+'" filled="t" '+V+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+T[0]+"px;top:"+T[1]+"px;width:"+(T[2]-T[0])+"px;height:"+(T[3]-T[1])+'px;"></v:rect>')}else{if(S=="poly"){R=G('<v:shape name="'+O+'" filled="t" '+V+' coordorigin="0,0" coordsize="'+P.width+","+P.height+'" path="m '+T[0]+","+T[1]+" l "+T.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+P.width+"px;height:"+P.height+'px;"></v:shape>')}else{if(S=="circ"){R=G('<v:oval name="'+O+'" filled="t" '+V+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(T[0]-T[2])+"px;top:"+(T[1]-T[2])+"px;width:"+(T[2]*2)+"px;height:"+(T[2]*2)+'px;"></v:oval>')}}}R.get(0).innerHTML=U+Q;G(P).append(R)};N=function(O){G(O).find("[name=highlighted]").remove()}}M=function(P){var O,Q=P.getAttribute("coords").split(",");for(O=0;O<Q.length;O++){Q[O]=parseFloat(Q[O])}return[P.getAttribute("shape").toLowerCase().substr(0,4),Q]};L=function(Q,P){var O=G(Q);return G.extend({},P,G.metadata?O.metadata():false,O.data("maphilight"))};A=function(O){if(!O.complete){return false}if(typeof O.naturalWidth!="undefined"&&O.naturalWidth==0){return false}return true};I={position:"absolute",left:0,top:0,padding:0,border:0};var D=false;G.fn.maphilight=function(Q){Q=G.extend({},G.fn.maphilight.defaults,Q);if(!J&&G.browser.msie&&!D){document.namespaces.add("v","urn:schemas-microsoft-com:vml");var P=document.createStyleSheet();var O=["shape","rect","oval","circ","fill","stroke","imagedata","group","textbox"];G.each(O,function(){P.addRule("v\\:"+this,"behavior: url(#default#VML); antialias:true")});D=true}return this.each(function(){var W,T,a,S,V,X,Z,U,Y;W=G(this);if(!A(this)){return window.setTimeout(function(){W.maphilight(Q)},200)}a=G.extend({},Q,G.metadata?W.metadata():false,W.data("maphilight"));Y=W.get(0).getAttribute("usemap");S=G('map[name="'+Y.substr(1)+'"]');if(!(W.is("img")&&Y&&S.size()>0)){return }if(W.hasClass("maphilighted")){var R=W.parent();W.insertBefore(R);R.remove();G(S).unbind(".maphilight").find("area[coords]").unbind(".maphilight")}T=G("<div></div>").css({display:"block",background:'url("'+this.src+'")',position:"relative",padding:0,width:this.width,height:this.height});if(a.wrapClass){if(a.wrapClass===true){T.addClass(G(this).attr("class"))}else{T.addClass(a.wrapClass)}}W.before(T).css("opacity",0).css(I).remove();if(G.browser.msie){W.css("filter","Alpha(opacity=0)")}T.append(W);V=C(this);G(V).css(I);V.height=this.height;V.width=this.width;Z=function(f){var c,d;d=L(this,a);if(!d.neverOn&&!d.alwaysOn){c=M(this);K(V,c[0],c[1],d,"highlighted");if(d.groupBy){var b;if(/^[a-zA-Z][-a-zA-Z]+$/.test(d.groupBy)){b=S.find("area["+d.groupBy+'="'+G(this).attr(d.groupBy)+'"]')}else{b=S.find(d.groupBy)}var g=this;b.each(function(){if(this!=g){var h=L(this,a);if(!h.neverOn&&!h.alwaysOn){var e=M(this);K(V,e[0],e[1],h,"highlighted")}}})}if(!J){G(V).append("<v:rect></v:rect>")}}};G(S).bind("alwaysOn.maphilight",function(){if(X){N(X)}if(!J){G(V).empty()}G(S).find("area[coords]").each(function(){var b,c;c=L(this,a);if(c.alwaysOn){if(!X&&J){X=C(W.get());G(X).css(I);X.width=W.width();X.height=W.height();W.before(X)}c.fade=c.alwaysOnFade;b=M(this);if(J){K(X,b[0],b[1],c,"")}else{K(V,b[0],b[1],c,"")}}})});G(S).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",Z).bind("mouseout.maphilight",function(b){N(V)});W.before(V);W.addClass("maphilighted")})};G.fn.maphilight.defaults={fill:true,fillColor:"00ff00",fillOpacity:0.2,stroke:true,strokeColor:"ff0000",strokeOpacity:1,strokeWidth:1,fade:true,alwaysOn:false,neverOn:false,groupBy:false,wrapClass:true,shadow:false,shadowX:0,shadowY:0,shadowRadius:6,shadowColor:"000000",shadowOpacity:0.8,shadowPosition:"outside",shadowFrom:false}})(jQuery);

$(function() {
    $('.map').maphilight();
});

Ensuite ceci la ou vous voulez mettre votre image par exemple en page d'accueil
Code:
<img class="map" src="http://i46.servimg.com/u/f46/12/56/43/35/cartem10.jpg" width="500" height="735" usemap="#usa"> <map name="usa">
<area shape="poly" coords="194,198,126,213,126,186,86,144,12,157,20,254,46,298,16,325,22,355,153,427,158,365,172,299,134,276," href="http://estrelane.forumactif.com/c1-les-terres-de-l-ouest" alt="ouest" title="ouest"  />
<area shape="rect" coords="498,733,500,735" href="http://www.image-maps.com/index.php?aff=mapped_users_4201211011439537" alt="Image Map" title="Image Map" />

</map>

Pour obtenir ceci
http://jsfiddle.net/adam_sfp/sb9j7/1190/

*Vous pouvez changer ces valeurs dans le script pour l'adapter si besoin

$.fn.maphilight.defaults = {
fill: true,
fillColor: '000000',
fillOpacity: 0.2,
stroke: true,
strokeColor: 'ff0000',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image réactive : modification de l'image au passage de la souris

Message par MlleAlys le Jeu 1 Nov 2012 - 22:08

ça marche !!!! :youopi:
(exact pour le hatml, je n'avais même pas pensé qu'il était désactivé ici ^^")

merci beaucoup !!
et merci aussi à toi manumanu !

je ferme le sujet, merci encore !

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum