Onmouseover multiple/afficher plusieurs images en n'en survolant une seuleRésolu

Question

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: 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-->

Bul3 · Accepted Answer

je viens peut-être de percuter ? le survol des images permet d'en montrer d'autres, toujours le même nombre et toujours au même endroit.... alors si c'est ça :

Bul3 · Answer

Bonjour, ch'tiot exemple.... mais... il faut les cacher aussi ? et quand ? à mon avis : shunte le "preload" des images c'est nocif. Cordialement

cs_Homonculus · Answer

merci d'avoir repondu si vite, je comprend le principe
oki, mais Je vais avoirs beaucoup d'image à faire apparaitre(c'est pour un site d'illusration)
. Et j'avais avec le code l'avantage de juste avoir à placé "l'id de l'emplacement de destination, et le chemin de limage désiré dans onmouseover pour voir apparaitre ce que je veux ou je veux. 



n'est pas possible de continuer à ce servir de swapimage?
 

mais... il faut les cacher aussi ?
et quand ?oui pardon je l'ai pas precisé mais je veux qu'avec "onmouseout" tout redevienne comme avant


à mon avis : shunte le "preload" des images
c'est nocif. sans trop changer le debat pourquoi est-ce nocif? cela n'aide pas à afficher plus vite les élément sur le site?
etre permeable a toute sorte de savoir

Bul3 · Answer

>>Et j'avais avec le code l'avantage de juste avoir à 
>>placé "l'id de l'emplacement de destination, et le 
>>chemin de limage désiré dans onmouseover pour voir 
>>apparaitre ce que je veux ou je veux. 

sauf que c'était 1 image et une seule !
il faut bien donner tous les ID à afficher 
ici c'est dans la fonction et le chemin dans les images

mais vous pouvez bien sûr les passer en paramètre,
suffit d'adapter l'appel et la fonction,
par exemple aussi : 
__ mettre un id progressif, 
un ID dont le début est commun
  avec un n° : un id progressif
  avec le nombre d'images
   
  appel affiche("i",12)
__ utiliser un array....
_ ...

>>pourquoi est-ce nocif? cela n'aide pas à afficher 
>>plus vite les élément sur le site? 
c'est exactement le contraire.
sans preload : la page est immédiatement accessible,
les images s'afficheront au fur et à mesure des besoins
le temps d'attente est "morcelé" et fonction de ce
qui est visualisé
avec preload : la page ne sera accessible que lorsque
toutes les image seront chargées, même celles qu'on
ne visualisera jamais.

cs_Homonculus · Answer

je commence à y voir plus clair dans la theorie, meme si cela reste risque d'etre laborieux lorsque je vais devoir mettre cela en pratique,et merci aussi pour le preload d'image.

néanmoins sans vouloir parraitre obstiné,ni trop bête.
n'est-il pas possible d'ajouter une fonction
à mon script swapimage.

afin de pouvoir tenter de une phrase de ce style avec un onmouseover double?



qui ferait apparaitre distinctement les images désiré dans l'id : view, et view2













car j'ai bien peur de mettre un temps fou pour reussir a faire fonctionner cela correctement.
alors que je commence juste a m'en sortir avec le swapimage.
merci

Bul3 · Answer

cs_Homonculus · Answer

Hé bien je vous remercie pour votre aide "bul3" Ce script fonctionne bien. Question bete, Comment faire si mon site contient plus de 26 dessins, car je dois mettre des Lettres pour les id. et j'ai essayé de changer par des numéros mais cela ne fonctionne pas. Et, Existe t'il une methode pour comme dans mon script faire apparaitre l'image sur une autre id directement plutot que de definir sa position a chaque fois. Mais de mon coté, j'ai reussi dans mon code à me rapprocher de ce que je recherchais.. [pic/popo.jpg ] -J'ai ajouté des swapimages au onmouseover en les separants par ";" et ça à l'air de bien fonctionner. -Malheuresement, pour le onmousout, je ne sais pas quoi mettre pour que tout retourne à l'état initial. Si vous avez une quelconque idée ou même un lien, je suis preneur. Mon Activité ne me laisse que peu de temps pour me consacrer au site, c'est pourquoi je demande tant d'aide, sans prendre le temps de me consacrer a l'apprentissage du langage. merci encore.

Bul3 · Answer

>>Comment faire si mon site contient plus de 26 dessins, 
>>car je dois mettre des Lettres pour les id.
euh.. c'était un exemple 

vous pouvez très bien mettre 
  à 
l'appel est alors : moca ("toto",....

voire 
  à 
l'appel est alors : moca ("cestpasimportantlessentielestdedonnerledebutcommunauxid",....

Bul3 · Answer

>>Existe t'il une methode pour comme dans mon script faire
>>apparaitre l'image sur une autre id directement 
>>plutot que de definir sa position a chaque fois. 
mais ???? 
une seule image sera visible à la fois dans ce cas
... non ?

Bul3 · Answer

la question était bien :
afficher plusieurs images en en survolant une seule
si le survol d'une image doit en afficher une
autre mais une seule, la réponse est toute autre
on peut d'ailleurs faire uniquement en css
dans ce cas

cs_Homonculus · Answer

Merci pour ces explications,
et Oui,oui la question est bien,"afficher plusieurs images en en survolant une seule"

je me suis peut etre mal exprimé.

est-il possible de faire apparaitre les images à l'aide du onmouseovers dans des id respectives directement, plutot que de definir leurs position à chaque fois?
 comme dans le script que j'ai utilisé:

_où "apercu_popo.png" se retrouve sur l'emplacement de d'id"view"
_où "information_popo.png" se retrouve sur l'emplacement de d'id"view2"
et où "miniature_popo_desat.png" se retrouve sur l'emplacement de l'id"Image001".
comme ci dessous
onmouseover="MM_swapImage('view','','pic/apercu_popo.png',1);MM_swapImage('view2','','pic/information_popo.png',1);MM_swapImage('Image001','','pic/miniature_popo_desat.png',1)" onmouseout=""/>

Et je vous remercie vraiment pour l'aide precieuse que vous m'avez déja fournie, je pousse le raisonnement plus loin pour essayer de bien comprendre.

Bul3 · Answer

navré, je ne comprend toujours pas
ce que vous demandez semble incompatible avec 
"afficher plusieurs images au survol d'un seule autre"

au survol sur une seule  ==> 1 seul onmouseover
afficher plusieurs images ==> position pour chacune

cs_Homonculus · Answer

ce n'est pas grave, merci quand meme, si je n'arrive pas de cette maniere je vais utilisé la votre qui est tres bien. en tout cas merci de votre patience. 

je vais faire quelques test avant de m'etre résolu,dans le titre.

car avec le script que j'avais au départ, j'ai reussi en survolant une image, grace a un onmouseover, à afficher d'autres images dans des "id" au positionnement préalablement défini.
ce que je trouve très pratique..

Me manque que un onmouseout, qui retablie tout comme à sont origine.

bonne soirée.

Bul3 · Answer

ch'tiot erreur ici :
function cacher()
{ var n=  1 ;
  while ( document.getElementById("aff"+n) )
  { document.getElementById("aff"+n).style.display ="none";
    n++;
  }
}

Bul3 · Answer

ne pas tenir compte du dernier message !
c'est bien var n=0; qu'il faut faire !

cs_Homonculus · Answer

Oui c'est exactement ça^^ on a fini par ce comprendre, merci a toi je test cela tout de suite.

cs_Homonculus · Answer

Parfait tout fonctionne, Merci encore Bul3.

problème: "Résolu"

cs_Esus1080 · Answer

Bonjour,

Je débute dans la programmation et votre discution m'a déjà bien aidé, merci.

J'essaye de suivre vos conseils pour faire des zones survolés. Pour ma part, je souhaite faire apparaître une image au survol d'un texte. J'ai différents texte dans un tableau (1 texte par ligne) et je souhaiterai pouvoir faire une image différente sur chaque survol de texte.

Pour la première ligne, ça marche bien, voici mon code :





Texte de test







Par contre lorsque que je veux ajouter une 2ieme ligne avec un texte différent et une apparition d'image différent, je n'arrive pas à comprendre la programmation qu'il faut réaliser.

Merci d'avance pour votre aide.

Bul3 · Answer

>>je souhaite faire apparaître une image au survol d'un texte
plusieurs "textes" ? 
chacune une image différente ?  
l'image toujours au même endroit ou
fonction de l'emplacement du texte ?

mais à priori, javascript inutile
html+css doivent suffirent

cs_Esus1080 · Answer

Oui en effet, j'ai un tableau avec 5 lignes de texte. Je souhaite que quand je survole la première ligne, une image apparaisse sous le tableau. Lorsque je survole la 2ieme ligne une autre image apparait au meme endroit (sous letableau) ... et cela pour les 5 lignes.

Merci

Bul3 · Answer

aller... ch'tiot exemple ?!? 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 .....

cs_Esus1080 · Answer

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.

cs_Esus1080 · Answer

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

Bul3 · Answer

>>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

cs_Esus1080 · Answer

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.

Bul3 · Answer

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 texte1 , ---- texte2 , ---- texte3

cs_Esus1080 · Answer

C'est bon j'ai compris et ça marche nikel, encor milles merci

Bul3 · Answer

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.

cs_Esus1080 · Answer

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.

Nik0p0le · Answer

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 ...

meliweb · Answer

Meilleure réponse trouvée :

onMouseOver="MM_swapImage('firstimgname','','firstimgsrc.gif','secondimagename','','secondimagesrc.gif',1)"

Onmouseover multiple/afficher plusieurs images en n'en survolant une seule

31 réponses

Votre réponse

Discussions similaires