Rollover texte et image

Résolu/Fermé
Manshiz Messages postés 184 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 18 août 2012 - 16 août 2007 à 09:06
Manshiz Messages postés 184 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 18 août 2012 - 16 août 2007 à 16:53
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

absurdsystem Messages postés 117 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 28 août 2008 50
16 août 2007 à 11:40
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
Manshiz Messages postés 184 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 18 août 2012 10
16 août 2007 à 11:48
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.
0
absurdsystem Messages postés 117 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 28 août 2008 50
16 août 2007 à 11:51
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...
0
Manshiz Messages postés 184 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 18 août 2012 10
16 août 2007 à 12:47
Et si au lieu de l'image(gauche) on met un lien, est-ce que ça marcherais?
0
absurdsystem Messages postés 117 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 28 août 2008 50
16 août 2007 à 13:24
je viens de tester ça fonctionne avec un lien

Ta plus qu'a tester tout ça !!!
0
Manshiz Messages postés 184 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 18 août 2012 10
16 août 2007 à 15:37
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?.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
absurdsystem Messages postés 117 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 28 août 2008 50
16 août 2007 à 15:43
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
0
Manshiz Messages postés 184 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 18 août 2012 10
16 août 2007 à 16:32
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.
0
absurdsystem Messages postés 117 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 28 août 2008 50
16 août 2007 à 16:39
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>
0
Manshiz Messages postés 184 Date d'inscription samedi 21 janvier 2006 Statut Membre Dernière intervention 18 août 2012 10
16 août 2007 à 16:53
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.
0