changer les couleurs d'adsense avec du CSS: possible ou pas?

[MV]

Bonjour,

Je suis en train de développer un nouveau site pour lequel je souhaite que les visiteurs aient la possiblité de choisir l'ambiance via des feuilles de style CSS.

Par contre, je ne sais pas s'il est possible de spécifier des styles d'annonces Adsense spécifiques aux ambiances choisies? Si oui comment faire?
Sinon, il faut passer par un seul type d'annonce, quelque soit l'ambiance choisit?

Merci d'avance.

[HawkEye]

Je suppose que le chargement de l'une ou l'autre css dépendra d'une variable quelquepart ?

>> script A si ambiance A
>> script B si ambiance B

... chaque script ayant un code couleur adéquat.

[Ron56]

Tu fait avec les includes

[oli004]

effectivement, il n'y a aucun probleme. A partir du moment ou tu as defini un ensemble de couleurs pour un theme donné, il te suffit de passer tout ça en variable et le tour est joué.

[MV]

Le principe des feuilles de styles étant de ne pas modifier le code source du contenu, comment faire pour changer le code couleur des annonces étant donné qu'il est spécifié non pas par une commande css mais par le code google?
Avec du php?
En fait si vous aviez des exemples à me fournir ça m'arrangerait...
C'est pas que je comprends lentement, mais il faut m'expliquer longtemps...

Merci.

[HawkEye]

ok,

Je suppose que le fait de savoir si tu charges le CSS #1, #2 ou #3 ou #1217 est stocké quelquepart (cookie?), et fournit à un moment ou un autre à ton code, afin d'alimenter la ligne...

Code: Tout sélectionner

<link rel="stylesheet" href="style_(VAR).css" type="text/css" />


...avec cette fameuse valeur.

Ce faisant, tu as différentes façons de faire les choses pour ton (tes) codes adsense, et la solution la plus "simple" à mon sens est de faire quelquechose du genre:

(en imaginant 3 styles)

adsense_skyscraper_1.php
adsense_skyscraper_2.php
adsense_skyscraper_3.php
adsense_banner_1.php
adsense_banner_2.php
adsense_banner_3.php
adsense_thematics_1.php
adsense_thematics_2.php
adsense_thematics_3.php

etc...

(chacun avec leur design adapté au layout 1, ou 2, ou 3...)

et tu les appelles dans le code, de la même façon que le CSS:

Code: Tout sélectionner

include('adsense_thematics_'.$VAR.'.php');


Qu'en penses-tu ?

(y'a plus propre, mais c'est plus compliqué...)

[Ron56]

Pourquoi pas directement integrer les couleur correspondante dans le code via des variables php ?

[MV]

Pourquoi pas directement integrer les couleur correspondante dans le code via des variables php ?

Parce que dans le programme Adsense, il est spécifié qu'il ne faut pas changer le code de Google...

HawkEye_TpfH, je pensais utiliser cette technique http://batraciens.net/css-astuces/skins-changement.htm . Je vais me documenter sur ta proposition, sachant que je connais pas le php ni les includes, mais un petit tuto doit bien exister.

Merci.

[MV]

Heu,

Le probleme c'est que je dois pour le moment utiiser un serveur qui n'accepte pas le php...

Est-il possible de stocker le fichier source php sur un autre serveur que celui qui stockera le site?

Ou est-il possible de faire le même genre de manip avec du JS?
Si oui quelqu'un aurait le code?
Merci.

[MV]

Après réfexion, je crois avoir trouvé une solution:
je fais le changement de style grâce à un switcher en JS, et dans les différentes feuilles de style, j'attribue display:none pour les div contenant le code adsense dont les couleurs ne correspondent pas à la charte graphique.

A votre avis c'est correct?

[petit-ourson]

Après réfexion, je crois avoir trouvé une solution:
je fais le changement de style grâce à un switcher en JS, et dans les différentes feuilles de style, j'attribue display:none pour les div contenant le code adsense dont les couleurs ne correspondent pas à la charte graphique.

A votre avis c'est correct?

Non car avec ce principe tu vas afficher des bandeaux qui ne seront pas vus par les visiteurs mais qui seront comptabilisé par google. Donc ton nombre d'affichages va augmenter superficiellement.

Pourquoi pas directement integrer les couleur correspondante dans le code via des variables php ?

Parce que dans le programme Adsense, il est spécifié qu'il ne faut pas changer le code de Google...

Et il va le savoir comment google que tu as mis une variable php plutôt qu'un copier/coller ?

[MV]

Après réfexion, je crois avoir trouvé une solution:
je fais le changement de style grâce à un switcher en JS, et dans les différentes feuilles de style, j'attribue display:none pour les div contenant le code adsense dont les couleurs ne correspondent pas à la charte graphique.

A votre avis c'est correct?

Non car avec ce principe tu vas afficher des bandeaux qui ne seront pas vus par les visiteurs mais qui seront comptabilisé par google. Donc ton nombre d'affichages va augmenter superficiellement.

Pourquoi pas directement integrer les couleur correspondante dans le code via des variables php ?

Parce que dans le programme Adsense, il est spécifié qu'il ne faut pas changer le code de Google...

Et il va le savoir comment google que tu as mis une variable php plutôt qu'un copier/coller ?

Tout d'abord super ton site!!!! Très joli design, et en plus Bouba c'était le dessin animé que je suivais le plus dans ma jeunesse!

Sinon, je ne peux pas mettre de php (en tout cas pour le moment, si le site tourne bien, je prendrais par la suite un hébergement payant permettant entre autre le php).

La solution est donc soit via javascript, soit vias CSS, sachant que j'utilise un switcher en JS.

Voici le code du JS:

Code: Tout sélectionner

function change_color(form)
{
new_color = form.color.options[form.color.selectedIndex].value;
setActiveStyleSheet(new_color);
return false;
}


function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}
function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

et voici le code HTML appelant le JS (liste déroulante)

Code: Tout sélectionner

<div id="skin">
  <form >
    <select name="color" onChange="change_color(this.form)" >
     <option value="vert" selected> STYLE</option>   
     <option value="vert"  >Vert</option>
      <option value="rouge" >Rouge</option>
    </select>
  </form>
</div>


avec dans le head

Code: Tout sélectionner

<link rel="stylesheet" type="text/css" href="./page1.css"  title="vert">
<link rel="alternate stylesheet" type="text/css" href="./page1.css" title="vert">
<link rel="alternate stylesheet" type="text/css" href="./page3.css" title="rouge">
<script type="text/javascript" src="./styleswitcher[1].js"></script>


L'ideal serait d'ajouter à la liste déoulante une action (simultanée avec le changement de CSS) qui déterminerait quel contenu la DIV Adsense doit afficher.
J'ai trouvé un script pour remplir une DIV suite à un click sur bouton mais je ne sais pas comment associer les deux ni si c'est possible.

Voici le script permettant de remplir une DIV:

Code: Tout sélectionner

// + --------------------------------------------------------------------------------------
// + XHRConnection
// + V1.3
// + Thanh Nguyen, http://www.sutekidane.net
// + 20.10.2005
// + http://creativecommons.org/licenses/by-nc-sa/2.0/fr/deed.fr
// + --------------------------------------------------------------------------------------
function XHRConnection() {
   
   // + ----------------------------------------------------------------------------------
   var conn = false;
   var debug = false;
   var datas = new String();
   var areaId = new String();
   // Objet XML
   var xmlObj;
   // Type de comportement au chargement du XML
   var xmlLoad;
   
   // + ----------------------------------------------------------------------------------
   try {
      conn = new XMLHttpRequest();      
   }
   catch (error) {
      if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew XMLHttpRequest()\n\n' + error); }
      try {
         conn = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (error) {
         if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew ActiveXObject("Microsoft.XMLHTTP")\n\n' + error); }
         try {
            conn = new ActiveXObject("Msxml2.XMLHTTP");
         }
         catch (error) {
            if (debug) { alert('Erreur lors de la tentative de création de l\'objet \nnew ActiveXObject("Msxml2.XMLHTTP")\n\n' + error); }
            conn = false;
         }
      }
   }

   // + ----------------------------------------------------------------------------------
   // + setDebugOff
   // + Désactive l'affichage des exceptions
   // + ----------------------------------------------------------------------------------
   this.setDebugOff = function() {
      debug = false;
   };

   // + ----------------------------------------------------------------------------------
   // + setDebugOn
   // + Active l'affichage des exceptions
   // + ----------------------------------------------------------------------------------
   this.setDebugOn = function() {
      debug = true;
   };
   
   // + ----------------------------------------------------------------------------------
   // + resetData
   // + Permet de vider la pile des données
   // + ----------------------------------------------------------------------------------
   this.resetData = function() {
      datas = new String();
      datas = '';
   };
   
   // + ----------------------------------------------------------------------------------
   // + appendData
   // + Permet d'empiler des données afin de les envoyer
   // + ----------------------------------------------------------------------------------
   this.appendData = function(pfield, pvalue) {
      datas += (datas.length == 0) ? pfield+ "=" + escape(pvalue) : "&" + pfield + "=" + escape(pvalue);
   };
   
   // + ----------------------------------------------------------------------------------
   // + setRefreshArea
   // + Indique quel elment identifié par id est valoris lorsque l'objet XHR reoit une réponse
   // + ----------------------------------------------------------------------------------
   this.setRefreshArea = function(id) {
      areaId = id;
   };
   
   // + ----------------------------------------------------------------------------------
   // + createXMLObject
   // + Méthode permettant de créer un objet DOM, retourne la réfrence
   // + Inspiré de: http://www.quirksmode.org/dom/importxml.html
   // + ----------------------------------------------------------------------------------
   this.createXMLObject = function() {
      try {
             xmlDoc = document.implementation.createDocument("", "", null);
            xmlLoad = 'onload';
      }
      catch (error) {
         try {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlLoad = 'onreadystatechange ';
         }
         catch (error) {
            if (debug) { alert('Erreur lors de la tentative de création de l\'objet XML\n\n'); }
            return false;
         }
      }
      return xmlDoc;
   }
   
   // + ----------------------------------------------------------------------------------
   // + Permet de définir l'objet XML qui doit être valorisé lorsque l'objet XHR reoit une réponse
   // + ----------------------------------------------------------------------------------
   this.setXMLObject = function(obj) {
      if (obj == undefined) {
            if (debug) { alert('Paramètre manquant lors de l\'appel de la méthode setXMLObject'); }
            return false;
      }
      try {
         //xmlObj = this.createXMLObject();
         xmlObj = obj;
      }
      catch (error) {
            if (debug) { alert('Erreur lors de l\'affectation de l\'objet XML dans la méthode setXMLObject'); }
      }
   }
   
   // + ----------------------------------------------------------------------------------
   // + loadXML
   // + Charge un fichier XML
   // + Entrées
   // +    xml         String      Le fichier XML à charger
   // + ----------------------------------------------------------------------------------
   this.loadXML = function(xml, callBack) {
      if (!conn) return false;
      // Chargement pour alimenter un objet DOM
      if (xmlObj && xml) {
         if (typeof callBack == "function") {
            if (xmlLoad == 'onload') {
               xmlObj.onload = function() {
                  callBack(xmlObj);
               }
            }
            else {
               xmlObj.onreadystatechange = function() {
                  if (xmlObj.readyState == 4) callBack(xmlObj)
               }
            }
         }
         xmlObj.load(xml);
         return;
      }      
   }

   // + ----------------------------------------------------------------------------------
   // + sendAndLoad
   // + Connexion à la page désirée avec envoie des données, puis mise en attente de la réponse
   // + Entrées
   // +    Url         String      L'url de la page à laquelle l'objet doit se connecter
   // +    httpMode      String      La méthode de communication HTTP : GET, HEAD ou POST
   // +    callBack      Objet      Le nom de la fonction de callback
   // + ----------------------------------------------------------------------------------
   this.sendAndLoad = function(Url, httpMode, callBack) {
      httpMode = httpMode.toUpperCase();
      conn.onreadystatechange = function() {
         if (conn.readyState == 4 && conn.status == 200) {
            // Si une fonction de callBack a été définie
            if (typeof callBack == "function") {
               callBack(conn);
               return;
            }
            // Si une zone destinée à récupérer le résultat a été définie
            else if (areaId.length > 0){
               try {
                  document.getElementById(areaId).innerHTML = conn.responseText;
               }
               catch(error) {
                  if (debug) { alert('Echec, ' + areaId + ' n\'est pas un objet valide'); }
               }
               return;
            }
         }
      };
      switch(httpMode) {
         case "GET":
            try {
               Url = (datas.length > 0) ? Url + "?" + datas : Url;
               conn.open("GET", Url);
               conn.send(null);
            }
            catch(error) {
               if (debug) { alert('Echec lors de la transaction avec ' + Url + ' via la méthode GET'); }
               return false;
            }
         break;
         case "POST":
            try {
               conn.open("POST", Url);
               conn.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
               conn.send(datas);
            }
            catch(error) {
               if (debug) { alert('Echec lors de la transaction avec ' + Url + ' via la mthode POST'); }
               return false;
            }
         break;
         default :
            return false;
         break;
      }
      return true;
   };
   return this;
}


la fonction qui charge c'est :

Code: Tout sélectionner

function chargeFichier() {
   // Création de l'objet
   var XHR = new XHRConnection();      
   // Zone à remplir
   XHR.setRefreshArea('zoneCible');
   // Chargement de la page
   // Natures des paramètres         
   //    + string, fichier à charger
   //    + string, GET ou POST
   //    + ref, nom de la fonction de callBack
   XHR.sendAndLoad("fichier.txt", "GET");
   return true;
}

et le code à mettre sur le html:

Code: Tout sélectionner

<script type="text/javascript" src="XHRConnection.js"></script>
....
<div id="zoneCible"></div>


Pour ceux qui veulent voici l'adresse du site proposant ce script:
http://xhrconnection.sutekidane.net/exemples/charger-un-fichier-dans-une-zone-de-la-page/

Ne connaissant pas le JS, je ne sais pas si ce script fonctionne, s'il est simplifiable et s'il est possible de le combiner avec le switcher (qui lui fonctionne sans problème).

Merci pour vos coups de main!

[MV]

Un petit up au cas ou...