Discussion :

[xender]

Bonjour tout le monde,

J'utilise actuellement une infobulle qui s'afffiche au survol de la souris sur une icone à côté de mes liens.
Dans cette infobulle je fais apparaitre une capture du site externe provenant de snap.com.
Mon problème c'est que actuellement toutes ces images sont chargées directement au chargement de la page et je voudrais mettre un script ajax permettant de charger l'image uniquement lors du survole de la souris.

code d'un lien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="bulle" href="http://news.google.fr/" onMouseover="window.status='Actualités';return true;" onMouseout="window.status='';return true;" target="_self"><img src="images/infos.gif" border="0" align="absmiddle" /><span><img class="info_image" src="http://shots.snap.com/preview/?url=http://news.google.fr/&key=756cc3d7e4ec7ef9a12dec2e5991a0ef" /></span></a>

code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
a.bulle {
font-weight:bold;
margin: 0 2px;
color: #000000;
position: relative;
text-decoration: none;
}
a.bulle span {
display: none;
}
a.bulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
font-size:13px;
color:#99CCFF;
}
a.bulle:hover span {
display: inline;
position: absolute;
top: 1em;
left: 1em;
background-image:url(../images/bulle.png);
background-repeat:no-repeat;
text-align: center;
color: white;
width:314px;
height:240px;
}
img.info_image {
margin-top:45px;
}

Pour avoir l'aperçu du résultat actuel : http://www.startaccueil.com

Merci pour votre aide.

[E.Bzz]

Bonjour,
pas sûr que ça soit mieux, en utilisation (temps de latence pour les bulles) ...

Par contre, gérer l'affichage de la bulle en fonction de la proximité du bord de la fenêtre, ça serait pas mal
Jamais pu voir l'aperçu de CDiscount, par exemple

A+

[xender]

J'arrive pas à faire une marge à droite pour évité le débordement de mon info bulle.

Et pourtant sur le site snap.com ils le font en ajax, jtrouve ça plus sympa car l'utilisateur ne veut pas forcement voir ttes les infobulles ce qui évite de les charger tte mais seulement les liens survolé souhaité.

[xender]

une petite aide SVP ?

[Gurdil]

Pour faire cela il faut que tu mette un id à ton image, que tu fasses un getElementById puis que tu passes le chemin de l'image par un appel javascript par exemple, puis que tu fasses ton_image.src=source_image; et là normalement ça devrais charger ton image uniquement au survol.

donc tu aura quelque chose du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="bulle" href="http://news.google.fr/" onMouseover="javascript:preview_site('Actualités', 'http://shots.snap.com/preview/?url=http://news.google.fr/&key=756cc3d7e4ec7ef9a12dec2e5991a0ef') ;return true;" onMouseout="window.status='';return true;" target="_self"><img src="images/infos.gif" border="0" align="absmiddle" /><span><img class="info_image" src="" id="preview" /></span></a>

puis en js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function preview_site(page, image)
{
  window.status=page;
  document.getElementById("preview").src = image;
}

[xender]

Super !

merci beaucoup Gurdil.

ça marche bien sauf encore un petit bud lorsque les lien on des apostrophe apparement, j'ai éssayé de mettre addslashes en php mais ça ne marche pas :-(

[Gurdil]

Donc si tu mets un addslashes en PHP, c'est PHP qui va interpreter les slash, donc une solution consiste à appliquer deux fois la fonction addslashes comme ca la première utilisation est interpretée par PHP et la deuxième série de slash est interpretée par javascript.

Voila, j'espère que ça pourra t'aider...