1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Problème de position d'une image lors du survol d'un lien

cs_molio
Messages postés
4
Date d'inscription
vendredi 5 février 2010
Statut
Membre
Dernière intervention
8 février 2010
 - 7 févr. 2010 à 11:02
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 - 7 févr. 2010 à 13:56
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>
















1. "Titre"
auteur Titre journal 2010, 10, 2100.


2. "Titre"
auteur Titre journal 2010, 10, 2100.




<small>[index.html Home]

[Dr.%20G%C3%A9rard%20Cahiez.html Prof. Dr. Gérard Cahiez]

[Group%20members.html Group members]

[Research.html Research]

[Publications.html Publications]

[Prospectives%20students.html Prospectives students]

[Opportunities.html Opportunities]

[Group%20photo.html Group photo]

[Contacts.html Contacts]



</small>





</html>

1 réponse

Réponse 1 / 1
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 17
7 févr. 2010 à 13:56
Bonjour,
plutôt que de grand discours je t'engage à lire le TUTO POSITION DE LA SOURIS DANS LA PAGE, tu auras la réponse à ta question...
;O)
0