Rollover texte et image

[Résolu/Fermé]
Signaler
Messages postés
184
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
18 août 2012
-
Messages postés
184
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
18 août 2012
-
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.

8 réponses

Messages postés
117
Date d'inscription
mardi 14 août 2007
Statut
Membre
Dernière intervention
28 août 2008
50
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:


<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 ;)
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Messages postés
184
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
18 août 2012
10
Merci pour ton aide absurdsystem!

Mais le résultat de ton script est le même que celui que j'ai trouvé, si j'ai bien compris.
Messages postés
117
Date d'inscription
mardi 14 août 2007
Statut
Membre
Dernière intervention
28 août 2008
50
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...
Messages postés
184
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
18 août 2012
10
Et si au lieu de l'image(gauche) on met un lien, est-ce que ça marcherais?
Messages postés
117
Date d'inscription
mardi 14 août 2007
Statut
Membre
Dernière intervention
28 août 2008
50
je viens de tester ça fonctionne avec un lien

Ta plus qu'a tester tout ça !!!
Messages postés
184
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
18 août 2012
10
Désolé de t'embêter avec ça mais, est-ce que le script je l'introduit directement dans l'article oubien il faut l'introduire dans la feuille de style CSS? Et dans le <div> je vois que tu n'a rien changé, c'est normal?.
Messages postés
117
Date d'inscription
mardi 14 août 2007
Statut
Membre
Dernière intervention
28 août 2008
50
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
Messages postés
184
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
18 août 2012
10
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.
Messages postés
117
Date d'inscription
mardi 14 août 2007
Statut
Membre
Dernière intervention
28 août 2008
50
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>
Messages postés
184
Date d'inscription
samedi 21 janvier 2006
Statut
Membre
Dernière intervention
18 août 2012
10
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.