Discussion :

[apdf1]

Bonjour,

J'ai un code qui à était réaliser par Smoking que je salut et remercie au passage, je voudrai modifier ce code qui sert à masquer ou afficher du texte.
A l'ouverture de la page le texte est afficher et j'ai un bouton qui me permet de cacher le texte.
j'aimerai que le texte ne sois pas pas afficher à l'ouverture de la page ?
Mon 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 * Script bouton afficher/masquer texte sur la carte
 */
var oTexts = $("g text, g line");
$("#bouton_texte").on("click",function(){
  var obj = $(this);
  if( obj.text() === "Masquer le texte"){  
   obj.text("Afficher le texte");	
  oTexts.hide();   //Hide = cacher
  }
  else {
    obj.text("Masquer le texte");  
   oTexts.show();
  }
});
function afficheImage(id) {
 $("#" + id).show();
}
function cacheImage(id) {
 $("#" + id).hide();
}
function changeMessage(message, id, classe) {
  $("#" + id).html(message).addClass(classe);
}
 
var oGroupes = $('g[data-description]');
/**
 *  tooltip sur la carte
 */
function svgTip() {
  // style à appliquer si l'on ne passe pas par la classe
  var opts = {
    "display": "none",
    "position": "absolute",
    "top": 0,
    "left": 0,
    "padding": "1em",
    "border": "1px solid red",
    "font-size": "1em",
    "color": "#000",
    "background-color": "rgba(255,255,255,.8)",
    "pointer-events": "none"
  };
  oGroupes.each(function(id, obj) {
    var tt = $(this).data("description");
    var that = $("<div class='svgtip'>" + tt + "</div>");
    // action sur mouseover/out
    $(this).hover(function(event) {
      that.css({
        'left': event.clientX,
        'top': event.clientY + $(window).scrollTop()
      });
      that.addClass("active");
      that.slideDown(150);
    }, function() {
      that.slideUp(150);
      that.removeClass("active");
    });
    $(this).on("mousemove", function(event) {
      if (that.hasClass("active")) {
        that.css({
          'left': event.clientX,
          'top': event.clientY + $(window).scrollTop() - that.height()
        });
      }
    });
    $('body').append(that);
  });
};
new svgTip();
/**
 * Eléments <g> de la carte
 * Affichage
 * - mise en surbrillance lien de la liste
 * - surbrillance <path> (géré via CSS:hover)
 * - affichage de l'image
 * - affichage du texte
 */
oGroupes.each(function(ind, elem) {
  // récupération du <a> contenu
  var oLien = elem.firstElementChild;
  // récupération du numéro ID pour la liste
  var index = oLien.id.replace("region-", "");
  // récupération des ID pour image et texte
  var idImage = $(oLien).data("img");
  var idTexte = $(oLien).data("txt");
  // action sur mouseover/out
  $(this).hover(function() {
    // ajout classe sur lien de la liste
    $("#list-" + index).addClass("is-active");
    // affiche image et texte
    afficheImage(idImage);
    changeMessage(idTexte, "ejs_texte");
  }, function() {
    // supprime classe sur lien de la liste
    $("#list-" + index).removeClass("is-active");
    // masque image et texte
    cacheImage(idImage);
    changeMessage("", "ejs_texte");
  });
});
 
/**
  * Liens de la liste
  * Affichage des différents éléments au survol des liens de la liste
  * - mise en surbrillance lien survolé
  * - surbrillance <path>
  * - affichage de l'image
  * - affichage du texte
  */
$("a[id^='list-']").each(function(ind, elem) {
    // récupération du numéro ID
    var index = elem.id.replace("list-", "");
    // récupération des ID pour image et texte
    var idImage = $(this).data("img");
    var idTexte = $(this).data("txt");
    // action sur mouseover/out
    $(this).hover(function() {
        $("#list-" + index).addClass("is-active");
        $("#region-" + index).addClass("is-active");
        // affiche image et texte
        afficheImage(idImage);
        changeMessage(idTexte, "ejs_texte");
    }, function() {
        $("#list-" + index).removeClass("is-active");
        $("#region-" + index).removeClass("is-active");
        // masque image et texte
        cacheImage(idImage);
        changeMessage("", "ejs_texte");
    });
});

Je vous remercie d'avance
Cordialement

Max

[mac79]

Inverse hide et show non ?

[apdf1]

Bonjour Mac79

C"est ce que j'avais fait mes sa ne fonctionne pas
Je te remercie et te souhaite une bonne jpurnée
Max

[NoSmoking]

Bonjour,
il eut été bon que tu précises le contexte général de ton code.

Pour ceux que cela intéressent cela me semble être issus de cette longue (trop longue) discussion : Modifier mon code onMouseOver (accès direct à ce qui me semble inintéressant).

Dans le CSS applique, ou non, une règle CSS qui cache ou non les éléments.

Le bouton qui pilote l’affichage/masquage est à mettre en concordance avec l'action

• Label bouton : « Masquer le texte » si les éléments sont affichés au départ;
• Label bouton : « Afficher le texte » si les éléments sont masqués au départ.

Tu peux également, sans rien changer, simuler un clic sur ton bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#bouton_texte").click();