18041 sujets

Questions générales et questions de débutants

[résolu]Affichage d'image lors du survol d'un lien.

Pages :
Bonjour,

Je souhaite réaliser ceci sur mon site :

Une image représentant un schéma (certainement en image de fond) avec à sa droite une liste d'éléments (liens).

Lorsque l'on survole l'un des liens avec la souris, une image en png transparent vient recouvrir une partie du schéma afin d'indiquer la zone correspondante.

Hmmm ça doit être vraiment pas clair là, non?

J'aimerais que cela soit le plus accessible possible, mais je n'ai pas trop d'idée sur la réalisation de la chose.

Toute suggestion sera la bienvenue... Bon, si c'est en JS, sachez que j'aurais du mal Smiley confus
Modifié par Arctinurus (19 May 2009 - 15:34)
Arctinurus a écrit :
J'aimerais que cela soit le plus accessible possible

La solution la plus accessible consiste à avoir, à la base, autant d'images individuelles que d'emplacement à indiquer, ou bien une image comprenant toutes les indications. Si les mêmes indications peuvent être traduites en mode texte (aucune idée, c'est à voir en fonction du contenu en question et du public visé), c'est mieux.

Ensuite, ta liste d'éléments peut être une liste de liens vers des pages présentant les images complètes et le texte d'indications (le Sichuan est situé au nord de la région de..., ou bien pour vous rendre au bâtiment Machin depuis l'arrêt de Tramway Truc...). Au clic sur le lien, on va à la page en question (ou bien on charge le contenu correspondant en Ajax, à implémenter comme surcouche bien entendu). Au survol du lien, tu peux effectivement jouer sur l'affichage et le placement de ton image sur le plan général, ça donnera un aperçu du contenu affiché au clic.

Arctinurus a écrit :
si c'est en JS, sachez que j'aurais du mal Smiley confus

Tu auras du mal.

Ceci dit, tu peux prévoir un fonctionnement sans JavaScript qui marche bien. Mais ne pas espérer faire de l'affichage/masque d'éléments, en les positionnant à un endroit précis de surcroit, sans JavaScript.
Aille, c'est bien au dessus de mon faible niveau tout ça!
Smiley ohwell

Je pense que je vais me bricoler une image avec des légendes "classiques" et m'informer plus avant sur php, Javascript et Ajax...

Personne ne connait d'alternative? Puisqu'au final il ne peut s'agir que d'échanger une image par une autre image...

Et puis avoir du php va me couter plus cher... (et c'est pas bon pour la planète car ça fait plus travailler les serveurs Smiley decu )
Modifié par Arctinurus (22 Apr 2009 - 15:17)
Bonjour,
moi je ferais un simple gif transparent avec un cercle rouge qui se placerais SUR l'image au bon endroit, en fonction du lien survolé, c' est enfantin en javascript Smiley biggrin
C'est bien cela que je veux faire Smiley smile

J'avais même prévu de faire une image entièrement transparente, de la même taille que celle de fond avec seulement la zone prévue de colorée... Ainsi, pour chaque lien, une image différente serait chargée et indiquerait l'emplacement correspondant au lien survolé.
ça parait inutile, le bon vieux rond rouge fera meilleur effet !!
tu sauras écrire ça en javascript ?
Ce n'est pas inutile dans ce cas, parce qu'il s'agit de délimiter des zones qui se recoupent. Un point rouge ne permettrait pas cela, car il ne préciserait pas les limites.

Dans mon cas, il s'agit d'un schéma morphologique d'un animal, du coup, il y a des parties, leurs sous parties, des zones qui sont à cheval sur deux autres... Bref...

Et malheureusement, je n'ai aucune connaissance en javascript. Du coup, je pense qu'il va me falloir apprendre les bases avant de prétendre faire cela... à moins que je puisse trouver quelque part une fonction toute prête à adapter.

Smiley confused Désolé, j'ai l'impression de vous faire perdre votre temps : je pensais qu'il y aurait un moyen plus simple...
Si tu as 10 ou 20 zones, alors oui fais 20 images transparentes et ta feuille de style fera le changement d'image.
Ou moins lourd, 20 jpeg ??
Je pense avoir environ 10-15zones, reste à savoir comment faire cela dans la feuille de style...

Parce qu'au final j'espérais que cela ressemble à ça :

............. Lien 1
............. Lien 2
..Image... Lien 3
............. Lien 4
............. Etc.

Avec une image de fond, et autant d'images transparentes que de zones.
Bon, je pensais à du transparent pour gagner en volume à télécharger, mais c'est tout, je peux aussi bien faire des images qui sont simplement remplacées l'une par l'autre.

Donc, l'image est à côté du lien... Vraiment, que ça soit en html, css ou javascript, je n'ai pas la moindre idée sur comment le faire.
Bon je prends l'exemple de autant d'image compléte en jpg
crées un répetoire ou tu mets le HTM
puis dans un sous-répertoire appelé /img
mets tes images donc toutes de la même taille
ça devrait marcher



<html>
<head>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function VoirImg(Limg) {
  LeHtml="<IMG border=0  src='img/"+Limg+"' 
  style='POSITION: absolute; TOP: 0px;LEFT:0px;Z-INDEX: 95' >";
  
  if (document.layers) {
    document.layers["MonDiv"].document.write(LeHtml);
    document.layers["MonDiv"].document.close();
    document.layers["MonDiv"].top=20;
    document.layers["MonDiv"].left=112;
    document.layers["MonDiv"].visibility="show";}
  if (document.all) {
    MonDiv.innerHTML=LeHtml;
    document.all["MonDiv"].style.top=20;
    document.all["MonDiv"].style.left=120;
    document.all["MonDiv"].style.visibility="visible";
  }
  else if (document.getElementById) {
    document.getElementById("MonDiv").innerHTML=LeHtml;
    document.getElementById("MonDiv").style.top=20;
    document.getElementById("MonDiv").style.left=120;
    document.getElementById("MonDiv").style.visibility="visible";
  }
}
function CacheMonDiv() {
        if (document.layers) {document.layers["MonDiv"].visibility="hide";}
        if (document.all) {document.all["MonDiv"].style.visibility="hidden";}
        else if (document.getElementById){document.getElementById("MonDiv").style.visibility="hidden";}
}

function CreDiv() {
	if (document.layers) {
        document.write("<LAYER name='MonDiv' top=10 left=100 visibility='hide'></LAYER>");
	}
	if (document.all) {
        document.write("<DIV id='MonDiv' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}
	else if (document.getElementById) {
        document.write("<DIV id='MonDiv' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}
}

</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#FFFFFF" alink="#000066" link="#000066" vlink="#000066" >
<SCRIPT language="JavaScript">CreDiv();</SCRIPT>

<a href="#" onMouseOver="VoirImg('cc01.jpg')" onMouseOut="CacheMonDiv()">Premier Lien </a><br />
<a href="#" onMouseOver="VoirImg('cc02.jpg')" onMouseOut="CacheMonDiv()">Deuxieme Lien</a><br />
<a href="#" onMouseOver="VoirImg('cc03.jpg')" onMouseOut="CacheMonDiv()">Autre Lien</a>
<br /><br />
</font>
</body></html>

Modifié par FoxLeRenard (22 Apr 2009 - 17:11)
En plus je me dis qu'avec une feuille de style c'est plus simple et ça plaira aux alsacreatiens Smiley biggrin je vais te préparer un chtit'exemple ..
ça ne marche pas...

J'ai pas trouvé le nom à donner aux images dans cet exemple...

Bon, je verrais ça mieux demain : j'ai un soucis urgent sur le site : faut tout recharger sur le serveur Smiley sweatdrop
Oui alors j'explique reprends cette version
c' est celle que je t'ais mise ici

exemple supprime

Tu vois dans chaque lien il y a juste le nom de l image
onMouseOver="VoirImg('test3.jpg')"

Et la dans les premiéres lignes tu remarques
le répertoire ou elles sont

IMG border=0 src='0test/"+Limg+"'



<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function VoirImg(Limg) {
  LeHtml="<IMG border=0  src='0test/"+Limg+"' style='POSITION: absolute; TOP: 0px;LEFT:0px;Z-INDEX: 95' >";
  if (document.layers) {
    document.layers["MonDiv"].document.write(LeHtml);
    document.layers["MonDiv"].document.close();
    document.layers["MonDiv"].top=20;
    document.layers["MonDiv"].left=112;
    document.layers["MonDiv"].visibility="show";}
  if (document.all) {
    MonDiv.innerHTML=LeHtml;
    document.all["MonDiv"].style.top=20;
    document.all["MonDiv"].style.left=120;
    document.all["MonDiv"].style.visibility="visible";
  }
  else if (document.getElementById) {
    document.getElementById("MonDiv").innerHTML=LeHtml;
    document.getElementById("MonDiv").style.top=20;
    document.getElementById("MonDiv").style.left=120;
    document.getElementById("MonDiv").style.visibility="visible";
  }
}
function CacheMonDiv() {
        if (document.layers) {document.layers["MonDiv"].visibility="hide";}
        if (document.all) {document.all["MonDiv"].style.visibility="hidden";}
        else if (document.getElementById){document.getElementById("MonDiv").style.visibility="hidden";}
}

function CreDiv() {
	if (document.layers) {
        document.write("<LAYER name='MonDiv' top=10 left=100 visibility='hide'></LAYER>");
	}
	if (document.all) {
        document.write("<DIV id='MonDiv' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}
	else if (document.getElementById) {
        document.write("<DIV id='MonDiv' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}
}

</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#FFFFFF" alink="#000066" link="#000066" vlink="#000066" >
<SCRIPT language="JavaScript">CreDiv();</SCRIPT>

<A href="#" onMouseOver="VoirImg('test1.jpg')" onMouseOut="CacheMonDiv()">Premier Lien </A><BR>
<A href="#" onMouseOver="VoirImg('test2.jpg')" onMouseOut="CacheMonDiv()">Deuxieme Lien</A><BR>
<A href="#" onMouseOver="VoirImg('test3.jpg')" onMouseOut="CacheMonDiv()">Autre Lien</A>
<BR><BR>
</FONT>
</BODY></HTML>

Modifié par FoxLeRenard (25 Apr 2009 - 11:03)
ça m'a l'air parfaitement adapté à mes besoins, je teste ça dès demain...

Merci en tout cas, je donnerais le résultat dans l'après midi certainement, sous réserve de ne pas tout casser bêtement comme ce soir Smiley ohwell
Bon ça marche chez moi (l'essai)

Reste à l'intégrer au sein de la page...

D'après ce que je vois, le code Javascript génère des blocs avec une position absolue... C'est possible de l'insérer à l'emplacement préçis d'une image?

Lorsque tu parlais de mettre une feuille de style, tu parlais des positionnements indiqués dans le code javascript?

Bon, je vais plancher là dessus - et mettre ça en xhtml strict... Pour être cohérent par rapport au reste du site Smiley smile

Et bien sûr finir la description, qui servira de contenu alternatif Smiley smile
Bon, je n'avais pas envie de mettre le lien vers mon site actuel... Mais bon Smiley ohwell

Faut discuter sur du concret :

/* Lien supprimé : problème résolu. */

J'effacerais le lien une fois le problème résolu...

Donc, là j'ai pas mal de soucis... Déjà, j'ai l'impression de m'être gouré quelque part dans l'uri des images à charger.

En tout cas, j'ai trouvé une nouvelle idée : je mettrais mon image en position fixe, de façon à ce qu'elle serve d'illustration au texte qui suivra tout au long de la lecture.
Modifié par Arctinurus (28 Jul 2009 - 13:56)
@ FoxLeRenard

document.write("<LAYER name='MonDiv' top=10 left=100 visibility='hide'></LAYER>");
Celle-là fallait l'oser.
Arsene a écrit :
@ FoxLeRenard

document.write("<LAYER name='MonDiv' top=10 left=100 visibility='hide'></LAYER>");
Celle-là fallait l'oser.
Arg ! Smiley biggol

@FoxLeRenard > Est-ce vraiment trop te demander de mettre un doctype valide aux codes que tu proposes et de le valider avant de le soumettre ? Smiley ohwell (c'est vrai que ça ne fait que la troisième fois que je te le demande !)
Pages :
Sujet clos
Aller à