Se connecter / S'enregistrer
Votre question

afficher une image au passage de la souris sur un texte

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
24 Mai 2007 09:33:46

bonjour, j'aimerez que une image s'affiche au passage de la souris sur un mot ou un texte par exemple sur un nom d'un logiciel quand la souris passe dessus l'image du logiciel s'affiche
cordialement

Autres pages sur : afficher image passage souris texte

24 Mai 2007 16:23:05

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" rel="nofollow" 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>


25 Mai 2007 11:46:08

Merci beaucoup !!!!!
c'est parfait , reponse rapide, chapeau !!!!
je recommande se forum !!!!

cordialement
Contenus similaires
27 Mars 2008 19:10:01

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" rel="nofollow" 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>

27 Mars 2008 19:18:15

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

28 Mars 2008 08:06:03

Faudrai que tu nous montre ton code pour comprenne ce qui ne marche pas je pense :) 
3 Avril 2008 08:17:44

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
22 Avril 2008 12:59:34

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
11 Avril 2009 12:15:40

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
20 Février 2011 21:31:56

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: 
a c 232 L Programmation
20 Février 2011 22:58:47

Salut,

Il te suffira juste de mettre un peu de CSS.
Avec :hover tu devrais pouvoir faire ce que tu veux.
Tu auras besoin de font-weight pour changer le gras, et de color pour changer la couleur.
20 Février 2011 23:15:25

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...
a c 232 L Programmation
21 Février 2011 10:18:35

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
21 Février 2011 11:27:17

Bin, voilà, c'est ce que je craignais... ça, je sais pas faire !
Si tu peux me faire un petit bout de code, sinon, je chercherai encore...
et je te remercie de tes réponses.
a c 232 L Programmation
21 Février 2011 11:55:04

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)
21 Février 2011 18:03:36

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
a c 232 L Programmation
21 Février 2011 18:29:05

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>";
21 Février 2011 22:19:12

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: 
a c 232 L Programmation
22 Février 2011 00:07:29

ah oui, il fallait entourer le if ternaire par des parenthèses.
Enfin bon c'est pareil
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS