| > info bulle qui suit la souris.... |
[ Posté par olivier2489 ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 25-04-2008 à 15:33 | 10 messages ]
Salut
Je voudrais utilise le script sur cette page:http://www.editeurjavascript.com/scripts/scripts_navigation_3_637.php
Mais je voudrais l'utilise sur une image comment je fais svp?
Merci d'avance!!!
________________
/!\@olivier2489@/!\
|
|
|
[ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 25-04-2008 à 19:43 | 2380 messages ]
Alut
bin, tu mets simplement ton img entre les balises <a>
| <a href="#"onMouseOver="pop0('Voilà l\'info bulle')" onMouseOut="disparaitre0()"><img src="img/tonimg.jpg" /></a> |
|
Atchao
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
|
[ Posté par olivier2489 ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-04-2008 à 08:04 | 10 messages ]
j'ai mis le script comme il faut mais qu'en je passe la souris l'info bulle ne suis pas la sourie, il reste dans le coin en haut a gauche de l'image!
Comment faire!!
[Message édité par olivier2489 le 26-04-2008 à 08:09]
________________
/!\@olivier2489@/!\
|
[ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-04-2008 à 13:52 | 2380 messages ]
t'as bien mis le tout entre <body></body> ???
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
|
[ Posté par olivier2489 ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-04-2008 à 18:34 | 10 messages ]
|
voila la composition de ma page de test:
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body>
<div id="bulle" style="position: absolute; width: 220px; height: 110px;"><img src="../poll/Canal-pollution.jpg" width="450" height="600" /></div>
</body
><script>
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
document.getElementById("bulle").innerHTML = "<table border='1'bordercolor='red'style='background-color: #000000;'cellpadding='6' cellspacing='0'><tr><td><font color='#ffffff'face='comic sans ms'size='2'><b>"+contenu+"</b></font></td></tr></table>";
}
function suivre_souris0(e)
{
if (navigator.appName=="Microsoft Internet Explorer")
{
var x = event.x + document.body.scrollLeft; var y = event.y + document.body.scrollTop;
}
else
{
var x = e.pageX;var y = e.pageY;
}
document.getElementById("bulle").style.left = x + decal_x; document.getElementById("bulle").style.top = y + decal_y;
}
function disparaitre0()
{
document.getElementById("bulle").innerHTML = '';
}</script>
<a href="#"onMouseOver="pop0('Voilà l\'info bulle')" onMouseOut="disparaitre0()"><img src="../poll/Canal-pollution.jpg" /></a>
</body>
</html>
|
|
[Message édité par olivier2489 le 26-04-2008 à 18:35]
[Message édité par olivier2489 le 26-04-2008 à 18:36]
________________
/!\@olivier2489@/!\
|
[ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-04-2008 à 19:56 | 2380 messages ]
t'as 1 </body> après la div : supprimes-le et aussi :
* l'img ds la div
* le doctype, c.a.d la 1° ligne avant <html....>
et rajoutes :
decal_x = 25;
decal_y = -15;
et mets 1 espace entre href="#" et onmouseover="...
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
|
[ Posté par olivier2489 ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 12-05-2008 à 10:18 | 10 messages ]
|
Voici la nouvelle composition de ma page
mais le pb c'est qu'il ne veut pas toujours suivre la sourie et l'image disparais mais ne réapparait pas au passage de la sourie:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:527px;
top:419px;
width:67px;
height:14px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="bulle" style="position: absolute; width: 220px; height: 110px; left: 28px; top: 70px;"><img src="Photo 002.jpg" width="450" height="600" /></div>
<div id="Layer1"><a href="#" onmouseout="disparaitre0()" onMouseOver="apparaitre0()" ><img src="Photo 005.jpg" width="502" height="628"/></a></div>
<script>
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
document.getElementById("bulle").innerHTML = "<table border='1'bordercolor='red'style='background-color: #000000;'cellpadding='6' cellspacing='0'><tr><td><font color='#ffffff'face='comic sans ms'size='2'><b>"+contenu+"</b></font></td></tr></table>";
}
function suivre_souris0(e)
{
if (navigator.appName=="Microsoft Internet Explorer")
{
var x = event.x + document.body.scrollLeft; var y = event.y + document.body.scrollTop;
}
else
{
var x = e.pageX;var y = e.pageY;
}
document.getElementById("bulle").style.left = x + decal_x; document.getElementById("bulle").style.top = y + decal_y;
}
function disparaitre0()
{
document.getElementById("bulle").innerHTML = '';
}</script>
</body>
</html> |
|
________________
/!\@olivier2489@/!\
|
[ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 13-05-2008 à 19:10 | 2380 messages ]
|
j'comprends pas ce que tu veux faire, mais j'ai 1 peu modifié ton script, pour que çà fasse quelque chose
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#bulle {
position:absolute;
left:527px;
top:419px;
width:67px;
height:14px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="bulle" style="position: absolute; width: 220px; height: 110px; left: 28px; top: 70px;"><img src="img/Cal2.jpg" width="450" height="600" /></div>
<div id="Layer1"><a href="#" onmouseout="disparaitre0()" onMouseOver="pop0('<img src=\'img/Cal2.jpg\' width=\'450\' height=\'600\' />')" ><img src="img/Cal5.jpg" width="502" height="628"/></a></div>
<script>
decal_x = 25;
decal_y = -15;
document.onmousemove = suivre_souris0;
var contenu
function pop0(contenu)
{
document.getElementById("bulle").innerHTML = "<table border='1'bordercolor='red'style='background-color: #000000;'cellpadding='6' cellspacing='0'><tr><td><font color='#ffffff'face='comic sans ms'size='2'><b>"+contenu+"</b></font></td></tr></table>";
}
function suivre_souris0(e)
{
if (navigator.appName=="Microsoft Internet Explorer")
{
var x = event.x + document.body.scrollLeft; var y = event.y + document.body.scrollTop;
}
else
{
var x = e.pageX;var y = e.pageY;
}
document.getElementById("bulle").style.left = x + decal_x; document.getElementById("bulle").style.top = y + decal_y;
}
function disparaitre0()
{
document.getElementById("bulle").innerHTML = '';
}</script>
</body>
</html> |
|
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
|
[ Posté par olivier2489 ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 17-05-2008 à 20:30 | 10 messages ]
Sa suis la sourie me le lien de l'image et cassé alors que l'adresse et bonne
________________
/!\@olivier2489@/!\
|
Home Page
]
