Un lien qui affiche une image au survole

**Edoxituz** · 28/01/2006, 09h47

Bonjour, sur mon site perso je souhaite ajouter un lien qui affiche une image quand on le survole avec le pointeur de la sourie, un peut comme une info bulle, y a-t-il des gens ici qui savent faire sa ?

**siddh** · 28/01/2006, 10h24

he bien fais des recherches sur le forum en tapant "info bulles"

**Edoxituz** · 28/01/2006, 10h26

Bonjour, si je comprend bien votre réponse alors il me sufi de remplacer le texte de l'info bulle par l'image ?

**siddh** · 28/01/2006, 10h28

non si tu comprend bien ma reponse, tu fais des recherches sur le forum et tu vas trouver des scripts d'info bulles comme celui de torvalds17 par exemple

**Edoxituz** · 28/01/2006, 10h35

Ok je lance cette recherche, avec info bulle et je ne trouve que sa:
http://www.developpez.net/forums/sea...p?mode=results

**siddh** · 28/01/2006, 10h43

bon aller :
http://torvalds17.free.fr/partiePublique/informatique/scripts/index.php5?script=1

**Edoxituz** · 28/01/2006, 11h17

Merci, génial se lien

, sauf que je coince un peut la

j'ai créer le script come indiquer, le voici ci-dessous:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Info bulle et image</title>
<style type="text/css">
.zoneInfoBullee{cursor: help; background-color: #A5DFF5; width: 70%; margin: auto;}
</style>
<script type="text/javascript">
var infobulle1 = new InfoBulle("infobulle1", "#EAF8B8", "InfoBulle de test", "Première ligne de texte", "black", "Arial"); 
infobulle1.ajouteImage("icon_mrgreen.gif");
</script>
</head>
<body>
<!-- Ici le debut du div info bulle -->
<div class="zoneInfoBullee" onmouseover="infobulle1.montreToi();" onmouseout="infobulle1.cacheToi();" >
Tester l'infos bulle</a>
</div>
<!-- Ici la fin du div info bulle -->
</body>
</html>

Le div s'affiche corectement sur ma page html dans internet explorer mais aucunne info bulle quand je passe le curseur.
Vous savez faire fonctioner se script vous ?

**siddh** · 28/01/2006, 11h20

euh je voit pas l'inclusion du script infobulles

**Edoxituz** · 28/01/2006, 11h31

Comment sa l'inclusion ?

**siddh** · 28/01/2006, 11h32

t as du avoir un fichier.js avec son code, il faut l'ajouter a ta page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script type='text/javascript' src='adresse du fichier.js'></script>

**Edoxituz** · 28/01/2006, 11h39

OK, j'ai ajouter se fichier, voici mon code maitenant qui ne marche toujours pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Info bulle et image</title>
<!-- Ici le CSS pour l'infos bulle -->
<style type="text/css">
<!--
.zoneInfoBullee{cursor: help; background-color: #A5DFF5; width: 70%; margin: auto;}
-->
</style>
<!-- Fin du CSS -->
<!-- Ici on appel la classe infobulle.js -->
<script type="text/javascript" src="InfoBulle.js"></script>
<!-- Fin de l'appelation -->
<!-- Ici on créer l'infos bulle -->
<script type="text/javascript">
var infobulle1 = new InfoBulle("infobulle1", "#EAF8B8", "InfoBulle de test", "Première ligne de texte", "black", "Arial"); 
infobulle1.ajouteImage("icon_mrgreen.gif");
</script>
<!-- Fin -->
</head>
<body>
<!-- Ici le debut du div info bulle -->
<div class="zoneInfoBullee" onmouseover="infobulle1.montreToi();" onmouseout="infobulle1.cacheToi();" >
Tester l'infos bulle</a>
</div>
<!-- Ici la fin du div info bulle -->
</body>
</html>

**siddh** · 28/01/2006, 11h46

t as pas des erreurs javascript ?

**Edoxituz** · 28/01/2006, 11h48

Non acunne erreur

**siddh** · 28/01/2006, 12h01

alors pour les voir les erreurs il faut double clicker en bas a gauche ....
bon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Info bulle et image</title>
<!-- Ici le CSS pour l'infos bulle -->
<style type="text/css" href="InfoBulle.css" />
<style type="text/css">
<!--
.zoneInfoBullee{cursor: help; background-color: #A5DFF5; width: 70%; margin: auto;}
-->
</style>
<!-- Fin du CSS -->
<!-- Ici on appel la classe infobulle.js -->
<script type="text/javascript" src="InfoBulle.js"></script>
<!-- Fin de l'appelation -->
<!-- Ici on créer l'infos bulle -->
<script type="text/javascript">
var infobulle1;
window.onload = function(){
infobulle1 = new InfoBulle("infobulle1", "#EAF8B8", "InfoBulle de test", "Première ligne de texte", "black", "Arial");
infobulle1.ajouteImage("icon_mrgreen.gif");
infobulle1.cacheToi();
}
</script>
<!-- Fin -->
</head>
<body>
<!-- Ici le debut du div info bulle -->
<div class="zoneInfoBullee" onmouseover="infobulle1.montreToi();" onmouseout="infobulle1.cacheToi();" >
Tester l'infos bulle
</div>
<!-- Ici la fin du div info bulle -->
</body>
</html>

**Edoxituz** · 28/01/2006, 12h06

Merci

cela fonctionne nikel

Je mets résolu.

Un lien qui affiche une image au survole

JavaScript

Discussions similaires

Partager

Partager