Image réactive et surbrillance

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

Résolu Image réactive et surbrillance

Message par kurdil le Jeu 26 Mai 2011 - 1:24

Bonsoir à tous !

Mon problème, que je n'ai pas retrouvé ailleurs sur le forum (et même internet), n'en est sans doute pas un pour tout bon codeur.
Moi, je découvre Laughing


Voici:

J'aimerais combiner deux codes, l'un permettant la surbrillance d'une image (voir spoiler 1), l'autre généré grâce au site http://www.image-maps.com et qui permet de creer un code HTML d'image réactive (voir spoiler 2).

Spoiler:
<img src="http://www.fun-buzz.com/wp-content/uploads/2010/10/Jack-Sparrow.jpg" onmouseover="this.src='http://www.image-maps.com/uploaded_files/1201105251827081_jack-sparrow-pirates-of-the-caribbean.jpg'" onmouseout="this.src='http://www.fun-buzz.com/wp-content/uploads/2010/10/Jack-Sparrow.jpg'"

Spoiler:
<div="" style="text-align:center; width:436px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_1201105251827081" src="http://www.image-maps.com/uploaded_files/1201105251827081_jack-sparrow-pirates-of-the-caribbean.jpg" usemap="#Image-Maps_1201105251827081" alt="" width="436" border="0" height="394">
<map id="_Image-Maps_1201105251827081" name="Image-Maps_1201105251827081">
<area shape="rect" coords="251,13,321,70" href="http://forum.forumactif.com/t304635-banniere-reactive?highlight=image+r%E9active" alt="ok ok" title="ok ok">
<area shape="rect" coords="255,181,325,238" href="http://www.image-maps.com/" alt="okok" title="okok">
<area shape="rect" coords="434,392,436,394" href="http://www.image-maps.com/index.php?aff=mapped_users_1201105251827081" alt="Image Map" title="Image Map">
</map>

<!-- Image map text links - End - -->


Ce sont des images et des zones d'exemple, le tout étant au final d'obtenir un code le plus "généraliste" pour appliquer ceci à d'autre images et image_map.

Je suis novice, vraiment, mais je saurais comprendre vos explications tant attendues Smile

merci de vous y pencher,


kurdil, forumeur-actif


Dernière édition par kurdil le Jeu 26 Mai 2011 - 19:21, édité 1 fois

kurdil
Nouveau membre

Messages : 9
Inscrit(e) le : 08/10/2006

http://ally-lrdp.actifforum.com/forum
kurdil a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image réactive et surbrillance

Message par kurdil le Jeu 26 Mai 2011 - 18:46

Avec l'aide d'un ami, voici un code fonctionnel:

Spoiler:

<script type="text/javascript">
function bbType(type){
if (type=='img0'){
document.getElementById('img0').style.display = '';
document.getElementById('img1').style.display = 'none';
}
else{
document.getElementById('img0').style.display = 'none';
document.getElementById('img1').style.display = '';
}
}
</script>
<span id="img0">
<img onmouseover="javascript:bbType('img1');" src="http://www.fun-buzz.com/wp-content/uploads/2010/10/Jack-Sparrow.jpg">
</span>
<span onmouseout="javascript:bbType('img0');" id="img1" style="display:none">
<div="" style="text-align:center; width:436px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_1201105251827081" src="http://www.image-maps.com/uploaded_files/1201105251827081_jack-sparrow-pirates-of-the-caribbean.jpg" usemap="#Image-Maps_1201105251827081" alt="" width="436" border="0" height="394">
<map id="_Image-Maps_1201105251827081" name="Image-Maps_1201105251827081">
<area shape="rect" coords="251,13,321,70" href="http://forum.forumactif.com/t304635-banniere-reactive?highlight=image+r%E9active" alt="ok ok" title="ok ok">
<area shape="rect" coords="255,181,325,238" href="http://www.image-maps.com/" alt="okok" title="okok">
<area shape="rect" coords="434,392,436,394" href="http://www.image-maps.com/index.php?aff=mapped_users_1201105251827081" alt="Image Map" title="Image Map">
</map>

</div=""></span>


Toujours images/zones de test, maintenant mon problème vient du survol des "zones liens", une fois l'image de surbrillance visible : il y a un second passage très rapide de l'image 1 a l'image 2.

une solution ?

merci

kurdil

kurdil
Nouveau membre

Messages : 9
Inscrit(e) le : 08/10/2006

http://ally-lrdp.actifforum.com/forum
kurdil a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image réactive et surbrillance

Message par kurdil le Jeu 26 Mai 2011 - 19:08

Résolu, toujours l'ami en question, voici pour vous:

Spoiler:
<script type="text/javascript">
function bbType(type){
if (type=='img0'){
document.getElementById('img1').style.display = 'none';
document.getElementById('img0').style.display = '';
}
else{
document.getElementById('img0').style.display = 'none';
document.getElementById('img1').style.display = '';
}
}
</script>
<img id="img0" onmouseover="javascript:bbType('img1');" src="http://www.fun-buzz.com/wp-content/uploads/2010/10/Jack-Sparrow.jpg">
<img id="img1" onmouseout="javascript:bbType('img0');" style="display:none"
src="http://www.image-maps.com/uploaded_files/1201105251827081_jack-sparrow-pirates-of-the-caribbean.jpg"
usemap="#img1"
alt="" width="436" border="0" height="394">
<map onmouseover="javascript:bbType('img1');" id="_img1" name="img1">
<area shape="rect" coords="251,13,321,70" href="http://forum.forumactif.com/t304635-banniere-reactive?highlight=image+r%E9active" alt="ok ok" title="ok ok">
<area shape="rect" coords="255,181,325,238" href="http://www.image-maps.com/" alt="okok" title="okok">
<area shape="rect" coords="434,392,436,394" href="http://www.image-maps.com/index.php?aff=mapped_users_1201105251827081" alt="Image Map" title="Image Map">
</map>


entre les balises MAP, ce que le site vous donne (en partie), et sinon, remplissez avec vos IRL d'images.

kuku

kurdil
Nouveau membre

Messages : 9
Inscrit(e) le : 08/10/2006

http://ally-lrdp.actifforum.com/forum
kurdil a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image réactive et surbrillance

Message par Scoubifitz le Jeu 26 Mai 2011 - 20:46

bonjour,

je suis heureux que vous ayez trouvé ce que vous cherchez ...

sinon , il y a ce site (en anglais) pour un effet en script sur les zones mappées :

http://www.netzgesta.de/mapper/

et un autre exemple uniquement en CSS avec survol (sans la map) :

http://www.pompage.net/IMG/html/sprites/ala-blobs2.html

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz 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