OVH Cloud OVH Cloud

votre aide pour un rollover sur un mot

2 réponses
Avatar
dav
pouriez vous m'aider :

j'ai une liste de mots dans une page HTML et je voudrai qu'en survolant
chaque mot une image s'affiche ( soit dans la page, soit dans une autre
page) mais de préférence dans un popup adapté a l'image.....

j'ai beau essayer avec OnMouseOver et OnMouseOut je n'y arrive pas....
merci,
dav

2 réponses

Avatar
Yann-Erwan Perio
dav wrote:

j'ai une liste de mots dans une page HTML et je voudrai qu'en survolant
chaque mot une image s'affiche ( soit dans la page, soit dans une autre
page) mais de préférence dans un popup adapté a l'image.....



Une approche courante pour ce genre de problématique est d'entourer les
mots/expressions d'éléments SPAN et d'effectuer ou provoquer les
changements de source à partir d'un handler "mouseover".


---
<img src="whatever">
<span id="showHelloWorld">Hello, World!</span>
<span id="showByeWorld">Bye, World</span>!

<script type="text/javascript">
function initWordHandlers(){
var spans=document.getElementsByTagName("span");
for(var ii=0; ii<spans.length; ii++)
if(spans[ii].id.indexOf("show")==0)
spans[ii].onmouseover=wordHandler;
}

function wordHandler(evt){
document.images[0].src= {
"HelloWorld" : "hello.png",
"ByeWorld" : "bye.png"
}[this.id.substr(4)];
}

window.onload=function(evt){
if(document.getElementsByTagName)
initWordHandlers();
}
</script>
---


Cette approche fonctionne bien tant que le contenu du span reste du
texte; si d'autres éléments HTML sont présents alors il faut en tenir
compte dans le handler (relatedTarget/fromElement, contains).

Une autre approche, plus complexe mais plus souple, consiste à utiliser
des "ranges", mais le code produit n'est supporté, à ce jour, que par IE
et Mozilla.


HTH
Yep.

Avatar
Le Fou
dav a écrit

j'ai une liste de mots dans une page HTML et je voudrai qu'en survolant
chaque mot une image s'affiche ( soit dans la page, soit dans une autre
page) mais de préférence dans un popup adapté a l'image.....
j'ai beau essayer avec OnMouseOver et OnMouseOut je n'y arrive pas....


Va voir là :
http://batraciens.net/css-astuces/commentaires-survol3.htm

--
A'tchao

Le Fou
http://perso.club-internet.fr/ehiller/
http://club.exocet.free.fr/
http://www.ffessm-cd84.com/