Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript zone cliquable et script?

zone cliquable et script?

7 réponses
Avatar
antitaniom
Bonjour, bonne année...

Voilà, j'ai une carte de france en gif, que je découpe selon les
département (déjà là je coince! mais en bricolant j'ai réussi un truc
sale mais exploitable), je voudrais qu'a chaque fois que l'on passe sur
1 région, elle change de couleur (ou du moins face appel à une autre
découpe colorée), et que si on clique dessus elle change la valeur d'un
<input type="hidden"....>
Par contre si on re-clique dessus, elle retourne a sa couleur d'origine
et sa valeur d'origine dans l'"hidden".
Le tout pour après l'intégrer dans une base php...
En php je sais comment faire, mais justement il faudrait pour ne pas
surcharger mon serveur que les valeurs ne soient envoyées qu'après
validation de tous les autres formulaires.

J'avais pensé a utiliser des calques <div>, mais le retour a la valeur
d'origine me pause problème...

Quelqu'un saurait me dire ou trouver quelque chose de similaire que je
pourrai modifier? ou m'orienter un peu?

Merci
Signaler un problème avec ce contenu

7 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
ASM
Bonjour, bonne année...

Voilà, j'ai une carte de france en gif, que je découpe selon les
département (déjà là je coince! mais en bricolant j'ai réussi un truc
sale mais exploitable), je voudrais qu'a chaque fois que l'on passe sur
1 région, elle change de couleur (ou du moins face appel à une autre
découpe colorée), et que si on clique dessus elle change la valeur d'un
<input type="hidden"....>
Par contre si on re-clique dessus, elle retourne a sa couleur d'origine
et sa valeur d'origine dans l'"hidden".
Le tout pour après l'intégrer dans une base php...
En php je sais comment faire, mais justement il faudrait pour ne pas
surcharger mon serveur que les valeurs ne soient envoyées qu'après
validation de tous les autres formulaires.

J'avais pensé a utiliser des calques <div>, mais le retour a la valeur
d'origine me pause problème...

Quelqu'un saurait me dire ou trouver quelque chose de similaire que je
pourrai modifier? ou m'orienter un peu?

Merci


<style type="text/css">
#region_1 {
background: url(region_1.jpg) no-repeat center center; }
#region_1.ov {
background-image: url(region_1o.jpg); }
#region_2 {
background: url(region_2.jpg) no-repeat center center; }
#region_12.ov {
background-image: url(region_2o.jpg); }
</style>
<script language=javascript>
function roll(quoi) {
quoi.classname = quoi.classname==''? 'ov' : '';
}
function choix(quoi) {
document.monForm.regions.value = quoi.id;
}
</script
</head>
<body>

<img usemap="#map1" src="vide.gif" width— height1
id="region_1"
onmouseover="roll(this);"
onmouseout="roll(this);"
onclick="choix(this);">

<img usemap="#map2" src="vide.gif" width— height1
id="region_2"
onmouseover="roll(this);"
onmouseout="roll(this);"
onclick="choix(this);">

<map name=map1>
<area shape=rect coords="3,32,50,55" href="03.php">
<area shape=rect coords="48,4,91,31" href="02.php">
<area shape=rect coords="2,4,48,32" href="01.php">
</map>
<map name=map2>
<area shape=rect coords="3,32,50,55" href="59.php">
<area shape=rect coords="48,4,91,31" href="62.php">
<area shape=rect coords="2,4,48,32" href="02.php">
</map>

<form name="monForm" blabla>
<input type=hidden name="regions">
.../...


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
ASM
Bonjour, bonne année...

Voilà, j'ai une carte de france en gif, que je découpe selon les
département (déjà là je coince! mais en bricolant j'ai réussi un truc

sale mais exploitable), je voudrais qu'a chaque fois que l'on passe sur
1 région, elle change de couleur (ou du moins face appel à une autre
découpe colorée), et que si on clique dessus elle change la valeur d'un
<input type="hidden"....>

J'avais pensé a utiliser des calques <div>,


ben ? on n'a pas déjà les <img ... > ?

Quelqu'un saurait me dire ou trouver quelque chose de similaire que
je pourrai modifier? ou m'orienter un peu?


Merci


<style type="text/css">
.carte img { position: absolute; }
#region_1 {
background: url(region_1.jpg) no-repeat center center;
}
#region_1.ov {
background-image: url(region_1o.jpg);
}
#region_2 {
background: url(region_2.jpg) no-repeat center center;
}
#region_2.ov {
background-image: url(region_2o.jpg);
}
</style>

<script type="text/javascript">
function roll(quoi) {
quoi.classname = quoi.classname==''? 'ov' : '';
}
function choix(quoi) {
var id = quoi.id;
var cible = document.monForm.elements['regions'];
cible.value = cible.value==id? id : '';
}
</script
</head>
<body>

<div class="carte">
<img usemap="#map1" src="vide.gif" width— height1
id="region_1"
onmouseover="roll(this);"
onmouseout="roll(this);"
onclick="choix(this);">

<img usemap="#map2" src="vide.gif" width7 height3
id="region_2"
onmouseover="roll(this);"
onmouseout="roll(this);"
onclick="choix(this);">
</div>

<map name=map1>
<area shape=rect coords="3,32,50,55" href="03.php">
<area shape=rect coords="48,4,91,31" href="02.php">
<area shape=rect coords="2,4,48,32" href="01.php">
</map>
<map name=map2>
<area shape=rect coords="3,32,50,55" href="59.php">
<area shape=rect coords="48,4,91,31" href="62.php">
</map>

<form name="monForm" blabla>
<input type=hidden name="regions">
.../...

Donc on a :
- une image transparente (gif d'1 pixel)
pour matérialiser chaque région
- une map associée à chaque région pour les départements
- un style (image de fond) associé à chaque image de région
par l'id de cette image
- un JS de roll-over via CSS par la classe 'ov' pour l'image
de fond alternative de la région
(ce serait mieux de se servir des "portes-coulissantes pour cela)
- un JS pour mettre/enlever l'id de la région
('region_1' 'region_2' etc ...) dans l'input hidden

On profitera des id des images pour en fixer les positions et,si
possible, on fera de même pour les width et height.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
antitaniom
Merci pour cette réponse rapide.
c'est presque çà, faut juste que je modifie le code pour que le clique
ne déclenche pas l'ouverture d'une autre page mais juste change la
valeur (region validée ou non) dans un tableau, pour que lorsque je
clique sur le "submit" ca m'envoie vers ma base de donnée l'état de
chaque région (cela suppose que plusieurs régions peuvent être validées
ou non avant l'appui du bouton submit!)

Merci


Bonjour, bonne année...

Voilà, j'ai une carte de france en gif, que je découpe selon les
département (déjà là je coince! mais en bricolant j'ai réussi un truc

sale mais exploitable), je voudrais qu'a chaque fois que l'on passe sur
1 région, elle change de couleur (ou du moins face appel à une autre
découpe colorée), et que si on clique dessus elle change la valeur d'un
<input type="hidden"....>

J'avais pensé a utiliser des calques <div>,


ben ? on n'a pas déjà les <img ... > ?

Quelqu'un saurait me dire ou trouver quelque chose de similaire que
je pourrai modifier? ou m'orienter un peu?


Merci


<style type="text/css">
.carte img { position: absolute; }
#region_1 {
background: url(region_1.jpg) no-repeat center center;
}
#region_1.ov {
background-image: url(region_1o.jpg);
}
#region_2 {
background: url(region_2.jpg) no-repeat center center;
}
#region_2.ov {
background-image: url(region_2o.jpg);
}
</style>

<script type="text/javascript">
function roll(quoi) {
quoi.classname = quoi.classname==''? 'ov' : '';
}
function choix(quoi) {
var id = quoi.id;
var cible = document.monForm.elements['regions'];
cible.value = cible.value==id? id : '';
}
</script
</head>
<body>

<div class="carte">
<img usemap="#map1" src="vide.gif" width— height1
id="region_1"
onmouseover="roll(this);"
onmouseout="roll(this);"
onclick="choix(this);">

<img usemap="#map2" src="vide.gif" width7 height3
id="region_2"
onmouseover="roll(this);"
onmouseout="roll(this);"
onclick="choix(this);">
</div>

<map name=map1>
<area shape=rect coords="3,32,50,55" href="03.php">
<area shape=rect coords="48,4,91,31" href="02.php">
<area shape=rect coords="2,4,48,32" href="01.php">
</map>
<map name=map2>
<area shape=rect coords="3,32,50,55" href="59.php">
<area shape=rect coords="48,4,91,31" href="62.php">
</map>

<form name="monForm" blabla>
<input type=hidden name="regions">
.../...

Donc on a :
- une image transparente (gif d'1 pixel)
pour matérialiser chaque région
- une map associée à chaque région pour les départements
- un style (image de fond) associé à chaque image de région
par l'id de cette image
- un JS de roll-over via CSS par la classe 'ov' pour l'image
de fond alternative de la région
(ce serait mieux de se servir des "portes-coulissantes pour cela)
- un JS pour mettre/enlever l'id de la région
('region_1' 'region_2' etc ...) dans l'input hidden

On profitera des id des images pour en fixer les positions et,si
possible, on fera de même pour les width et height.




Avatar
ASM
Merci pour cette réponse rapide.
c'est presque çà, faut juste que je modifie le code pour que le clique
ne déclenche pas l'ouverture d'une autre page mais juste change la
valeur (region validée ou non) dans un tableau, pour que lorsque je
clique sur le "submit" ca m'envoie vers ma base de donnée l'état de
chaque région (cela suppose que plusieurs régions peuvent être validées
ou non avant l'appui du bouton submit!)


function choix(quoi) {
var id = quoi.id;
var cible = document.monForm.elements[id];
cible.value = cible.value==''? 'ok' : '';
return false;
}

<form name="monForm" ... >
<input type=hidden name="region_1">
<input type=hidden name="region_2">
<input type=hidden name="region_3">

...

<div class="carte">
<img id="region_1" ... >
<img id="region_2" ... >
<img id="region_3" ... >
...


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
antitaniom
Encore Merci, je test le tout ce soir.....


Merci pour cette réponse rapide.
c'est presque çà, faut juste que je modifie le code pour que le clique
ne déclenche pas l'ouverture d'une autre page mais juste change la
valeur (region validée ou non) dans un tableau, pour que lorsque je
clique sur le "submit" ca m'envoie vers ma base de donnée l'état de
chaque région (cela suppose que plusieurs régions peuvent être
validées ou non avant l'appui du bouton submit!)


function choix(quoi) {
var id = quoi.id;
var cible = document.monForm.elements[id];
cible.value = cible.value==''? 'ok' : '';
return false;
}

<form name="monForm" ... >
<input type=hidden name="region_1">
<input type=hidden name="region_2">
<input type=hidden name="region_3">

...

<div class="carte">
<img id="region_1" ... >
<img id="region_2" ... >
<img id="region_3" ... >
...





Avatar
ASM
Encore Merci, je test le tout ce soir.....


reste encore une coquille :

function roll(quoi) {
quoi.className = quoi.className==''? 'ov' : '';
}

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
liagre.sebastien
bonjour je voudrai faire dans le meme style mais je sui un debutant
pourrai -tu m'envoyer ce ke tu a deja
j'ai une carte de france a decouper aussi
tu peux me contacter directement sur

merci d'avance

"antitaniom" a écrit dans le message de news:
45a4d7e0$0$324$
Bonjour, bonne année...

Voilà, j'ai une carte de france en gif, que je découpe selon les
département (déjà là je coince! mais en bricolant j'ai réussi un truc sale
mais exploitable), je voudrais qu'a chaque fois que l'on passe sur 1
région, elle change de couleur (ou du moins face appel à une autre découpe
colorée), et que si on clique dessus elle change la valeur d'un <input
type="hidden"....>
Par contre si on re-clique dessus, elle retourne a sa couleur d'origine et
sa valeur d'origine dans l'"hidden".
Le tout pour après l'intégrer dans une base php...
En php je sais comment faire, mais justement il faudrait pour ne pas
surcharger mon serveur que les valeurs ne soient envoyées qu'après
validation de tous les autres formulaires.

J'avais pensé a utiliser des calques <div>, mais le retour a la valeur
d'origine me pause problème...

Quelqu'un saurait me dire ou trouver quelque chose de similaire que je
pourrai modifier? ou m'orienter un peu?

Merci