Afficher du texte avec liens au survol d'une image

Bonjour

Cette question est un peu hors spip, désolée, mais je suis certaine que des experts en javascript veillent en vous :wink:

Au survol d’une image mappée (et sans cliquer dessus), je voudrai voir apparaitre un bloc avec du texte qui contient des liens hypertextuels.
J’arrive à cela, mais je suis obligée de cliquer sur l’image pour voir apparaitre le bloc…
A moins qu’il y ait une solution plus simple ?
pour info : Je suis nulle en javascript…

images
Afficher B

Contenu B

Merci de toute aide et bonne fin de journée,

Gaëlle.

Bonsoir,

Je viens de rajouter ça dans ton lien:
onmouseover="javascript:aff('ContenuA');" onmouseout="javascript:aff('ContenuA');"

<a href="javascript:aff('ContenuA');" onmouseover="javascript:aff('ContenuA');" onmouseout="javascript:aff('ContenuA');"><img src="images.jpg" alt="images" /></a>

Et ça ouvre l'info-bulle au survol et la ferme en sortant de l'image.

Je sais pas si c'est vraiment le resultat voulu.

Pour revenir a SPIP, peut-être utiliser jquery, en bas de page il y a un image map pas mal:
http://jquery.bassistance.de/tooltip/demo/

Bonne soirée.

Gaelle Faure a écrit :

Bonjour

Cette question est un peu hors spip, désolée, mais je suis certaine que des experts en javascript veillent en vous :wink:

Au survol d'une image mappée (et sans cliquer dessus), je voudrai voir apparaitre un bloc avec du texte qui contient des liens hypertextuels.
J'arrive à cela, mais je suis obligée de cliquer sur l'image pour voir apparaitre le bloc...
A moins qu'il y ait une solution plus simple ?
pour info : Je suis nulle en javascript...

<script type="text/javascript">
function aff(objet){
if(document.getElementById(objet).style.display == "block") {
document.getElementById(objet).style.display = "none"; } else {
document.getElementById(objet).style.display = "block"; }
}
</script>

<a href="javascript:aff('ContenuA');"><img src="IMG/jpg/images.jpg" alt="images" /></a>
<a href="javascript:aff('ContenuB');">Afficher B</a>
        <div id="ContenuA" style="display: none; border:1px solid #ccc; -moz-border-radius: 6px; border-radius: 6px; width:200px;">
            <ul><img src="puce.gif" alt="puce" border="0" width="5" /> <a href="spip.php?article6">texte 1</a></ul>
            <ul><img src="puce.gif" alt="puce" border="0" width="5" /> <a href="spip.php?article10">texte 2</a></ul>
        </div>
               <div id="ContenuB" style="display: none; border: 3px solid black";>
        Contenu B
        </div>

Merci de toute aide et bonne fin de journée,
--
Gaëlle.
------------------------------------------------------------------------

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

Merci de la piste mais… ça ne fonctionne pas : l’info bulle n’apparait pas.
(je travaille en local, je n’ai donc pas encore d’adresse à donner)

Essai de texte

Merci de toute aide.

Le 30 décembre 2009 17:51, nikolas.villa@gmail.com <nikolas.villa@gmail.com> a écrit :

Bonsoir,

Je viens de rajouter ça dans ton lien:
onmouseover=« javascript:aff(‹ ContenuA ›); » onmouseout=« javascript:aff(‹ ContenuA ›); »

images

Et ça ouvre l’info-bulle au survol et la ferme en sortant de l’image.

Je sais pas si c’est vraiment le resultat voulu.

Pour revenir a SPIP, peut-être utiliser jquery, en bas de page il y a un image map pas mal:
http://jquery.bassistance.de/tooltip/demo/

Bonne soirée.

Gaelle Faure a écrit :

Bonjour

Cette question est un peu hors spip, désolée, mais je suis certaine que des experts en javascript veillent en vous :wink:

Au survol d’une image mappée (et sans cliquer dessus), je voudrai voir apparaitre un bloc avec du texte qui contient des liens hypertextuels.
J’arrive à cela, mais je suis obligée de cliquer sur l’image pour voir apparaitre le bloc…
A moins qu’il y ait une solution plus simple ?
pour info : Je suis nulle en javascript…

images
Afficher B

Contenu B

Merci de toute aide et bonne fin de journée,

Gaëlle.



liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/

Documentation de SPIP : http://www.spip.net/

Irc : de l’aide à toute heure : http://spip.net/irc


Gaëlle.

Pour info : un tutoriel simple pour créer une info bulle en javascript : http://damienalexandre.fr/Info-Bulle-en-Javascript.html
Sauf que ce n’est pas exactement ce que je veux faire : je veux pouvoir cliquer sur des liens dans l’infobulle

pour l’heure, je laisse l’idée en suspens.

Merci.

Le 30 décembre 2009 18:52, Gaelle Faure <fauregaelle2010@gmail.com> a écrit :

Merci de la piste mais… ça ne fonctionne pas : l’info bulle n’apparait pas.
(je travaille en local, je n’ai donc pas encore d’adresse à donner)

Essai de texte

Merci de toute aide.

Le 30 décembre 2009 17:51, nikolas.villa@gmail.com <nikolas.villa@gmail.com> a écrit :

Bonsoir,

Je viens de rajouter ça dans ton lien:
onmouseover=« javascript:aff(‹ ContenuA ›); » onmouseout=« javascript:aff(‹ ContenuA ›); »

images

Et ça ouvre l’info-bulle au survol et la ferme en sortant de l’image.

Je sais pas si c’est vraiment le resultat voulu.

Pour revenir a SPIP, peut-être utiliser jquery, en bas de page il y a un image map pas mal:
http://jquery.bassistance.de/tooltip/demo/

Bonne soirée.

Gaelle Faure a écrit :

Bonjour

Cette question est un peu hors spip, désolée, mais je suis certaine que des experts en javascript veillent en vous :wink:

Au survol d’une image mappée (et sans cliquer dessus), je voudrai voir apparaitre un bloc avec du texte qui contient des liens hypertextuels.
J’arrive à cela, mais je suis obligée de cliquer sur l’image pour voir apparaitre le bloc…
A moins qu’il y ait une solution plus simple ?
pour info : Je suis nulle en javascript…

images
Afficher B

Contenu B

Merci de toute aide et bonne fin de journée,

Gaëlle.



liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
http://archives.rezo.net/spip.mbox/

Documentation de SPIP : http://www.spip.net/

Irc : de l’aide à toute heure : http://spip.net/irc


Gaëlle.


Gaëlle.

Gaelle Faure a écrit :

Pour info : un tutoriel simple pour créer une info bulle en javascript : http://damienalexandre.fr/Info-Bulle-en-Javascript.html
Sauf que ce n’est pas exactement ce que je veux faire : je veux pouvoir cliquer sur des liens dans l’infobulle

pour l’heure, je laisse l’idée en suspens.

Merci.

J’ai fait un truc de ce genre ici si ça peut aider

voici le code dans le squelette

carte

avec dans les css

.infobulle{
position: absolute;
visibility : hidden;
border: 2px outset gray;
padding: 0 5px;
font-size: 10px;
background-color: green;
color:white;
z-index: 10;
}

et voici le js piqué je ne sais plus où …

function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non

function move(e) {
if(i) { // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!=« Microsoft Internet Explorer ») { // Si on est pas sous IE
GetId(« curseur »).style.left=e.pageX + 5+« px »;
GetId(« curseur »).style.top=e.pageY + 10+« px »;
}
else { // Modif proposée par TeDeum, merci à lui
if(document.documentElement.clientWidth>0) {
GetId(« curseur »).style.left=20+event.x+document.documentElement.scrollLeft+« px »;
GetId(« curseur »).style.top=10+event.y+document.documentElement.scrollTop+« px »;
} else {
GetId(« curseur »).style.left=20+event.x+document.body.scrollLeft+« px »;
GetId(« curseur »).style.top=10+event.y+document.body.scrollTop+« px »;
}
}
}
}

function montre(text) {
if(i==false) {
GetId(« curseur »).style.visibility=« visible »; // S’il est caché (la verif n’est qu’une securité) on le rend visible.
GetId(« curseur »).innerHTML = text; // on copie notre texte dans l’ élément html
i=true;
}
}
function cache() {
if(i==true) {
GetId(« curseur »).style.visibility=« hidden »; // Si la bulle est visible on la cache
i=false;
}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.