Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Suite à un problème technique intervenu entre le 22 et le 23 mars, nous avons du procéder dans la soirée du 25 mars, à la restauration de la base de données du 24 mars (matinée).

En clair, nous avons perdu vos contributions et inscriptions du dimanche 24 et du lundi 25 mars.
Nous vous prions de nous excuser.

#1 Thu 03 September 2020 15:30

sylvainSIG
Participant assidu
Lieu: Moissac
Date d'inscription: 29 Nov 2018
Messages: 263

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: 263

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: 263

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

 

Pied de page des forums

Powered by FluxBB