Image Cliquable
tritriii
Messages postés
79
Date d'inscription
Statut
Membre
Dernière intervention
-
mant -
mant -
Bonjour, je voudrais pouvoir faire ceci :
Admettons que j'ai une cate de la france, dès que je clique sur une région, une autre image apparait avec un plan de la région demandé. J'èspère que qu'elqu'un pourra m'aider.
Admettons que j'ai une cate de la france, dès que je clique sur une région, une autre image apparait avec un plan de la région demandé. J'èspère que qu'elqu'un pourra m'aider.
A voir également:
- Image Cliquable
- Image iso - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
- Image gratuite - Guide
5 réponses
En supposant que tu possèdes déjà les cartes nécessaires :
- Il faut que tu utilises une imagemap avec des polygones libres pour bien délimiter chaque région.
Tu peux les créer toi-même comme ici : http://www.thelin.net/laurent/labo/html/imagemap.html
ou aller sur un site en ligne comme celui-ci : www.image-maps.com
Si tu as besoin d'explications plus complètes je peux te les donner.
@ pluche.
Fab.
- Il faut que tu utilises une imagemap avec des polygones libres pour bien délimiter chaque région.
Tu peux les créer toi-même comme ici : http://www.thelin.net/laurent/labo/html/imagemap.html
ou aller sur un site en ligne comme celui-ci : www.image-maps.com
Si tu as besoin d'explications plus complètes je peux te les donner.
@ pluche.
Fab.
ça ça devrait marcher :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<script type="text/javascript">
if(document.images)
{
preload = false;
target = new Array();
target [0] = "ta-carte-de-france.jpg";
target [1] = "languedoc.jpg";
target [2] = "aquitaine.jpg";
target [3] = "bretagne.jpg";
var i = 0;
for(i=0; i<4; i++)
{
tmp = new Image(345, 312);
tmp.src = target[i];
}
preload = true;
}
var obj = " ";
function survol(img_index) {
var obj = document.getElementById('carte');
if (document.images && (preload == true)) {
obj.src = target[img_index];
}
}
</script>
</head>
<body>
<p>
<img border="0" id="carte" alt="Ma carte de France cliquable" width="345" height="312" src="ta-carte-de-france.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="rect" background="#000000" coords="11,10,59,29" title="languedoc" alt="languedoc" href="#"
onclick="survol(1);return false;" onmouseout="survol(0);return false;" >
<area shape="rect" coords="42,36,96,57" title="aquitaine" alt="aquitaine" href="#" onclick="survol(2);return false;"
onmouseout="survol(0);return false;" >
<area shape="rect" coords="45,113,93,134" title="bretagne" alt="bretagne" href="#" onclick="survol(3);return false;"
onmouseout="survol(0);return false;" >
</map>
</p>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Salut, voici les étapes à suivre:
1_Utiliser la technique map en html pour "découper" les zones sur l'image, un logiciel de graphisme ou pouvant afficher les coordonnées des pixels peut être utile.
exemple: http://www.thelin.net/laurent/labo/html/imagemap.html
2_On utilise javascript et le DOM pour faire la fonction qui va changer l'image lors d'un clic. Donc d'abord créer et nommer le container de l'image qui va changer puis écrire la/les fonction(s) nécessaires à chaque comportement(un comportement est l'ensemble de ce qui se passe lors d'un événement: ici le clic sur un lien déclenche l'affichage d'une image(le changement d'une image même) dans une zone)
Voici un vieux script que j'avais fait pour cela:
Il y a quelques différences avec ce que vous avez demandez(changement d'image lors d'un survol et non d'un clic et restauration d'une image neutre lorsque la souris sort de la zone) mais pour l'essentiel c'est pareil. Notez aussi qu'il y a un texte qui change en même temps que l'image.
Bon courage n'hézitez pas à demander des précisions si quelque chose vous échappe et regardez des tutos sur le net (sur le DOM de javascript ils sont nombreux et assez accessible).
1_Utiliser la technique map en html pour "découper" les zones sur l'image, un logiciel de graphisme ou pouvant afficher les coordonnées des pixels peut être utile.
exemple: http://www.thelin.net/laurent/labo/html/imagemap.html
2_On utilise javascript et le DOM pour faire la fonction qui va changer l'image lors d'un clic. Donc d'abord créer et nommer le container de l'image qui va changer puis écrire la/les fonction(s) nécessaires à chaque comportement(un comportement est l'ensemble de ce qui se passe lors d'un événement: ici le clic sur un lien déclenche l'affichage d'une image(le changement d'une image même) dans une zone)
Voici un vieux script que j'avais fait pour cela:
<html>
<head>
<!-- on va ignorer le css qui ets pour la déco-->
<style type="text/css" rel="stylesheet">
div.container{
border: 3px outset yellow;
width:232px;
background-color:#c8b8a8;
}
img.gal{
background-color:silver;
width:230px;
height:240px;
}
p.titr{
display:block;
width:232px;
border:1px solid orange;
background-color:#acab99;
text-align:center;
font-weight:bold;
font-family: arial, verdana, helvetica;
color:firebrick;
}
</style>
<script type="text/javascript" >
</script>
</head>
<body bgcolor="#8acdfc">
<table>
<tr>
<td>
<div style="border:1px solid blue;padding-left:1em;">
<p>
<span style="text-decoration:underline;">Les départements suivants sont sélectionnables sur la carte :</span>
<ul type="none">
<li>
Essonne(91)
</li>
<li>
Bouches-du-Rhône(13)
</li>
<li>
Alpes Maritimes(06)
</li>
<ul>
</p>
</div>
<center>
<script type="text/javascript">
<!-- --------------------intervertir image/texte(au survol)-------------------- -->
function changeimage1(){
document.gal.src="images/nice.gif";
document.getElementById("dynamiq").innerHTML ="Nice";
}
function changeimage2(){
document.gal.src="images/essonne.gif";
document.getElementById("dynamiq").innerHTML ="Soisy sur Seine";
}
function changeimage3(){
document.gal.src="images/salon.gif";
document.getElementById("dynamiq").innerHTML ="Salon de Provence";
}
<!-- --------------------remettre image/texte par défaut(onMouseout)-------------------->
function restore(){
document.gal.src="images/defaut.gif";
document.getElementById("dynamiq").innerHTML ="Lieu";
}
</script>
<div class="container">
<p class="titr" id="dynamiq">
<!-- notez que le id="dynamiq" permet de changer le contenu du texte dans la fonction en javascript-->
Lieu
</p>
<!-- notez que le name="gal_src" permet de changer le contenu du texte dans la fonction en javascript-->
<img name="gal" src="images/defaut.gif">
</div>
</center>
</td>
<td>
<!-- Bien sûr ces coordonnées correpondent à l'iomage de ma carte, il faut tout recalculer pour une autre image-->
<map name="map">
<!-- DEPARTEMENT 06-->
<area shape="polygon" coords="431,394, 439,387, 429,375, 441,365, 469,375, 465,393, 443,412, 420,393" href="https://www.google.com/?gws_rd=ssl" alt="Alpes Maritimes" onmouseover="changeimage1()" onmouseout="restore()" />
<!-- POUR QUE LE COMPORTEMENT AI LIEU LORS D'un clic remplacez onmouseover par onClick -->
<!-- ESSONNE 91 -->
<area shape="polygon" coords="256,131, 265,139, 264,150, 256,157, 253,153, 250,158, 244,154, 244,145" href="#" alt="Essonne" onmouseover="changeimage2()" onmouseout="restore()"/>
<!-- BOUCHES DU RHONE 13-->
<area shape="polygon" coords="338,418, 344,410, 344,408, 348,403, 353,401, 353,396, 358,391, 373,402, 380,401, 395,412, 396,425, 399,428, 393,433, 377,425, 372,425, 363,419, 360,424," href="#" alt="Bouches du Rhone" onmouseover="changeimage3()" onmouseout="restore()" />
</map>
<img usemap="#map" border="0" src="images/france.gif" width="480" height="540" alt="Carte des departements francais" />
</td>
</tr>
</table>
</body>
</html>
Il y a quelques différences avec ce que vous avez demandez(changement d'image lors d'un survol et non d'un clic et restauration d'une image neutre lorsque la souris sort de la zone) mais pour l'essentiel c'est pareil. Notez aussi qu'il y a un texte qui change en même temps que l'image.
Bon courage n'hézitez pas à demander des précisions si quelque chose vous échappe et regardez des tutos sur le net (sur le DOM de javascript ils sont nombreux et assez accessible).