Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
#1 Thu 03 September 2020 15:30
- sylvainSIG
- Participant assidu
- Lieu: Moissac
- Date d'inscription: 29 Nov 2018
- Messages: 265
Afficher des images avec des checkboxes
Bonjour,
Pour un projet carto, j'ai une arborescence avec toutes mes couches. J'arrive sans problème à afficher les couches cad qu'à la checkbox "Open Street Map" s'affiche la couche OpenStreetMap.
Ce que j'aimerais c'est pouvoir dans une div, afficher la légende qui correspond à la couche quand la checkbox est sélectionnée, et l'inverse. La légende est une image.
Un utilisateur sur Developpez.net (https://www.developpez.net/forums/d2089 … icher-div/) proposait la solution pour les boutons radios.
Sachant que si deux checkboxes sont sélectionnées, il doit y avoir les deux images retournées l'une après l'autre (d'où mon idée de passer par .push() )
J'ai ce code qui marche pas. Que faut il modifier ?
Code:
var checkbox = $("input[type=checkbox]").attr("value");
document.getElementById("bodylegend").innerHTML = [];
$("input[type=checkbox]").on("change", function() {
$("input[type=checkbox]").each(function(objet){
document.getElementById("bodylegend").push('<img src="' + checkbox + '.png">');
} )});Merci d'avance pour vos retours
Sylvain
Hors ligne
#2 Fri 04 September 2020 00:19
- sylvainSIG
- Participant assidu
- Lieu: Moissac
- Date d'inscription: 29 Nov 2018
- Messages: 265
Re: Afficher des images avec des checkboxes
Re-
J'ai avancé de mon côté mais mon problème n'est cependant pas réglé.
layers_group fait référence à un groupe OL, donc un array.
Le code suivant affiche bien les images mais ne fonctionne que dans un sens. Une fois que l'image est affichée, pas possible de la cacher.
Code:
$(document).ready(function(){
$('input[type=checkbox]').on('change', function(){
var idCheckbox = $(this).attr("value");
layers_group.getLayers().forEach(function(element, index, array){
var idCouche = element.get("title");
if(idCouche === idCheckbox){
document.getElementById("autoUpdate").innerHTML = '<img src="' + idCheckbox + '.jpg">'
}})})});Des idées ?
Merci pour vos retours
Hors ligne
#3 Fri 04 September 2020 09:04
- michel56
- Participant assidu
- Lieu: Lorient
- Date d'inscription: 14 Jul 2012
- Messages: 474
Re: Afficher des images avec des checkboxes
Bonjour,
Si tu ajoutes un id à ton image:
Code:
$(document).ready(function(){
$('input[type=checkbox]').on('change', function(){
var idCheckbox = $(this).attr("value");
layers_group.getLayers().forEach(function(element, index, array){
var idCouche = element.get("title");
if(idCouche === idCheckbox){
document.getElementById("autoUpdate").innerHTML = '<img id="img" src="' + idCheckbox + '.jpg">'
}})})});Ensuite tu caches en cliquant dessus:
Code:
$('#img').click(function() {
$('#autoUpdate').hide();
});Je n'ai pas testé si ça fonctionne.
Tu peux également faire une fonction en javascript:
Code:
$(document).ready(function(){
$('input[type=checkbox]').on('change', function(){
var idCheckbox = $(this).attr("value");
layers_group.getLayers().forEach(function(element, index, array){
var idCouche = element.get("title");
if(idCouche === idCheckbox){
document.getElementById("autoUpdate").innerHTML = '<img onclick="javascript:ClosePopup(); return true;" id="img" src="' + idCheckbox + '.jpg">'
}})})});
$('#img').click(function() {
$('#autoUpdate').hide();
});
function ClosePopup()
{
$("#img").fadeOut(1200, function() { });
}Opérateur cartographique & DAO & PHP.
Hors ligne
#4 Wed 23 September 2020 08:24
- sylvainSIG
- Participant assidu
- Lieu: Moissac
- Date d'inscription: 29 Nov 2018
- Messages: 265
Re: Afficher des images avec des checkboxes
Bonjour,
Merci pour vos retours. Je n'ai pas trouvé mais comme j'aimerais intégrer des formulaires, le problème ne se pose plus.
Sylvain
Hors ligne
