Image réactive et surbrillance
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Image réactive et surbrillance
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
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).
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
merci de vous y pencher,
kurdil, forumeur-actif
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
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
merci de vous y pencher,
kurdil, forumeur-actif
Dernière édition par kurdil le Jeu 26 Mai 2011 - 19:21, édité 1 fois
Re: Image réactive et surbrillance
Avec l'aide d'un ami, voici un code fonctionnel:
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
- 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
Re: Image réactive et surbrillance
Résolu, toujours l'ami en question, voici pour vous:
entre les balises MAP, ce que le site vous donne (en partie), et sinon, remplissez avec vos IRL d'images.
kuku
- 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
Re: Image réactive et surbrillance
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
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
Sujets similaires
» image réactive : modification de l'image au passage de la souris
» Image reactive sur le logo/image du forum
» Image du Staff's réactive
» Image réactive qui ne fonctionne pas
» Image réactive
» Image reactive sur le logo/image du forum
» Image du Staff's réactive
» Image réactive qui ne fonctionne pas
» Image réactive
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum