Se connecter avec
S'enregistrer | Connectez-vous

afficher une image au passage de la souris sur un texte

Dernière réponse : dans Programmation
Lassé par la pub ? Créez un compte

Voici un code que j'ai fait vite fait qui ne demande qu'à être amélioré.

  1. <script language="javascript">
  2. <!--
  3. function afficherImage()
  4. {
  5. document.getElementById('zoneImg').innerHTML = '<img src="<a href="http://www.google.fr/images/firefox/fox1.gif" target="_blank">http://www.google.fr/images/firefox/fox1.gif</a>" />';
  6. }
  7.  
  8. function enleverImage()
  9. {
  10. document.getElementById('zoneImg').innerHTML = '';
  11. }
  12. -->
  13. </script>
  14.  
  15. <div onmouseover="afficherImage();" onmouseout="enleverImage();">Afficher</div>
  16. <label id="zoneImg"></label>


phantasie a dit :
Voici un code que j'ai fait vite fait qui ne demande qu'à être amélioré.

  1. <script language="javascript">
  2. <!--
  3. function afficherImage()
  4. {
  5. document.getElementById('zoneImg').innerHTML = '<img src="<a href="http://www.google.fr/images/firefox/fox1.gif" target="_blank">http://www.google.fr/images/firefox/fox1.gif</a>" />';
  6. }
  7.  
  8. function enleverImage()
  9. {
  10. document.getElementById('zoneImg').innerHTML = '';
  11. }
  12. -->
  13. </script>
  14.  
  15. <div onmouseover="afficherImage();" onmouseout="enleverImage();">Afficher</div>
  16. <label id="zoneImg"></label>

Bonjour Phantasie,

très bon script; il fonctionne à merveille. J'ai même pu le faire fonctionner dans un tableau.

J'aurais encore besoin de votre aide pour améliorer ce script pour qu'il puisse fonctionner dans l'exemple suivant:

J'ai créé un tableau reprenant plusieurs personnes avec leur adresse, ... et je souhaiterais que la photo de la personne apparaisse quand je passe la souris devant le nom de celle-ci. J'ai évidemment essayé en reprenant votre script mais cela ne fonctionne pas. Pourriez-vous m'apporter une solution ?
Merci

Bonjour,

faisant suite à mon précédent message: j'ai créé un tableau de 4 lignes par 4 colonnes qui je modifierai par la suite évidemment.
Dans la première colonne il y a les champs NOM1, NOM2 et NOM3, dans la deuxième colonne il y a PRENOM1, PRENOM2 et PRENOM3 et ainsi de suite pour la troisième et quatrième colonne.
Ce que je cherche: en passant la souris devant NOM, une photo correspondante au NOM apparaisse.
Dans mon exemple il y aura donc trois photos: PHOTO1 pour NOM1, PHOTO2 pour NOM2, ...

Voici le code de mon tableau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>essai</title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td align="left" valign="middle"><span
style="font-weight: bold;">NOM</span></td>
<td align="left" valign="middle"><span
style="font-weight: bold;">PRENOM</span></td>
<td align="left" valign="middle"><span
style="font-weight: bold;">ADRESSE</span></td>
<td align="left" valign="middle"><span
style="font-weight: bold;">FONCTION</span></td>
</tr>
<tr>
<td align="left" valign="middle">NOM1</td>
<td align="left" valign="middle">PRENOM1</td>
<td align="left" valign="middle">ADRESSE1</td>
<td align="left" valign="middle">FONCTION1</td>
</tr>
<tr>
<td align="left" valign="middle">NOM2</td>
<td align="left" valign="middle">PRENOM2</td>
<td align="left" valign="middle">ADRESSE2</td>
<td align="left" valign="middle">FONCTION2</td>
</tr>
<tr>
<td align="left" valign="middle">NOM3</td>
<td align="left" valign="middle">PRENOM3</td>
<td align="left" valign="middle">ADRESSE3</td>
<td align="left" valign="middle">FONCTION3</td>
</tr>
</tbody>
</table>
<br />
</body>
</html>

Merci à celui ou celle qui pourrait trouver une solution en html voire en javascript

Salut phantasie,
je viens d'utiliser ton script dans un code php, mais je me retrouve avec une bizarrerie je ne sais pas d'où ça peut venir.

Mon code est le suivant pour l'affichage d'une requête :

  1. echo "<script language=\"javascript\">
  2. <!--
  3. function afficherImage()
  4. {
  5. document.getElementById('zoneImg').innerHTML = '<img src=upload/".$avatar.">';
  6. }
  7.  
  8. function enleverImage()
  9. {
  10. document.getElementById('zoneImg').innerHTML = '';
  11. }
  12. -->
  13. </script>";
  14.  
  15.  
  16. echo "<div onmouseover=\"afficherImage();\" onmouseout=\"enleverImage();\">".$id.". ".$prenom." ".$nom."</div><label id=\"zoneImg\"></label>";


Je te laisse voir le résultat qui n'est pas tout à fait ce que j'attendais :s >> http://etudiant.icn-groupe.fr/bde/vote_desint/candidats...

Merci

Amicalement,
Freudel

Et moi, je souhaiterais le contraire, à savoir qu'un nom s'affiche en passant sur la photo.
Je précise que je n'y connais rien du tout et qu'il faut donc toutme dire (où écrire le code, par exemple et le code lui-même, bien sûr)
Merci d'avance pour vos bons conseils

Bonjour,
Super l'astuce... j'ai réussi à faire, grâce à elle un affichage de "news"... avec du PHP.
Après plusieurs essais, surtout sur le problème de retour à la ligne et de l'apostrophe, j'ai réussi à faire ça :

  1. <? $req = mysql_db_query($base, "SELECT * FROM table ");
  2. $res = mysql_num_rows($req);
  3. for($i=0;$i<$res;$i++) {
  4. $texte[$i]=mysql_result($req,$i,"texte");
  5. $texte[$i]= str_replace("'","\'",$texte[$i]);
  6. $texte[$i] = str_replace(CHR(13).CHR(10),"",$texte[$i]);
  7. echo"function afficherTexte$i()
  8. {
  9. document.getElementById('zoneTxt').innerHTML = '$texte[$i]';
  10. }
  11. ";
  12. }
  13. ?>
  14. <body onLoad="afficherTexte0()"> <!-- affiche la première news -->
  15. <table>
  16. <tr>
  17. <td>
  18. <?
  19. $req = mysql_db_query($base, "SELECT * FROM table");
  20. $res = mysql_num_rows($req);
  21. for($i=0;$i<$res;$i++) {
  22. $titre[$i]=mysql_result($req,$i,"titre");
  23. echo"<div align='center' onmouseover='afficherTexte$i();'> $titre[$i]</div>";
  24. };
  25. ?>
  26. </td>
  27. <td><label id="zoneTxt">
  28. </td>
  29. </tr>
  30. </table>
  31. </body>


Ca m'affiche la première news dans la cellule de droite, et quand je passe la souris sur les titres de la cellule de gauche, la news correspondante s'affiche. Et la news peut contenir des balises html.

Mais, car il y a un mais !
J'aimerai que le titre de la news affichée soit en gras ou change de couleur... et j'y arrive pas !
Il faut pas que la police change de couleur juste au passage de la souris, il faudrait que cette couleur reste puisque la news reste aussi affichée, et s'enlève quand la news ne l'est plus.

Y' aurait-il une âme sensible pour un bon à rien :pt1cable: 

Salut,
Et merci pour ta réponse.
J'y ai pensé, bien que je n'en sais pas grand chose.
Mais :hover, c'est juste en passant la souris dessus ! non ?
Moi j'aimerai que la couleur reste (ou le gras) si la souris part de ce titre pour, par exemple, si on fait un scroll de la page et que l'info affiché par le survol reste en place.
Exemple :
titre 1
titre 2
titre 3
Quand je survole "titre 1" (qui n'est pas un lien, mais juste du texte) "info 1" s'affiche avec des images, des liens, du texte tout ça dans un tableau.
Quand je survole "titre 2", "info 2" prend la place de "info 1" et idem pour "info 3".
Le problème, est que j'aimerai que "titre x" soit mis en valeur quand son info est affichée...
Pas seulement au survol !
Et là, je trouve pas...
Expert Programmation

Dans ce cas, il faut faire ça en JavaScript.
Dans ton onmouseover, tu ajoutes une fonction JavaScript qui va mettre tous les titres en défaut, et mettre celui qui est passé en gras (tu peux passer "this" pour avoir l'élément actuel)
Pour mettre le style en javascript, ça sera element.style.fontWeight = "bold" par exemple
Expert Programmation

Alors ajoute une fonction javascript dans ce genre :
  1. function BoldTitle(element) {
  2. var allTitles = document.getElementsByClassName('titre');
  3. for (var i = 0; i < allTitles.length; i++) {
  4. allTitles[i].style.fontWeight = "normal";
  5. }
  6. element.style.fontWeight = "bold";
  7. }


Hmm, alors ajoute une class sur chacun de tes <div> avec ton contenu, et appelle la fonction qu'on vient de créer:
  1. echo"<div align='center' class='titre' onmouseover='BoldTitle(this);afficherTexte$i();'> $titre[$i]</div>";


(A noter que je ne l'ai pas testé..., donc peut y avoir des soucis)

Et bin, voilà !
Quand quelqu'un sait... c'est beaucoup mieux que quelqu'un qui cherche...
Super, ça marche, je vais maintenant essayer de chercher couleur du texte.

Sinon, une dernière demande, pour "Bolder" le première titre au démarrage de la page... il faut faire une autre fonction avec "allTitles[0]" et appeler la fonction dans Body onLoad ?

Merci, merci encore
Expert Programmation

Pour la couleur c'est le même principe, sauf que le style c'est "color" et pas "fontWeight"

Citation :
"Bolder"
Mettre en gras :D 

Sinon, pour mettre en gras le 1er titre, tu peux mettre ça dans ton code PHP:
  1. echo"<div align='center' class='titre' onmouseover='BoldTitle(this);afficherTexte$i();'". ($i==0) ? " style='font-weight:bold;'" : "" ."> $titre[$i]</div>";

Merci encore.
Ton code ne marche pas, mais j'ai compris que tu ajoutais un "if..." donc j'ai coupé la balise echo... en 3 pour mettre :
  1. echo"<div align='center' class='titre' onmouseover='BoldTitle(this);afficherTexte$i();'";
  2. if ($i==0) {echo " style='font-weight:bold;' ";}
  3. echo "> $titre[$i]</div>";

Et ça marche !
Je pense que tu as un code sûrement plus propre que le mien, si tu veux le corriger pas de soucis, sinon, comme ça marche, je te remercie encore grandement. :bounce: 
Lassé par la pub ? Créez un compte
Tom's guide dans le monde