Image cliquable (HTML)
Fermé
Bonjour,
J'aimerais pouvoir afficher sur une image une forme précise (cercle, rectangle, ...) lorsque l'utilisateur clique sur un point de l'image.
Mais cette forme doit être spécifique au choix fait par l'utilisateur dans une liste déroulante.
Bref, si on choisit la valeur 1 de la liste, il me faudrait un rectangle et si on choisit la valeur 2 de la liste, il me faudrait un carré.
C'est là que cela coince car si j'ai su faire apparaitre une forme, je ne vois pas comment relier le type de forme à la valeur choisie de la liste déroulante. J'ai bien essayer de faire une boucle mais je ne suis pas une pro ds le domaine
Si vous avez des idées, je suis preneuse.
J'aimerais pouvoir afficher sur une image une forme précise (cercle, rectangle, ...) lorsque l'utilisateur clique sur un point de l'image.
Mais cette forme doit être spécifique au choix fait par l'utilisateur dans une liste déroulante.
Bref, si on choisit la valeur 1 de la liste, il me faudrait un rectangle et si on choisit la valeur 2 de la liste, il me faudrait un carré.
C'est là que cela coince car si j'ai su faire apparaitre une forme, je ne vois pas comment relier le type de forme à la valeur choisie de la liste déroulante. J'ai bien essayer de faire une boucle mais je ne suis pas une pro ds le domaine
Si vous avez des idées, je suis preneuse.
A voir également:
- Image cliquable (HTML)
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Acronis true image - Télécharger - Sauvegarde
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? ✓ - Forum Photoshop
- Image iso windows 10 - Guide
1 réponse
Utilisateur anonyme
16 févr. 2010 à 21:46
16 févr. 2010 à 21:46
Tu bosse javascript je suppose ? Si c'est le cas, c'est plutôt simple, a peu près comme ce-ci :
Dans la partie head :
Et le code du select
Donc dans la variable image, tu as l'image correspondante, tu n'as plus qu'a utiliser map area et une autre fonction javascript pour afficher l'image.
Au fait, tes formes sont bien des images jpeg, gif ou png, je me trompe ?
Dans la partie head :
<script type='text/javascript'>
var image="";
function VoirValeur(value){
swhitch(value){
case "valeur 1":image="image1.png";break;
case "valeur 2":image="image2.png";break;
...
}
}
</script>
Et le code du select
<select onchange)"VoirValeur(this.value)">...</select>
Donc dans la variable image, tu as l'image correspondante, tu n'as plus qu'a utiliser map area et une autre fonction javascript pour afficher l'image.
Au fait, tes formes sont bien des images jpeg, gif ou png, je me trompe ?
16 févr. 2010 à 22:00
Non, mes formes ne sont pas des images jpg, .... Comme tu le vois ci-dessous, la première forme créé est un simple carré 'monCarre'. Dès lors, ds ta proposition, les valeurs données aux case ne sont donc pas des images mais les elements que j'aimerais créer tels que 'monCarre','monRectangle',...
J'espère me faire comprendre...
<HEAD>
<script language="JavaScript" type="text/javascript">
function clickZone()
{
document.getElementById('monCarre').style.display = "block";
document.getElementById('monCarre').style.left = Mouse_X-10;
document.getElementById('monCarre').style.top = Mouse_Y-10;
parent.formulaire.document.getElementById('posX').value=Mouse_X;
parent.formulaire.document.getElementById('posY').value=Mouse_Y;
}
var Mouse_X;
var Mouse_Y;
function WhereMouse( e ){
...
...
...
}
</script>
<STYLE>
#monCarre {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #fff;
background: #ff0000;
}
</STYLE>
<HEAD>
<BODY>
<IMG SRC="ApercuWebviewer.jpg" id="maCarte0" onClick="clickZone()">
<div id="monCarre" style="display:none;"></div>
</BODY>
</HTML>