Image qui apparait au survol d'un lien

Signaler
Messages postés
2
Date d'inscription
samedi 16 septembre 2006
Statut
Membre
Dernière intervention
28 janvier 2007
-
Messages postés
8
Date d'inscription
mercredi 26 juillet 2006
Statut
Membre
Dernière intervention
15 octobre 2008
-
bonjour,

je suis photographe depuis 20 ans, et depuis tres peu je me suis mis à la création de sites internet
je commence par un tres gros truc
(dessins de manga)
le client me demande qu'au survol d'un lien il apparaisse une image en vignette
j'ai beau fouiller les forums, je ne trouve pas de script correspondant
pouvez vous m'aider ?
à l'avance merci

tchiptchip

14 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
B
onjour...
voir peut
être du coté des InfoBulles...
;0)
Messages postés
2
Date d'inscription
samedi 16 septembre 2006
Statut
Membre
Dernière intervention
28 janvier 2007

merci de ta reponse,
mais je ne peux mettre dans les bulles que du texte, un peu comme un alt
moi j'aimerais y mettre une image en mignature
si tu as une info ?

encore merci

tchiptchip
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
<PUB>
on peut mettre ce que l'on veux dedans voir





[code.aspx?ID=36300 INFO
BULLE TOUJOURS VISIBLE]









il en existe d'autres aussi...
;0)
Messages postés
8
Date d'inscription
mercredi 26 juillet 2006
Statut
Membre
Dernière intervention
15 octobre 2008

chrispi07
Bonjour,
Soit une liste de sponsors dans une page d'un site web.
Est-il possible, et si oui comment (javascript) de faire apparaître une image (photo du magasin par exemple) lorsque le curseur de la sour
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
Dans les Info Bulle on peut mettre de
l'HTML donc une balise IMG...
;O)
Messages postés
8
Date d'inscription
mercredi 26 juillet 2006
Statut
Membre
Dernière intervention
15 octobre 2008

chrispi07
Bonjour,
Soit une liste de sponsors dans une page d'un site web.
Est-il possible, et si oui comment (javascript) de faire apparaître une image (photo du magasin par exemple) lorsque le curseur de la sour

J'entends bien qu'il est possible de placer un code HTML, j'ai essayé, mais j'obtiens toujours la même image avec un code du style :


 

  [# Boucherie
  Sanzot]  
comment définir l'image pour que l'infobulle soit modifiée ? That's the main problem!
Merci à ceux qui vont chercher.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
<table bgcolor= "#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, comment définir l'image pour que l'infobulle
soit modifiée ?</td>
</td></tr></tbody></table>Il
te suffit de modifer le contenu du DIV en utilisant son innerHTML .
Petit exemple en partant de ce que tu
as fourni...
<html>

<head>
<style type ="text/css">
#infobulle {

  position : absolute;
  left : 100px;
  top : 100px;
  display
: none;
  border : 1px solid blue;
}
</style>
<script
type="text/javascript">
//-----------------------

function see_bubble(img_){
  var Obj =
document.getElementById('infobulle');
  Obj.innerHTML = "";
  Obj.style.display = "block";
}

//--------------------
function
kill_bubble(){
  var Obj = document.getElementById('infobulle');

  Obj.innerHTML = "";
  Obj.style.display = "none";
}

</script>
</head>



[# Lien
#1]

[# Lien
#2]

</html>
Voila à toi de
jouer...
;O)
Messages postés
8
Date d'inscription
mercredi 26 juillet 2006
Statut
Membre
Dernière intervention
15 octobre 2008

chrispi07
C'est super...du moins  après un rapide essai.
Avec tous mes remerciements.
Messages postés
8
Date d'inscription
mercredi 26 juillet 2006
Statut
Membre
Dernière intervention
15 octobre 2008

chrispi07
Bonjour,
Soit une liste de sponsors dans une page d'un site web.
Est-il possible, et si oui comment (javascript) de faire apparaître une image (photo du magasin par exemple) lorsque le curseur de la sour

Petrol Team, ton code fonctionne certes, mais je souhaiterai que l'infobulle reste à proximité du texte auquel elle fait référence. Ce qui se produit dans le code que j'ai communiqué. Je n'arrive pas à mixer  ces deux codes pour arriver à mes fins. Ce doit être possible, si tu veux bien me donner le dernier coup de main ! Merci d'avance. Cordialement
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
Le probléme vient du fait que je n'ai pas
géré le déplacement dans mon exemple et donc left et top, étant
fixés dans le STYLE, restent inchangés...
donc en
mixant les deux sources cela donne un truc du style
<html>
<head>
<style
type= "text/css">
#infobulle{
  position : absolute;
  border :
1px solid #CCCCCC;
  padding : 10px;
  font-family : Verdana, Arial;

  font-size : 10px;
  background-color : #0000FF;
  display : none;

}
</style>
<script type="text/javascript">
// espacement entre le curseur et l'infobulle

var cursor_padding = 5;
// recupere
les coordonnees de la souris
// les
affecte au style de la div infobulle pour qu'elle suive les déplacements

function get_mouse(e){
  if(!e){
    x = event.x;

    y = event.y;
    window.status = x;
  }else{
    x =
e.pageX;
    y = e.pageY;
  }
  var Obj =
document.getElementById('infobulle');
  Obj.style.left = x + cursor_padding
+"px";
  Obj.style.top = y + cursor_padding +"px";
}
// affiche la bulle
function see_bubble(img_){

  var Obj = document.getElementById('infobulle');
  Obj.innerHTML =
"";
  Obj.style.display =
"block";
}
// cache la bubble

function kill_bubble(){
  var Obj =
document.getElementById('infobulle');
  Obj.innerHTML = "";

  Obj.style.display = "none";
}
document.onmousemove = get_mouse;

</script>
</head>



  


  [# Boucherie Sanzot]

   


  [# Patisserie
Lafarine]
   






</html>
Voila bonne PROG
;O)
Messages postés
8
Date d'inscription
mercredi 26 juillet 2006
Statut
Membre
Dernière intervention
15 octobre 2008

chrispi07
Bonjour,
Soit une liste de sponsors dans une page d'un site web.
Est-il possible, et si oui comment (javascript) de faire apparaître une image (photo du magasin par exemple) lorsque le curseur de la sour

C' coup là c'est parfait. Merci pour ton aide.
Messages postés
8
Date d'inscription
mercredi 26 juillet 2006
Statut
Membre
Dernière intervention
15 octobre 2008

Bonjour,
Pourquoi ce code place correctement la bulle avec Mozilla et ne fonctionne pas correctement avec Internet Explorer. Avec ce navigateur, la bulle est liée à la barre de défilement. Est-il possible de faire tourner correctement.
On peut voir sur : http://www.rugby-privas.fr/administration_du_club/administration_sponsors.htm
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
Sous IExplorerevent.x
et event.y retourne les positions de la souris
par rapport à la fenêtre active, donc ne prennent pas en compte le scroll de la
page.

Pour t'en rendre compte insére ce code sur le BODY...

...et fait
scroller ta page.

Pour résoudre ton probléme il te suffit donc dans
tenir compte, il te faut remplacer ta fonction function get_mouse(e) par celle ci
//-------------------
function get_mouse(e){

  var x;
  var y;
  var DocRef;
  if( e){
    x = e.pageX;
    y = e.pageY;
  }

  else{
    if( document.documentElement &&
document.documentElement.clientWidth)
      DocRef =
document.documentElement;
    else
      DocRef = document.body;

    x = event.clientX +DocRef.scrollLeft;
    y = event.clientY
+DocRef.scrollTop;
  }
  var Obj = document.getElementById('infobulle');

  Obj.style.left = x + cursor_padding +"px";
  Obj.style.top  = y +
cursor_padding +"px";
}
A voir l'excellent TUTO CODE, normal !,
POSITION
DE LA SOURIS DANS LA PAGE

 
;O)
Messages postés
8
Date d'inscription
mercredi 26 juillet 2006
Statut
Membre
Dernière intervention
15 octobre 2008

chrispi07
Bonjour,
Ce code semble absolument convenir à mon problème. Je te remercie infiniment.