Onmouseover multiple/afficher plusieurs images en n'en survolant une seule [Résolu]

Signaler
Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Statut
Membre
Dernière intervention
17 août 2009
-
 meliweb -
Bonjour et merci de vous être arrêtés, je débute et je suis en train de tenter de créer mon site.

J'utilise un "MM_swapImage" qui me permet, au survol de ma souris sur une image"A", d'afficher une image"B" ou je veux dans ma page.

et je cherche désespérément depuis quelques jours, la possibilité de:

Faire apparaitre, au survol de ma souris sur une image"A",
une image"B" où je veux dans ma page.
+
une image"C" ou un text où je veux dans ma page.

Mon manque de connaissance en javascript m'en empêche.J'ai fouillé dans différent topic sur le net mais aucun ne correspond précisement a ma demande.
Merci d'avance.
_____________________________________________
voici mon bout de code si cela peut aider:

LE SCRIPT SWAPIMAGE:

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

MA PAGE HTML:




<--!voila ci dessous l'endroit apparait la premiere image-->







<--!voila ci dessous l'endroit ou je voudrait faire apparaitre la deuxieme image ou texte-->

31 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
aller... ch'tiot exemple ?!?
<style type="text/css">
img { display:none;
position:absolute;
top:250px;
left:50px;
}
span:hover img { display:inline; }
</style>
texte1

,
----
texte2

,
----
texte3




vous adapterez à vos besoins
avec les class qui vont bien, si nécessaire !
span ne doit pas être obligatoire ?
tr:hover ou td:hover ça doit le faire
.....
Messages postés
7
Date d'inscription
jeudi 27 août 2009
Statut
Membre
Dernière intervention
28 août 2009

Merci pour la réponse, on effet ça marche bien, je vais essayer dans mon cas en insérant dans ma page.

Il n'y a plus les onmouseover et onmouseout ? Quelle fonction permet de faire apparaître l'image au contact du texte, je n'arrive pas très bien à décrypter ton code. Désolé mais je suis un petit débutant ^^.

En tout cas merci.
Messages postés
7
Date d'inscription
jeudi 27 août 2009
Statut
Membre
Dernière intervention
28 août 2009

Bon quand j'insère le morceau de code dans ma page, j'ai problème. En effet, j'ai déjà des images dans ma page modèle que je souhaite avoir tout le temps. Mais avec le style type, toutes mes images disparaissent ... :(

Y'a t il un moyen de faire des groupes d'images et de faire disparaîre/apparaître uniquement certaines images ?

Encor merci et désolé si mes questions sont nu peu nul
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>>Il n'y a plus les onmouseover et onmouseout ?
non,, non. uniquement en css

>>fonction permet de faire apparaître l'image
pas une "fonction" : c'est
span:hover img { display:inline; }

>>j'ai déjà des images dans ma page modèle que je
>>souhaite avoir tout le temps. Mais avec le style
>>type, toutes mes images disparaissent ... :(
oui oui : je disais :
[i]vous adapterez à vos besoins
avec les class qui vont bien, si nécessaire !
/i
en effet, dans l'exemple on marque :
img { display:none; ....
ce qui cache toutes les images
Messages postés
7
Date d'inscription
jeudi 27 août 2009
Statut
Membre
Dernière intervention
28 août 2009

Bonjour,

J'ai cherché un peu sur me net des explications sur la fonction display, pour savoir comment la renseigner, mais j'ai beau tourner le code dans différents sens, je n'arrive toujours pas à lui dire de masquer que certaines images.

si je mets display:image1, ça ne marche pas. A quel endroit doit-on renseigner l'image que l'on souhaite faire apparître tout le temps et que toutes les autres sont masquées ?

Encor merci d'avance.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
euh.. je redis ????
[i]...
img { display:none; ....
...cache toutes les images ...
/i
ce n'est pas display qu'il faut modifier !
mais ce à quoi il s'adresse
ici, img { c'est toutes les images !!! }

exemple ( on peut faire différemment bien entendu,
class au span ou autres )
mais regardez aussi !doctype

<style type="text/css">
.toto { display:none;
position:absolute;
top:250px;
left:50px;
}
span:hover .toto { display:inline; }
</style>

texte1 ,
----
texte2 ,
----
texte3
Messages postés
7
Date d'inscription
jeudi 27 août 2009
Statut
Membre
Dernière intervention
28 août 2009

C'est bon j'ai compris et ça marche nikel, encor milles merci
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
vous avez vérifié avec tous les navigateurs ?
( perso, je n'ai testé qu'avec FF3 )
si ça ne fonctionne pas, déjà, regardez !doctype
comme déjà dit... je vous laisse chercher.
Messages postés
7
Date d'inscription
jeudi 27 août 2009
Statut
Membre
Dernière intervention
28 août 2009

J'ai essayé avec IE7 et Firefox3 et ça marche avec les deux pour le moment. Si je rencontre des problèmes avec un autre programme je vous le signalerai.
Messages postés
7
Date d'inscription
jeudi 18 janvier 2007
Statut
Membre
Dernière intervention
25 février 2010

Bonjour ,

J'ai récupéré un code sur un systeme d'<area shape="poly" et je l'ai adapté , j'ai refait la partie graphique .
Un problème se pose lorsque je test en local sous wamp ,la carte de france en fond disparait lorsque je passe sur une des zones ou sont rentrées les coordonneés .

Exemple : Une zone s'affiche quand je passe dessus et disparait(onmouseover,onmouseout) ,seulement lorsque je passe sur cette zone la carte de france disparait également et revient lorsque je quitte la zone ,cela se produit uniquement sur wamp avec cette adresse :

http://localhost/autres/News+table/carte.html

et non pas lorsque je lance le fichier sous firefox avec mon adresse :

file:///C:/wamp/www/autres/News+table/carte.html

Un problème d'adresse? Je ne trouve pas la solution j'ai essayé avec les css que j'utilise mais je n'arrive pas à les superposer.

Le code est assez long donc je préfère ne pas vous le donner tout de suite , avez-vous des idées?

Sinon est-ce qu'il est possible de garder l'image de fond avec la zone selectionnée quand on passe dessus en utilisant le onmouseover?

Merci de votre aide ...
Meilleure réponse trouvée :

onMouseOver="MM_swapImage('firstimgname','','firstimgsrc.gif','secondimagename','','secondimagesrc.gif',1)"