Tom's Guide > Forum > Programmation > afficher une image au passage de la souris sur un texte

afficher une image au passage de la souris sur un texte

Forum Programmation : afficher une image au passage de la souris sur un texte

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

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

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

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

Code :

<script language="javascript">
<!--
function afficherImage()
{
document.getElementById('zoneImg').innerHTML = '<img src="http://www.google.fr/images/firefox/fox1.gif" />';
}
function enleverImage()
{
document.getElementById('zoneImg').innerHTML = '';
}
-->
</script>
<div onmouseover="afficherImage();" onmouseout="enleverImage();">Afficher</div>
<label id="zoneImg"></label>

Message cité 1 fois

------------------------------ "La culture, c'est comme la confiture. Moins on en a et plus on l'étale."
Répondre à phantasie

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

cordialement

Répondre à diego2730

phantasie a écrit :

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

Code :

<script language="javascript">
<!--
function afficherImage()
{
document.getElementById('zoneImg').innerHTML = '<img src="http://www.google.fr/images/firefox/fox1.gif" />';
}
function enleverImage()
{
document.getElementById('zoneImg').innerHTML = '';
}
-->
</script>
<div onmouseover="afficherImage();" onmouseout="enleverImage();">Afficher</div>
<label id="zoneImg"></label>

Répondre à spaticelli

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

Répondre à spaticelli

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

Répondre à Leank

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

Répondre à spaticelli

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 :

Code :

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/ [...] didats.php

Merci

Amicalement,
Freudel

Message édité par freudel le 22-04-2008 à 13:01:50

Répondre à 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

Répondre à BEA5854

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > afficher une image au passage de la souris sur un texte

Aller à :

Aide |
Règles du forum

Il y a 1847 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,383 secondes

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler

Liens