Un lien qui affiche une image au survole

Version imprimable

28/01/2006, 09h47
Edoxituz

Un lien qui affiche une image au survole

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 ?
28/01/2006, 10h24
siddh

he bien fais des recherches sur le forum en tapant "info bulles"
28/01/2006, 10h26
Edoxituz

Bonjour, si je comprend bien votre réponse alors il me sufi de remplacer le texte de l'info bulle par l'image ?
28/01/2006, 10h28
siddh

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
28/01/2006, 10h35
Edoxituz

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

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

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:

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 ?

28/01/2006, 11h20
siddh

euh je voit pas l'inclusion du script infobulles 8O
28/01/2006, 11h31
Edoxituz

Comment sa l'inclusion ?
28/01/2006, 11h32
siddh
t as du avoir un fichier.js avec son code, il faut l'ajouter a ta page :
Code:

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

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

Code:

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>

28/01/2006, 11h46
siddh

t as pas des erreurs javascript ?
28/01/2006, 11h48
Edoxituz

Non acunne erreur :?

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

Code:

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>

28/01/2006, 12h06
Edoxituz

Merci :wink: cela fonctionne nikel :D

Je mets résolu.