Liens paramétrables [Résolu]

Signaler
Messages postés
114
Date d'inscription
samedi 27 juillet 2013
Statut
Membre
Dernière intervention
7 mai 2014
-
Messages postés
114
Date d'inscription
samedi 27 juillet 2013
Statut
Membre
Dernière intervention
7 mai 2014
-
Bonjour,
J'ai un problème sur des liens à paramétrer sur une page, voici le problème :
pour voir l'exemple voici le lien (couleurs liens)
http://www.blog-machine.fr/frame.htm

Dans un frameset j'ai un fichier menu qui appelle Montrepalette6

 onClick="MontrePalette6();"


J'ai une palette avec un id qui se montre et se cache avec la fonction MontrePalette et CachePalette et une propriété (je crois que c'est ça je ne suis pas un expert) css display : block et none. Voici la palette :


<TABLE id="palette6">
<TR>
<TD><a href="#" onClick="javascript:CachePalette1('none')" title="Fermer">
<img src="images/croix1-pix.gif" alt=""  class="boutoncroix"></a></TD>
</TR>
<TR>
<TD style="background-color:#000000; width:18px; height:9px;" onClick="CouleurDuFond6('#000000')"></TD>
<TD style="background-color:#333333; width:18px; height:9px;" onClick="CouleurDuFond6('#333333')"></TD>
<TD style="background-color:#666666; width:18px; height:9px;" onClick="CouleurDuFond6('#666666')"></TD>

et ainsi de suite...



Cette palette fait appel à une fonction CouleurDuFond6
qui elle, doit récupérer la valeur de la cellule, blanc ou noir ou que sais je #00ffff ect ect

or voici le code et ça ne marche pas

function CouleurDuFond6(this.value) {	
          var fram = parent.frames['droite'];
          fram.document.getElementsByTagName("a").style.color = value;
          document.getElementById('bgcol6').style.backgroundColor = value;
          var ZoneCouleur6 = value;
          alert(ZoneCouleur6);
	
}

je n'ai pas de message d'erreurs sous ie10 mais la palette n'apparait pas et je ne peut pas récupérer la valeur

que faire ???






3 réponses

Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
27 juin 2020
79
bonjour dans la fonction le this il faut le retirer et mettre seulement value

function CouleurDuFond6(value) {	
          var fram = parent.frames['droite'];
          fram.document.getElementsByTagName("a").style.color = value;
          document.getElementById('bgcol6').style.backgroundColor = value;
          var ZoneCouleur6 = value;
          alert(ZoneCouleur6);
	
}


--
Messages postés
114
Date d'inscription
samedi 27 juillet 2013
Statut
Membre
Dernière intervention
7 mai 2014

Bonjour,
Désolé il a fallut que je m'absente et je ne réponds qu'aujourd'hui.

Non, ça ne fonctionne pas, la palette apparait mais la valeur n'est pas assigné aux liens et donc pas réutilisable

cs
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
4
Bonjour, en fait il y a bien quelques soucis au niveau de la méthode de mise en couleur des liens.
voici une variante qui devrait corrigé le problème, enfin je crois (testé sur le site avec chrome et pas de problème). Par contre pour tester avec internet explorer c'est une autre affaire !

function CouleurDuFond6(value) {
	var fram = parent.frames['droite'];
	var _links = fram.document.getElementsByTagName("a");
	for(var i = 0; i < _links.length; i++) {
		_links[i].style.color = value;
	}
	// et affecte la couleur du lien au marqueur
	document.getElementById('bgcol6').style.backgroundColor = value;
} 


en fait, c'était au niveau du
fram.document.getElementsByTagName("a").style.color=value

En effet, la méthode getElementsByTagName retourne une collection d'entité et non une entité unique. Du coup affecter le style dessus ne peux pas fonctionner.
Ensuite j'ai sortie de la boucle de traitement l'affectation de la couleur au marqueur bgcol6 car il était inutile de l'exécuter autant de fois qu'il y a de liens dans la page.
Et j'ai supprimé l'alerte (a remettre pour tester).

A tester il va s'en dire avec ce brave internet explorer
Messages postés
114
Date d'inscription
samedi 27 juillet 2013
Statut
Membre
Dernière intervention
7 mai 2014

ne marche pas avec firefox en ligne
fonctionne en local avec firefox et chrome
fonctionne en ligne avec IE 10
à revoir sous peine d'être laxiste voir incompétent
Messages postés
114
Date d'inscription
samedi 27 juillet 2013
Statut
Membre
Dernière intervention
7 mai 2014

Mille 3fois mille excuses ça fontionne avec ff, ie et chrome en ligne ou en local, juste un léger bug qui venait de chez moi, vraiment désolé, merci
Messages postés
4200
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
13 juin 2020
30
pourquoi utiliser des frames ?

c'est totalement obsolete.

Internet Explorer, il faut juste maintenir pour IE8 (et encore). Laisse tomber les fixes IE7/6.

Il faut utiliser Ajax (jQuery si tu veux), et afficher les outils de configuration sur le blog lui même (en dynamique le statique c'est relou).

voila un exemple :
<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<style>
*,html{
  padding:0;
  margin:0;
  text-align:left;
  font-family:arial;
}

a,div,li,input,button,span,p,textarea,select,option,dl,dt,dd,td,th,tr{
  transition:.5s background,.5s background-color,.5s border-color,.5s outline-color,.5s color;
  -ms-transition:.5s background,.5s background-color,.5s border-color,.5s outline-color,.5s color;
  -moz-transition:.5s background,.5s background-color,.5s border-color,.5s outline-color,.5s color;
  -webkit-transition:.5s background,.5s background-color,.5s border-color,.5s outline-color,.5s color;
}

body{
  display:block;
  margin:0 auto;
  width:950px;
  background:#efefef;
}

a{text-decoration:none;}

img{border:none;}

#wrap{
  display:block;
  min-width:950px;
  background:#fff;
  box-shadow:0 0 6px #666;
  -moz-box-shadow:0 0 6px #666;
  -webkit-box-shadow:0 0 6px #666;
}

#header,#content,#footer{
  display:block;
  width:934px;
  min-width:934px;
  max-width:934px;
  overflow:none;
  padding:8px;
}
#header{
  background:#07c;
  color:#fff;
}
#header,#footer{
  height:64px;
  min-height:64px;
  line-height:32px;
}
#header h3{
  color:#fff;
}
#footer{
  background:#444;
  color:#999;
}
#footer, #footer *{
  text-align:center;
}
#content{
  background:#fff;
  color:#444;
  min-height:480px;
}
nav, nav a{
  display:inline-block;
  height:32px;
  line-height:32px;
}
nav a{
  color:#fff;
  background:inherit;
  padding:0 8px;
}
nav a:hover{
  background:#e70;
}
article{
  display:block;
  margin:8px;
}
article p{
  margin:8px;
  text-align:justify;
  overflow:none;
}
article p, article p *{
  font-family:roman;
}
article > a{
  color:#07c;
}
article > a:hover{
  color:#e70;
}
article p a{
  color:#579;
}
article p a:hover{
  color:#e70;
}
article > h2{
  background:#07c;
  color:#fff;
  padding:0 8px;
}

#editor{
  background:#fff;
  position:absolute;
  float:right;
  right:6px;
  top:6px;
  z-index:1000;
  width:320px;
  height:800px;
  overflow:none;
  border:3px solid #444;
  box-shadow:0 0 5px #444;
  -moz-box-shadow:0 0 5px #444;
  -webkit-box-shadow:0 0 5px #444;
}
#editor label,#editor p,#editor legend{
  font-family:verdana;
  font-size:10pt;
}
#editor h3{
  background:#444;
  color:#fff;
  height:24px;
  padding:2px 2px 2px 8px;
}
#editor_close{
  background:#444;
  color:#fff;
  width:20px;
  height:20px;
  line-height:20px;
  text-align:center;
  font-size:12px;
  display:inline-block;
  float:right;
  cursor:pointer;
}
#editor_close:hover{
  background:#c13;
  color:#fff;
}
#editor > div{
  background:#fff;
  display:block;
  position:relative;
  left:0;
  top:0;
  bottom:0;
  right:0;
  min-height:756px;
  margin:8px;
  overflow:auto;
}
#editor > div > fieldset{
  border:1px #ddd solid; 
  padding:4px;  
}
#editor > div > fieldset legend{
  font-weight:bold;
  font-size:11pt;
  color:#444;
  padding:0 4px 0 4px;
}
#editor > div > fieldset p{
  position:relative;
  height:21px;
  line-height:21px;
  vertical-align:middle;
}
#editor label{
  display:inline-block;
  width:45%;
  float:left;
}
#editor input{
  display:inline-block;
  float:right;
  font-family:monospace;
  font-size:9pt;
  width:50%;
  margin:0 4px 4px 4px;
}
</style>

<script>
$(document).ready(function(){
  $('input[reactive="1"]').each(function(index){
    var ocl  = this;
    var obj  = $(this).attr('obj');
    var prop = $(this).attr('prop');
    var val  = '';
    $(ocl).val( $(obj).css(prop) );
    
    $(this).on('keyup', function(){
      var obj = $(this).attr('obj');
      var prop= $(this).attr('prop');
      $(obj).css(prop, $(this).val() );
    });
  });
});
</script>
</head>
<body>
<div id="wrap">
  <header id="header">
    <h3 id="logo">MySite</h3>
    <nav>
      <a href="#">menu</a>
      <a href="#">menu</a>
      <a href="#">menu</a>
      <a href="#">menu</a>
    </nav>
  </header>
  
  <section id="content">
    <article>
      <h2>Titre H2</h2>
      <p>Texte bla bla bla <a href="#">Lien de texte</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a href="#">Liens d'article</a>
    </article>
    <article>
      <h2>Titre H2</h2>
      <p>Texte bla bla bla <a href="#">Lien de texte</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a href="#">Liens d'article</a>
    </article>
    <article>
      <h2>Titre H2</h2>
      <p>Texte bla bla bla <a href="#">Lien de texte</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a href="#">Liens d'article</a>
    </article>
  </section>
  
  <footer id="footer">
    <h4>Copyright © 2013 - f0xi</h4>
  </footer>
</div>

  <aside id="editor">
    <h3>editor <span id="editor_close">X</span></h3>
    <div>
      <fieldset>
        <legend>Corps</legend>
      </fieldset>
      
      <fieldset>
        <legend>Entête</legend>
        <p><label>fond d'entête</label><input type="text" id="header_bkg" reactive="1" obj="#header" prop="background-color" value=""/></p>
        <p><label>couleur du titre</label><input type="text" id="header_title_col" reactive="1" obj="#header h3" prop="color" value=""/></p>
        <p><label>police du titre</label><input type="text" id="header_title_font" reactive="1" obj="#header h3" prop="font-family" value=""/></p>
        <p><label>taille du titre</label><input type="text" id="header_title_size" reactive="1" obj="#header h3" prop="font-size" value=""/></p>
      </fieldset>
      
      <fieldset>
        <legend>Articles</legend>
        <p><label>fond du titre</label><input type="text" id="content_title_bkg" reactive="1" obj="#content article > h2" prop="background-color" value=""/></p>
        <p><label>couleur du titre</label><input type="text" id="content_title_col" reactive="1" obj="#content article > h2" prop="color" value=""/></p>
        <p><label>couleur de liens</label><input type="text" id="content_text_col" reactive="1" obj="#content article > a" prop="color" value=""/></p>
      </fieldset>
      
      <fieldset>
        <legend>Paragraphes</legend>
        <p><label>couleur du texte</label><input type="text" id="content_text_col" reactive="1" obj="#content article p" prop="color" value=""/></p>
        <p><label>police du texte</label><input type="text" id="content_text_font" reactive="1" obj="#content article p" prop="font-family" value=""/></p>
        <p><label>style du texte</label><input type="text" id="content_text_style" reactive="1" obj="#content article p" prop="font-style" value=""/></p>
        <p><label>couleur de liens</label><input type="text" id="content_text_col" reactive="1" obj="#content article p a" prop="color" value=""/></p>
      </fieldset>
      
      <fieldset>
        <legend>Pied</legend>
        <p><label>fond du pied</label><input type="text" id="footer_bkg" reactive="1" obj="#footer" prop="background-color" value=""/></p>
        <p><label>couleur du texte</label><input type="text" id="footer_col" reactive="1" obj="#footer" prop="color" value=""/></p>
      </fieldset>
    </div>
  </aside>

</body>
</html>

Messages postés
114
Date d'inscription
samedi 27 juillet 2013
Statut
Membre
Dernière intervention
7 mai 2014

c'est bien beau mais ça ne sert à rien