Rollover texte et image
Résolu
Manshiz
Messages postés
184
Date d'inscription
Statut
Membre
Dernière intervention
-
Manshiz Messages postés 184 Date d'inscription Statut Membre Dernière intervention -
Manshiz Messages postés 184 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous!
J'ai trouver un simple code pour faire un rollover sur une image que voici:
<a href="url de l'article" onmouseover="document.photo.src='url de l'image 2'" onmouseout="document.photo.src='url de l'image 1'"><img src="url de l'image 1" border="0" name="photo" /></a>
J'aimerai savoir si il est possible de faire ceci:
à gauche(texte):Paris à droite: image de Paris.
En sélectionnant le texte, l'image apparaît à droite.
Merci de votre aide.
J'ai trouver un simple code pour faire un rollover sur une image que voici:
<a href="url de l'article" onmouseover="document.photo.src='url de l'image 2'" onmouseout="document.photo.src='url de l'image 1'"><img src="url de l'image 1" border="0" name="photo" /></a>
J'aimerai savoir si il est possible de faire ceci:
à gauche(texte):Paris à droite: image de Paris.
En sélectionnant le texte, l'image apparaît à droite.
Merci de votre aide.
A voir également:
- Rollover texte et image
- Extraire texte d'une image - Guide
- Image iso - Guide
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Insérer une image dans word sans bouger le texte - Guide
8 réponses
slt !
un rollover sur un simple texte la je sais pas si c'est possible, par contre rien n'empeche que tu fasse ton texte sous forme d'image et de faire un rollover "à distance"
je te donne le code :
Javascript:
et pour les images ça donne ça :
<img src="images/rien.gif" width="448" height="170" id="hor" alt=""> la c'est ton image qui doit changer lorsqu'on passe par dessus ton image "paris", elle a l'id 'hor'
<div onMouseOver="MM_swapImage('hor','','image de Paris',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Paris.gif" alt="" width="211" height="61" border="0"></div>
j'espere que tu comprendra ;)
un rollover sur un simple texte la je sais pas si c'est possible, par contre rien n'empeche que tu fasse ton texte sous forme d'image et de faire un rollover "à distance"
je te donne le code :
Javascript:
<script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); 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; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&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>
et pour les images ça donne ça :
<img src="images/rien.gif" width="448" height="170" id="hor" alt=""> la c'est ton image qui doit changer lorsqu'on passe par dessus ton image "paris", elle a l'id 'hor'
<div onMouseOver="MM_swapImage('hor','','image de Paris',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Paris.gif" alt="" width="211" height="61" border="0"></div>
j'espere que tu comprendra ;)
oui ça doit etre le meme mais l'utilisation est differente la quand tu passe sur ton image de gauche ça change l'image de droite...
je viens de tester ça fonctionne avec un lien
Ta plus qu'a tester tout ça !!!
Ta plus qu'a tester tout ça !!!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
le script met-le dans la page concernée c'est à dire entre les balises <head></head>
sinon pour le reste fait-ça :
<img src="images/rien.gif" width="448" height="170" id="hor" alt=""> la c'est ton image qui doit changer lorsqu'on passe par dessus ton image "paris", elle a l'id 'hor'
<a href="lien" onMouseOver="MM_swapImage('hor','','image de Paris',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Paris.gif" alt="" width="211" height="61" border="0"></a>
la ça fonctionne nikel
sinon pour le reste fait-ça :
<img src="images/rien.gif" width="448" height="170" id="hor" alt=""> la c'est ton image qui doit changer lorsqu'on passe par dessus ton image "paris", elle a l'id 'hor'
<a href="lien" onMouseOver="MM_swapImage('hor','','image de Paris',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Paris.gif" alt="" width="211" height="61" border="0"></a>
la ça fonctionne nikel
Là je nage complètement :(
dans <a href="lien" ; lien je dois introduire le lien de l'article?. Par-ce que, j'ai bien un lien hypertexte en positionnant la souris sur l'image, mais il n'y a rien qui se passe.
dans <a href="lien" ; lien je dois introduire le lien de l'article?. Par-ce que, j'ai bien un lien hypertexte en positionnant la souris sur l'image, mais il n'y a rien qui se passe.
oui moi j'ai mis lien mais c'est a toi de mettre le tien
je recapitule :
tu va avoir :
<img src="images/rien.gif" width="448" height="170" id="hor" alt="">
donc ça c'est l'image qui doit changer
et la ton lien
<a href="url de l'article" onMouseOver="MM_swapImage('hor','','image de Paris',1)" onMouseOut="MM_swapImgRestore()">nom-du-lien</a>
je recapitule :
tu va avoir :
<img src="images/rien.gif" width="448" height="170" id="hor" alt="">
donc ça c'est l'image qui doit changer
et la ton lien
<a href="url de l'article" onMouseOver="MM_swapImage('hor','','image de Paris',1)" onMouseOut="MM_swapImgRestore()">nom-du-lien</a>
Quand tu me parle des balises <head> est-ce que tu te réfère à ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Espace-Bulle</title>
Si c'est le cas j'ai un sérieux problème, je ne peux pas le faire introduire; c'est vrai que j'aurais dû te dire que j'ai un blog et non un site personnel. Et dans mon cas je ne peux rien faire; c'est pour celà que je cherchais quelque chose de simple pour pouvoir le mettre directement dans mon article.
Dans tout les cas, je suis content pour toi que ça fonctionne, peut-être ais-je donné une idée; et je te remercie infiniment pour ta patience et ton travail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Espace-Bulle</title>
Si c'est le cas j'ai un sérieux problème, je ne peux pas le faire introduire; c'est vrai que j'aurais dû te dire que j'ai un blog et non un site personnel. Et dans mon cas je ne peux rien faire; c'est pour celà que je cherchais quelque chose de simple pour pouvoir le mettre directement dans mon article.
Dans tout les cas, je suis content pour toi que ça fonctionne, peut-être ais-je donné une idée; et je te remercie infiniment pour ta patience et ton travail.
Mais le résultat de ton script est le même que celui que j'ai trouvé, si j'ai bien compris.