afficher une image au passage de la souris sur un texte

diego2730

24 Mai 2007 07: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

| Etre averti des réponses
| Alerter

Répondre à diego2730

phantasie

24 Mai 2007 14:23:05

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

<script language="javascript">
<!--
	function afficherImage()
	{
		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>" />';
	}
 
	function enleverImage()
	{
		document.getElementById('zoneImg').innerHTML = '';
	}
-->
</script>
 
<div onmouseover="afficherImage();" onmouseout="enleverImage();">Afficher</div>
<label id="zoneImg"></label>

| Alerter

Répondre à phantasie

diego2730

25 Mai 2007 09:46:08

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

cordialement

| Alerter

Répondre à diego2730

spaticelli

27 Mars 2008 18:10:01

phantasie a dit :

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

<script language="javascript">
<!--
	function afficherImage()
	{
		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>" />';
	}
 
	function enleverImage()
	{
		document.getElementById('zoneImg').innerHTML = '';
	}
-->
</script>
 
<div onmouseover="afficherImage();" onmouseout="enleverImage();">Afficher</div>
<label id="zoneImg"></label>

| Alerter

Répondre à spaticelli

spaticelli

27 Mars 2008 18: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

| Alerter

Répondre à spaticelli

leank

28 Mars 2008 07:06:03

Faudrai que tu nous montre ton code pour comprenne ce qui ne marche pas je pense

| Alerter

Répondre à leank

spaticelli

3 Avril 2008 06: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

| Alerter

Répondre à spaticelli

freudel

22 Avril 2008 10: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 :

echo "<script language=\"javascript\">
   <!--
   function afficherImage()
   {
     document.getElementById('zoneImg').innerHTML = '<img src=upload/".$avatar.">';
        }
 
        function enleverImage()
        {
           document.getElementById('zoneImg').innerHTML = '';
       }
   -->
   </script>";
 
 
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

| Alerter

Répondre à freudel

BEA5854

11 Avril 2009 10: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

| Alerter

Répondre à BEA5854

Patoche30

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

<? $req = mysql_db_query($base, "SELECT * FROM table "); 
$res = mysql_num_rows($req);
for($i=0;$i<$res;$i++) {
	$texte[$i]=mysql_result($req,$i,"texte");
	$texte[$i]= str_replace("'","\'",$texte[$i]);
	$texte[$i] = str_replace(CHR(13).CHR(10),"",$texte[$i]); 
	echo"function afficherTexte$i()
    {
        document.getElementById('zoneTxt').innerHTML = '$texte[$i]';
    }
	 ";
	}
?>
<body onLoad="afficherTexte0()"> <!-- affiche la première news -->
<table>
  <tr>
    <td>
      <?
      $req = mysql_db_query($base, "SELECT * FROM table"); 
      $res = mysql_num_rows($req);
      for($i=0;$i<$res;$i++) {
	      $titre[$i]=mysql_result($req,$i,"titre");
	      echo"<div align='center' onmouseover='afficherTexte$i();'> $titre[$i]</div>";
      };
      ?>
    </td>
    <td><label id="zoneTxt">
    </td>
  </tr>
</table>
</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:

| Alerter

Répondre à Patoche30

OmaR

Expert Programmation

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

| Alerter

Répondre à OmaR

Patoche30

20 Février 2011 22: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...

| Alerter

Répondre à Patoche30

OmaR

Expert Programmation

21 Février 2011 09: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

| Alerter

Répondre à OmaR

Patoche30

21 Février 2011 10: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.

| Alerter

Répondre à Patoche30

OmaR

Expert Programmation

21 Février 2011 10:55:04

Alors ajoute une fonction javascript dans ce genre :

function BoldTitle(element) {
  var allTitles = document.getElementsByClassName('titre');
  for (var i = 0; i < allTitles.length; i++) {
    allTitles[i].style.fontWeight = "normal";
  }
  element.style.fontWeight = "bold";
}

Hmm, alors ajoute une class sur chacun de tes <div> avec ton contenu, et appelle la fonction qu'on vient de créer:

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)

| Alerter

Répondre à OmaR

Patoche30

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

| Alerter

Répondre à Patoche30

OmaR

Expert Programmation

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

Sinon, pour mettre en gras le 1er titre, tu peux mettre ça dans ton code PHP:

echo"<div align='center' class='titre' onmouseover='BoldTitle(this);afficherTexte$i();'". ($i==0) ? " style='font-weight:bold;'" : "" ."> $titre[$i]</div>";

| Alerter

Répondre à OmaR

Patoche30

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

echo"<div align='center' class='titre' onmouseover='BoldTitle(this);afficherTexte$i();'";
if ($i==0) {echo " style='font-weight:bold;' ";}
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:

| Alerter

Répondre à Patoche30

OmaR

Expert Programmation

21 Février 2011 23:07:29

ah oui, il fallait entourer le if ternaire par des parenthèses.
Enfin bon c'est pareil

| Alerter

Répondre à OmaR

Tom's guide dans le monde