Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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="https://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
avatar

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="https://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
avatar

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="https://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
avatar

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

Scoubifitz
Membre actif

Masculin
Messages : 3633
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