Button avec deux fonctions

**maryliseduteil** · 26/11/2016, 20h39

Bonjour,

Je cherche un moyen d'avoir deux fonctions diff�rentes lorsqu'on clique sur un bouton.

Avec une checkbox, le code suivant fonctionne bien.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
// Masquer le panneau
function hidepanel(input)
{
  if (input.checked) {
    document.getElementById("panel").style.display = "none";
  }
  else {
    document.getElementById("panel").style.display = "block";
  }
}
</script>
 
<label><input type="checkbox" onclick="hidepanel(this)">Masquer le panneau</label>

Quand on coche la case �a ex�cute la fonction1 et quand on d�coche, �a ex�cute la fonction2.
Je cherche � faire la m�me chose mais avec un bouton, et avec une fonction diff�rente, ci-dessous :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// au premier clic, je souhaite avoir ça :
  var lien_css = document.createElement('link');
    lien_css.setAttribute("href","./files/css/layers-off.css");
    lien_css.setAttribute("rel","stylesheet");
    lien_css.setAttribute("type","text/css");
    document.getElementsByTagName("head").item(0).appendChild(lien_css);
 
// au second clic, je souhaite avoir ça :
  var lien_css = document.createElement('link');
    lien_css.setAttribute("href","./files/css/layers-on.css");
    lien_css.setAttribute("rel","stylesheet");
    lien_css.setAttribute("type","text/css");
    document.getElementsByTagName("head").item(0).appendChild(lien_css);

Merci pour votre aide.

**badaze** · 26/11/2016, 22h25

Quelque chose comme �a ?

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function maFonction(unObjet) {
 if (unObjet.value == "Fonction 1") {
   alert('je fais ça');
         unObjet.value = "Fonction 2";
 } else {
   alert('je fais çi');
         unObjet.value = "Fonction 1"; 
 }
}
//-->
</script>
 
</head>
<body>
 
<input type="button" value="Fonction 1" onclick="maFonction(this)"/>
</body>
</html>

**melka one** · 26/11/2016, 23h25

jour

on peut aussi initialis� une variable qui vaut soit true soit false

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
// Masquer le panneau
 
var etat=false
 
function hidepanel(input)
{
  if (etat) {
    document.getElementById("panel").style.display = "none";
    etat=false
  }
  else {
    document.getElementById("panel").style.display = "block";
    etat=true
  }
}
</script>
 
<label><input type="checkbox" onclick="hidepanel(this)">Masquer le panneau</label>

**maryliseduteil** · 26/11/2016, 23h52

Merci pour vos r�ponses et votre aide

**NoSmoking** · 27/11/2016, 10h18

Bonjour,

Je cherche � faire la m�me chose mais avec un bouton, et avec une fonction diff�rente, ci-dessous :

si je comprend bien au premier click tu linkes un fichier CSS et au deuxi�me tu en linkes un second.

J'ai du mal � comprendre l'utilit� de cette d�marche, pourquoi ne pas tout charger et ensuite jouer avec un add/remove de classe sur le(s) �l�ment(s) concern�(s) ?

**Watilin** · 27/11/2016, 17h19

Envoy� par NoSmoking

Bonjour,
si je comprend bien au premier click tu linkes un fichier CSS et au deuxi�me tu en linkes un second.

J'ai du mal � comprendre l'utilit� de cette d�marche, pourquoi ne pas tout charger et ensuite jouer avec un add/remove de classe sur le(s) �l�ment(s) concern�(s) ?

Compl�tement d�accord, d�autant plus qu�� chaque clic, une nouvelle feuille de style va �tre ajout�e au head, ce qui cr�e des doublons.

Dans ton cas Marylise, il semblerait que tu aies simplement besoin d�un classique toggle (commutateur) de visibilit�.

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
"use strict";
 
// Masquer le panneau
function togglePanel(button)
{
  var panel = document.getElementById("panel");
  if ("none" === panel.style.display) {
    panel.style.display = "block";
    button.textContent = "Masquer le panneau";
  }
  else {
    panel.style.display = "none";
    button.textContent = "Afficher le panneau";
  }
}
 
</script>
 
<button onclick="togglePanel(this)">
  Masquer le panneau
</button>

**maryliseduteil** · 27/11/2016, 18h25

Merci pour vos r�ponses.

En effet, le but de ma fonction est de charger un css diff�rent. Vous avez confondu les fonctions que je souhaitais.
La fonction pour masquer le panel est diff�rente.

La fonction que je souhaite impl�menter est celle-ci donc (j'ai mal formul� ma question je crois) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
// au premier clic, je souhaite avoir ça :
  var lien_css = document.createElement('link');
    lien_css.setAttribute("href","./files/css/layers-off.css");
    lien_css.setAttribute("rel","stylesheet");
    lien_css.setAttribute("type","text/css");
    document.getElementsByTagName("head").item(0).appendChild(lien_css);
 
// au second clic, je souhaite avoir ça :
  var lien_css = document.createElement('link');
    lien_css.setAttribute("href","./files/css/layers-on.css");
    lien_css.setAttribute("rel","stylesheet");
    lien_css.setAttribute("type","text/css");
    document.getElementsByTagName("head").item(0).appendChild(lien_css);

Les fichiers layers-on ou layers-off ne contiennent que �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

path {display:block !important;}

Ou display:none pour l'autre.

Le probl�me c'est que je n'arrive pas � agir sur le s�lecteur path � part avec du css. J'ai essay� avec document.getElementsByTagName mais �a ne fonctionne pas.

Pour le moment ma fonction ressemble � ceci et fonctionne bien (mais en effet, �a charge � chaque fois un css dans le head, qui reste cependant tr�s l�ger) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var currentlayers = true;
function layers() {
if (currentlayers == true) {
  currentlayers = false;	
  var lien_css = document.createElement('link');
		lien_css.setAttribute("href","./files/css/layers-off.css");
		lien_css.setAttribute("rel","stylesheet");
		lien_css.setAttribute("type","text/css");
		document.getElementsByTagName("head").item(0).appendChild(lien_css); 
} 
else {
  currentlayers = true;	
  var lien_css = document.createElement('link');
		lien_css.setAttribute("href","./files/css/layers-on.css");
		lien_css.setAttribute("rel","stylesheet");
		lien_css.setAttribute("type","text/css");
		document.getElementsByTagName("head").item(0).appendChild(lien_css);
}
}

Et mon bouton html :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<button onclick="layers()" class="layers" title="Afficher/Masquer les calques"></button>

J'ai une fonction similaire pour changer la couleur de fond et d'�criture (blanc sur fond noir, ou noir sur fond blanc).
Cette fonction appelle aussi deux fichiers css diff�rents.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Changer la couleur de fond
var colorblack = true;
function color() {
if (colorblack == true) {
  colorblack = false;	
  var lien_css = document.createElement('link');
		lien_css.setAttribute("href","./files/css/white.css");
		lien_css.setAttribute("rel","stylesheet");
		lien_css.setAttribute("type","text/css");
		document.getElementsByTagName("head").item(0).appendChild(lien_css); 
} 
else {
  colorblack = true;	
  var lien_css = document.createElement('link');
		lien_css.setAttribute("href","./files/css/black.css");
		lien_css.setAttribute("rel","stylesheet");
		lien_css.setAttribute("type","text/css");
		document.getElementsByTagName("head").item(0).appendChild(lien_css);
}
}

Et le bouton html :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<button onclick="color()" class="color" title="Changer la couleur de fond"></button>

Dans ces deux fichiers css, il y a pas mal de donn�es qui changent, et comme je ne sais pas le faire dans la fonction javascript avec les document.getElementsByXXX, je l'ai fait en css en attendant.

black.css :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
/* CSS pour fond de page noir */
 
body	{color:#fff;background:#000;}
a {color:lightblue;}
a.button:link, a.button:visited, a.button:hover {border:1px solid #fff;} 
button.panelzoom, 
button.panelmap, 
button.layers, 
button.panelbonus, 
button.panelhelp, 
button.color {filter:invert(0);}
#controlpanel {border:1px solid #fff;}

white.css :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* CSS pour fond de page blanc */
 
body	{color:#000;background:#fff;}
a {color:#170d2b;}
#panelbonus a {color:lightblue;}
a.button:link, a.button:visited, a.button:hover {border:0;} 
button.panelzoom, 
button.panelmap, 
button.layers,  
button.panelbonus,
button.panelhelp, 
button.color {filter:invert(1);}
#controlpanel {border:1px solid #000;}

**Watilin** · 27/11/2016, 19h37

Pour commencer, voici une petite optimisation de tes fonctions :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var currentlayers = true;
 
function layers() {
  var lien_css = document.createElement('link');
  lien_css.rel  = "stylesheet";
  lien_css.type = "text/css";
  if (currentlayers) {
    currentlayers = false;
    lien_css.href = "./files/css/layers-off.css";
  }
  else {
    currentlayers = true;
    lien_css.href = "./files/css/layers-on.css";
  }
  document.head.appendChild(lien_css);
}
 
// Changer la couleur de fond
var colorblack = true;
 
function color() {
  var lien_css = document.createElement('link');
  lien_css.rel  = "stylesheet";
  lien_css.type = "text/css";
  if (colorblack) {
    colorblack = false;
    lien_css.href = "./files/css/white.css";
  }
  else {
    colorblack = true;
    lien_css.href = "./files/css/black.css";
  }
  document.head.appendChild(lien_css);
}

Mais �a ne r�gle pas le probl�me des doublons qui s�ajoutent � chaque clic. Tu ne le sais peut-�tre pas, mais la gestion dynamique de feuilles de style n�est pas une pratique adapt�e aux besoins courants. Lors de l�insertion d�une nouvelle feuille, �a demande beaucoup de travail au navigateur de rechercher quels s�lecteurs correspondent � quels �l�ments dans la page. Basiquement, tu peux prendre le nombre de s�lecteurs dans la feuille, multiplier par le nombre d��l�ments dans la page, et �a te donne le d�but d�une id�e de la complexit� de l�op�ration. Bien s�r j�exag�re, �a fait l�objet de nombreuses optimisations (d�ailleurs, une lecture int�ressante � ce sujet), mais �a reste quelque chose de non trivial, surtout si la feuille de style et la page sont grandes.

Suis les conseils de NoSmoking, tu verras que c�est beaucoup plus simple de jouer sur les classes. Par exemple, tu peux ajouter des classes sur le body, disons .white-bg pour un fond blanc et .black-bg pour un fond noir, et commuter entre les deux.

Code JS :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
function color() {
  if (document.body.classList.contains("white-bg")) {
    document.body.classList.remove("white-bg");
    document.body.classList.add("black-bg");
  }
  else {
    document.body.classList.remove("black-bg");
    document.body.classList.add("white-bg");
  }
}

Code CSS :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* CSS pour fond de page noir */
 
body.black-bg { color: white; background: black; }
body.black-bg a { color: lightblue; }
body.black-bg a.button:link,
body.black-bg a.button:visited,
body.black-bg a.button:hover { border: thin solid white; }
body.black-bg button.panelzoom,
body.black-bg button.panelmap,
body.black-bg button.layers,
body.black-bg button.panelbonus,
body.black-bg button.panelhelp,
body.black-bg button.color { filter: invert(0); }
body.black-bg #controlpanel { border: thin solid white; }
 
/* CSS pour fond de page blanc */
 
body.white-bg { color: black; background: white; }
body.white-bg a { color: #170d2b; }
body.white-bg #panelbonus a { color: lightblue; }
body.white-bg a.button:link, a.button:visited, a.button:hover { border: none; }
body.white-bg button.panelzoom,
body.white-bg button.panelmap,
body.white-bg button.layers,
body.white-bg button.panelbonus,
body.white-bg button.panelhelp,
body.white-bg button.color { filter:invert(100%); }
body.white-bg #controlpanel { border: thin solid black; }

�a te para�tra peut-�tre fastidieux de faire toutes ces r�p�titions dans le code CSS ; c�est l� qu�interviennent les pr�compilateurs tels que SASS.

Oh, et quant � ton probl�me de path, j�avoue que je n�ai pas bien compris si tu utilisais ce mot juste dans ton post pour raccourcir un s�lecteur qui en r�alit� est plus long, ou si tu as r�ellement des balises <path> dans ta page. Comme ces balises ne font pas partie de HTML, je suppose qu�il y a un namespace particulier � sp�cifier, et j�avoue que je ne sais pas bien comment �a se passe au niveau du CSS dans ce cas.

Si tu gal�res avec les fonctions getElementsByXXX, jette un �il � querySelectorAll, tu verras c�est tr�s confortable !

**maryliseduteil** · 27/11/2016, 20h08

Merci beaucoup. Ta fonction pour la couleur fonctionne tr�s bien, et si elle est plus optimis�e que mon ancienne m�thode, alors c'est chouette.
En plus, j'apprends des choses au fur et � mesure.

Pour path, ce n'est pas un raccourci, j'ai bien un s�lecteur path dans mon code, mais il ne correspond en effet � aucune balise html.

path est d�fini dans du javascript, il s'agit de coordonn�es de diff�rents points sur une image, correspondant donc � une zone polygonale.
En gros, j'ai un fichier javascript avec ceci comme donn�es :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
var zones = [
	{  	name: "Nom de la zone",
		txt: "blablabla",
		bord: "blue",
                path:"m  2827,578 -36,42 -49,82 -35,42 35,36 56,45 12,10 -14,29 11,10 11,33 13,33 6,35 4,23 -3,9 -5,2 3,28 10,8 2,4 7,-6 15,17 -4,5 -6,-6 -9,7 5,7 -11,6 -16,10 -19,16 -1,8 -3,8 -3,14 z"
	},

Ce sont des coordonn�es relatives et non absolues, chaque point se calculant � partir du pr�c�dent.

Au survol de la zone, �a affiche un calque en surbrillance (de couleur "blue" donc pour l'exemple ci-dessus). Et je souhaite une fonction qui d�sactive la surbrillance au survol (qui d�sactive tous les calques en gros, donc le fameux s�lecteur path). D'o� ma fonction qui switch entre display:block et none, mais dans des fichiers css pour le moment.

S'il y a moyen d'optimiser �a comme pour la fonction color (sans charger des fichiers css � chaque fois), ce serait chouette.

J'essaye de bidouiller de mon c�t�, sans succ�s pour le moment car je n'arrive pas � trouver la syntaxe (� partir de ta formule) pour s�lectionner ce fameux path.

Encore merci � tous pour vos conseils et votre aide.

**maryliseduteil** · 27/11/2016, 22h19

J'ai essay� cette fonction pour masquer/afficher path, mais �a ne fonctionne pas. Il y a un truc que j'ai pas encore d� bien comprendre ^^

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
// Afficher/Masquer les calques au survol
function layers() {
  if (document.path.classList.contains("layers-on")) {
    document.path.classList.remove("layers-on");
    document.path.classList.add("layers-off");
  }
  else {
    document.path.classList.remove("layers-off");
    document.path.classList.add("layers-on");
  }
}

Le CSS :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
path.layers-on {display:block !important;}
path.layers-off {display:none !important;}

Le bouton html :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<button onclick="layers()" class="layers" title="Afficher/Masquer les calques au survol des zones"></button>

Bien s�r, �a ne fonctionne pas.

Qu'ai-je mal fait du coup ?

Je tenais encore � pr�ciser (si �a n'a pas d�j� �t� dit), que je suis vraiment nulle en programmation. Je sais un peu me d�brouiller en copiant collant des bouts de code, ou en adaptant suivant mes besoins � partir de formules d�j� existantes, mais mes connaissances (et mes facult�s de compr�hension surtout) s'arr�tent l�.

J'ai d�j� essay� d'apprendre javascript et php, mais il arrive un moment o� je ne comprends plus rien (c'est pas trop mon domaine en gros).

N�anmoins, avec un peu d'aide par-ci par-l�, beaucoup de prises de t�te et d'�pluchages de code, voici ce que j'ai r�ussi � faire jusqu'� pr�sent (vous remarquerez que toutes mes questions sur le forum ces derniers jours concernent cette application

) :
http://www.donjondudragon.fr/map/laelith.html

Il s'agit d'une carte interactive donc (d'une ville imaginaire, dans le cadre des jeux de r�le sur table). Bien s�r, le script peut servir pour toutes sortes de cartes, plans, images et autres (imaginaires ou non, �videmment

).

Les diff�rentes fonctions :
- Zoom molette centr� sur le curseur
- drag and drop
- d�placement de quatre fa�ons diff�rentes (fl�ches du clavier, celles du panel en haut � droite, au double clic, ou en drag and drop)
- quelques fonctions sympas : notre fameux "afficher/masquer les calques" dont on parle sur ce topic m�me, le changement de couleur de fond, et divers panneaux qui s'affichent pour diverses choses.
- s�lection d'un lieu dans une liste d�roulante pour afficher la position sur la carte et sa description.
- calques des quartiers au survol.
- le tout devrait normalement �tre responsive, m�me si sur petits �crans ce n'est pas tr�s pratique d'utilisation.

Tout le code source est r�cup�rable en faisant "Enregistrer sous", il n'y a que la carte je crois qui ne se t�l�charge pas.

Il me reste une fonction "vitale" qu'il me faut impl�menter (l'objet d'un prochain topic certainement

) : l'autocomplete search. Un truc de ce genre : http://jqueryui.com/autocomplete/#combobox
En gros, une zone de saisie qui �limine au fur et � mesure les choix possibles (tr�s pratique lorsque la liste fait 12km de long).

Bon, tout �a n'a pas grand-chose � voir avec le topic, mais je voulais vous montrer un peu l'utilit� de toutes mes questions afin que vous visualisez mieux mes objectifs.

Encore merci pour votre aide. �a fait plaisir de se savoir accompagn�e par des gens comp�tents.

**Watilin** · 27/11/2016, 22h36

Ton path n�est pas un �l�ment HTML *. Les s�lecteurs CSS et donc, par extension, la fonction querySelector qui les utilise, ne peuvent agir que sur des �l�ments HTML. Tu te doutes bien qu�il n�est pas possible de � d�sactiver � une instruction JavaScript au moyen de CSS

Peut-�tre que tu peux avoir plus d�infos � l�endroit o� tu as trouv� ce code qui dessine ton path. Il n�y a pas cent cinquante moyens de dessiner dans une page web : c�est soit un <canvas>, soit un <svg>. Tu peux utiliser l�inspecteur d��l�ments de ton navigateur (dans les outils de la touche F12) pour essayer de trouver l��l�ment en question. Note au passage : use et abuse de ces outils, ils sont pr�cieux et te permettent de comprendre plein de trucs !

Vu ce que tu essayes de faire et ce que tu as d�j� r�ussi, je pense que tu as la curiosit� et la motivation n�cessaires pour ne pas rester nulle en programmation tr�s longtemps

* Edit pour la post�rit� : le <path> dont il est question est en r�alit� un �l�ment SVG, g�n�r� au moyen de Raphael.js. En tant qu��l�ment SVG, il s�int�gre au DOM de la page comme un �l�ment HTML normal, et donc en th�orie une r�gle CSS display: none devrait s�appliquer dessus.

**maryliseduteil** · 27/11/2016, 22h45

Merci Watilin, et pour tes encouragements.

J'utilise beaucoup F12 �tant webmaster. Je vais me renseigner pour le path.

Toutefois, �tant donn� que les fichiers css layers-on ou off ne chargent qu'une seule petite instruction (et pas un gros fichier qui modifie toute la page), �a n'est pas non plus tr�s grave pour le navigateur, si j'ai bien compris ?

Je viens de voir sinon que le zoom molette centr� sur le curseur d�conne sur Firefox, et pas sur Chrome...

Quelle prise de t�te...

**Watilin** · 27/11/2016, 23h36

En effet ce n�est pas tr�s grave, mais disons que c�est une fa�on de faire inhabituelle. Et du point de vue de la maintenance du code, les choses inhabituelles sont rarement les meilleures

**NoSmoking** · 28/11/2016, 12h56

Ouf, vous avez �t� prolifique...mais je reviens sur

Toutefois, �tant donn� que les fichiers css layers-on ou off ne chargent qu'une seule petite instruction(...)

certes mais � chaque click un nouveau fichier se � linke � au document et c'est donc la derni�re d�claration qui est prise en compte car annulant la pr�c�dente. Si tu cliques 20 fois sur l'ic�ne ton DOM sera surcharg� de 20 <link href="./files/css/layers-xxx.css" rel="stylesheet" type="text/css">, c'est en cela que la mani�re est tr�s moyenne.

Tu pourrais �ventuellement passer par des feuilles de style alternatives ce qui serait beaucoup plus propre, seulement voil� il y a plus simple en passant par ajouter/enlever une classe comme d�j� mentionn�.

Principe :
cr�ation dune d�claration CSS comme suit

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
svg.hide path {
  display: none;
}

si ton �l�ment <svg> � la classe � hide � ses enfants <path> seront masqu�s et l'action au survol ne sera pas visible.

Mise en oeuvre :
cr�ation d'une fonction d�clench�e par un click sur un <button> par exemple

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
function showHideLlayers(){
  var oSVG = document.querySelector('svg');
  oSVG.classList.toggle("hide");
}

**maryliseduteil** · 28/11/2016, 13h29

Merci NoSmoking, �a marche au poil

Et c'est plus propre (et la fonction est beaucoup plus courte).
Que du +

Merci.

EDIT : apparemment, �a ne fonctionne pas sur Internet Explorer 11. Ce n'est pas tr�s grave vu que rien ne fonctionne correctement sur ce navigateur, mais c'est dommage quand m�me.

**Watilin** · 28/11/2016, 15h03

Ok alors je n�avais pas capt� que <path> �tait un �l�ment SVG. Du coup je t�ai dit des b�tises en affirmant qu�on ne pouvait pas appliquer de styles dessus. J�ai �dit� mon message pour la post�rit�.

N�oublie pas le bouton r�solu

**maryliseduteil** · 28/11/2016, 15h14

Pas de souci Watilin.

J'ai vu �a cette nuit en lisant des tutos sur les svg mais je n'ai pas pour autant percut�e sur le fait de pouvoir les s�lectionner.

Je peux mettre le sujet sur R�solu, mais avant �a, n'existe-t-il pas un moyen de faire fonctionner cette fonction sur IE ?

En fait, sur IE, les calques apparaissent au survol, mais ne disparaissent pas lorsqu'on met le curseur en dehors. Du coup, sans cette fonction d'afficher/masquer les calques �a rend l'utilisation peu confortable.

**NoSmoking** · 28/11/2016, 15h27

EDIT : apparemment, �a ne fonctionne pas sur Internet Explorer 11.

effectivement j'en avais oubli� que pour IE on a le sentiment de ce retrouver 10-15 ans en arri�re sur certains points.

Remplace la fonction layer() par ce code

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function layers() {
    var oSVG = document.querySelector('SVG') || document.querySelector('[xmlns="http://www.w3.org/2000/svg"]');
    if (oSVG) {
        if ('classList' in oSVG) {
            oSVG.classList.toggle('hide');
        }        // pour IE
         else {
            if ('hide' === oSVG.getAttribute('class')) {
                oSVG.removeAttribute('class');
            } 
            else {
                oSVG.setAttribute('class', 'hide');
            }
        }
    }
}