Bonjour,
J'essaie de faire un site internet pour mon laboratoire.
je souhaite faire apparaitre une image qui suit la souris au survol d'un lien vers une page web.
j'ai un problème de code apparemment quand j'ouvre la page tout va bien, l'image apparait à côté du pointeur mais si je scroll l'image se décale au fur et à mesure!!! j'ai bien vu qu'il fallait ajouter le scroll au coordonnées de la souris mais je ne sais pas comment m'y prendre...
merci d'avance
voici mon code:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Publications</title>
<script type="text/javascript">
//<!--
document.onmousemove = suitsouris;
function suitsouris(evenement)
{
if(navigator.appName=="Microsoft Internet Explorer")
{
var x = event.x+document.body.scrollLeft;
var y = event.y+document.body.scrollTop;
}
else
{
var x = evenement.pageX;
var y = evenement.pageY;
}
document.getElementById("image 1").style.left = (x+1)+'px';
document.getElementById("image 1").style.top = (y+1)+'px';
document.getElementById("image 2").style.left = (x+1)+'px';
document.getElementById("image 2").style.top = (y+1)+'px';
}
//-->
</script>
<style type="text/css">
a .grand {
display: block;
position: absolute;
width: 0px;
}
a:hover .grand {
position: absolute;
top: 30px;
left: 100px;
width: auto;
height: auto;
}
#corpsdetexte
a {
text-decoration: none;
color: #000099;
font-size: 1em;
font-weight: bold;
font-family: Times;
}
</style>
<style type="text/css">
#conteneur{
position: absolute;
width: 1009px;
left: 44%;
margin-left: -427px;
}
</style>
<style type="text/css">
#menu
a:hover {
color: #FF33FF;
font-style: italic;
font-family: helvetica;
}
a {
text-decoration: none;
color: #000099;
font-size: 1em;
font-weight: bold;
font-family: helvetica;
}
</style>
<style type="text/css">
#corpsdetexte{
position: absolute;
text-decoration: none;
color: black;
font-size: 1em;
font-family: Times New Roman;
}
</style>
</head>
<body>
<div id="conteneur">
<br>
<br>
<br>
<br>
<div
style="position: absolute; top: 454px; left: 209px; width: 740px; height: 393px;"
id="corpsdetexte">
<div style="top: 135px; left: 181px;"> <a
style="color: black; font-size: 0.9em;"
href="http://pubs.acs.org/doi/abs/10.1021/ja910570t"><span
style="font-weight: normal;">1. <span style="font-style: italic;">"Titre"
</span>auteur <span style="font-style: italic;">Titre journal </span><span
style="font-weight: bold;">2010</span>, <span
style="font-style: italic;">10</span>, 2100.<span
style="font-weight: bold;"> </span></span><img
style="border-style: none; z-index: 5; display: block; position: fixed;"
src="images/ja-2009-09305t_0005.gif" alt="image" class="grand"
id="image 1"></a></div>
<div style="top: 169px; left: 55px;"> <a
style="color: black; font-size: 0.9em;"
href="http://pubs.acs.org/doi/abs/10.1021/ja908807b"><span
style="font-weight: normal;">2. <span style="font-style: italic;">"Titre"</span>
auteur <span style="font-style: italic;">Titre journal</span> <span
style="font-weight: bold;">2010</span>, <span
style="font-style: italic;">10</span>, 2100.</span><span
style="font-weight: normal;"></span><br>
<img
style="border-style: none; position: fixed; display: block; z-index: 5;"
src="images/ja-2009-10445r_0006.gif" alt="image" class="grand"
id="image 2"></a></div>
</div>
<div style="position: absolute; top: 444px; left: 4px;" id="menu"><small><a
href="index.html">Home</a><br>
<a href="Dr.%20G%C3%A9rard%20Cahiez.html">Prof. Dr. Gérard Cahiez</a><br>
<a href="Group%20members.html">Group members</a><br>
<a href="Research.html">Research</a><br>
<big><a href="Publications.html">Publications</a></big><br>
<a href="Prospectives%20students.html">Prospectives students</a><br>
<a href="Opportunities.html">Opportunities</a><br>
<a href="Group%20photo.html">Group photo</a><br>
<a href="Contacts.html">Contacts</a><br>
<br>
</small></div>
</div>
</body>
</html>