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

Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Dernière intervention
17 août 2009
- - Dernière réponse :  meliweb - 20 juil. 2018 à 17:00
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-->
Afficher la suite 

Votre réponse

20/31 réponses

Meilleure réponse
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
3
Merci
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 :

<script type="text/javascript">
function cacher()
{	var n=0;
while ( document.getElementById("aff"+n) )
{	document.getElementById("aff"+n).style.display="none";
n++;
}
}
function montrer()
{	for ( var n=0; n < arguments.length; n++ )
{	if ( document.getElementById("aff"+n) )
{ 	document.getElementById("aff"+n).src=arguments[n];
document.getElementById("aff"+n).alt=arguments[n];
document.getElementById("aff"+n).style.display="inline";
}
}
}
</script>







Dire « Merci » 3

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CodeS-SourceS

Codes Sources a aidé 104 internautes ce mois-ci

Commenter la réponse de Bul3
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
Bonjour,
ch'tiot exemple....


<script>
function affiche()
{ document.getElementById("i1").style.display='inline';
document.getElementById("i2").style.display='inline';
}
</script>




mais... il faut les cacher aussi ?
et quand ?


à mon avis : shunte le "preload" des images
c'est nocif.

Cordialement
Commenter la réponse de Bul3
Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Dernière intervention
17 août 2009
0
Merci
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
Commenter la réponse de cs_Homonculus
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
>>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.
Commenter la réponse de Bul3
Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Dernière intervention
17 août 2009
0
Merci
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
Commenter la réponse de cs_Homonculus
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
<script type="text/javascript">
function moca(quoi,stl)
{	var num=1;
while ( document.getElementById(quoi+num) )
{	document.getElementById(quoi+num).style.display=stl;
num++;
}
}
</script>














Commenter la réponse de Bul3
Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Dernière intervention
17 août 2009
0
Merci
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..

	  

<td>
[pic/popo.jpg ]</td>


-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.
Commenter la réponse de cs_Homonculus
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
>>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",....
Commenter la réponse de Bul3
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
>>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 ?
Commenter la réponse de Bul3
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
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
Commenter la réponse de Bul3
Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Dernière intervention
17 août 2009
0
Merci
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.
Commenter la réponse de cs_Homonculus
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
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
Commenter la réponse de Bul3
Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Dernière intervention
17 août 2009
0
Merci
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.
Commenter la réponse de cs_Homonculus
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
ch'tiot erreur ici :
function cacher()
{ var n= 1 ;
while ( document.getElementById("aff"+n) )
{ document.getElementById("aff"+n).style.display ="none";
n++;
}
}
Commenter la réponse de Bul3
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
ne pas tenir compte du dernier message !
c'est bien var n=0; qu'il faut faire !
Commenter la réponse de Bul3
Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Dernière intervention
17 août 2009
0
Merci
Oui c'est exactement ça^^ on a fini par ce comprendre, merci a toi je test cela tout de suite.
Commenter la réponse de cs_Homonculus
Messages postés
8
Date d'inscription
mardi 28 juillet 2009
Dernière intervention
17 août 2009
0
Merci
Parfait tout fonctionne, Merci encore Bul3.

problème: "Résolu"
Commenter la réponse de cs_Homonculus
Messages postés
7
Date d'inscription
jeudi 27 août 2009
Dernière intervention
28 août 2009
0
Merci
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.
Commenter la réponse de cs_Esus1080
Messages postés
4934
Date d'inscription
samedi 1 juillet 2006
Dernière intervention
2 février 2015
0
Merci
>>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
Commenter la réponse de Bul3
Messages postés
7
Date d'inscription
jeudi 27 août 2009
Dernière intervention
28 août 2009
0
Merci
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
Commenter la réponse de cs_Esus1080

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.