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 16
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

Discussions similaires

vectoriser un logo sous photoshop
cs_babidou -
harleyman37 -

11 réponses
Trouver le rang d'une lettre dans l'alphabet
cs_charlax -
charlax -

11 réponses
Script affichage plusieurs gif position aléatoire + refresh
manui31804 -
manui31804 -

2 réponses
Convertir un mot en chiffres avec poistion des lettres dans l'alphabet
Aristeas -
Aristeas -

2 réponses
Incrementer une lettre de l'alphabet
cs_surfeur84 -
surfeur84 -

10 réponses
Rejoignez-nous