Sujet Précédent Sujet Suivant

Liens paramétrables

Résolu
blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014 - 28 août 2013 à 18:38
blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014 - 19 oct. 2013 à 17:33
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

Réponse 1 / 3
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
28 août 2013 à 23:45
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);
	
}


--
0
blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
31 août 2013 à 21:23
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
0
Réponse 2 / 3
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
12 sept. 2013 à 15:36
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
0
blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
11 oct. 2013 à 14:59
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
0
blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
19 oct. 2013 à 17:33
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
0
Réponse 3 / 3
f0xi Messages postés 4205 Date d'inscription samedi 16 octobre 2004 Statut Modérateur Dernière intervention 12 mars 2022 35
20 sept. 2013 à 17:44
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>
0
blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
11 oct. 2013 à 15:00
c'est bien beau mais ça ne sert à rien
0

Discussions similaires

appeler une fonction php dans un lien html
cs_gaillardo -
gaillardo -

5 réponses
créer des lien en ajax
cs_baloc -
baloc -

12 réponses
mettre une variable dans un lien
David78390 -
Hermios -

5 réponses
Lien automatique
jojo545 -
jojo545 -

2 réponses
Desactiver des liens hypertexte en cliquant sur un lien
merlin_88 -
Neoziro -

2 réponses
Rejoignez-nous