Comment afficher des images à 100% en changeant de thèmes?

Bonjour !

J'ai un soucis avec ma page et pour mieux comprendre le problème je vous invite a aller sur http://kunpen75.free.fr/a2/

Une fois sur le site un clic sur le bouton bleu puis le violet pour changer de thèmes.
Je suis en résolution 1680x1050 donc la bannière image devrait s'étirer pour remplir tout l'espace vide, mais c'est pas le cas...

Pour changer de thème j'utilise le script "Style Sheet Switcher"
(http://www.dynamicdrive.com/dynamici...etswitcher.htm)
qui va appeler les fichiers CSS quand je vais vais cliquer sur un lien du site

Hors avec l'appel des CSS il n'est pas possible d'afficher background:url en largeur 100%.
Détails des essais CSS ici:
http://www.developpez.net/forums/d67...s/#post3983080

Donc j'ai pensé a une méthode javascript pour appeler la bannière image qui correspondrais avec le thème choisi par l'utilisateur.

Avec une commande du type onclic ça dois être facilement réalisable mais le problème est que quand l'utilisateur va revenir sur le site,
il doit retrouver le dernière thème qu'il avait sectionné auparavant et
de ce fait retrouver la bannière image qui correspond au reste du thème gérer par le script "Style Sheet Switcher".

Et tant qu'a faire j'aimerais savoir si il est possible d'appeler un fichier
flash (lecteur de musique) et un autre javascript (Pétales de cerisier qui tombe sur l'écran) dans les même condition que la bannière.

Sachant que copier coller les script et ayant de vagues notion de javascript merci de proposer vos solutions.

Plus de détails ici:
- Entête de la page HTML

Code:

---

1 2 3

<link rel="stylesheet" type="text/css" href="default.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="blue.css" />

---

- Liens HTML

Code:

---

1 2 3

<a href="javascript:chooseStyle('default', 60)" checked="checked">Thème par défaut</a> <a href="javascript:chooseStyle('blue-theme', 60)"> Thème bleu</a>

---

- Emplacement bannière

Code:

---

1 2	<div id="banner" ><img src="transparent.png" alt="" /></div>

---

- Dans default.css

Code:

---

1 2 3 4 5

div#banner { background:url(bannertree.jpg) no-repeat; border:0 }

---

- Dans blue.css

Code:

---

1 2 3 4 5

div#banner { background:url(bannerblue.jpg) no-repeat; border:0 }

---

Donc comment étirer en largeur l'image qui fait office de bannière sachant que le script de changement de thème css garde en mémoire le dernier thème sélectionné par le biais de cookie.

Pour la partie html, tu mets simplement ceci (sans le div autour) :

Code:

---

<img id="banner" src="bannertree.jpg" alt="" />

---

Et dans ta feuille de style default.css :

Code:

---

1 2 3 4 5

#banner { display: block; width: 100%; border: 0; }

---

Tu peux effacer les correspondances du div banner dans tes autres feuilles de style étant donné que le changement va s'opérer avec du JavaScript.
Dans ton fichier styleswitch.js (celui que tu as téléchargé), localise cette ligne :

Code:

---

function setStylesheet(title, randomize) {

---

et colle le bout de code ci-dessous juste en-dessous :

Code:

---

1 2 3 4 5

var banner = document.getElementById("banner"); if (title == "default") banner.src = "bannertree.jpg"; else if (title == "blue-theme") banner.src = "bannerblue.jpg";

---

title représente le noms des thème sélectionné et banner.src, la source de ton image.
Tu n'as normalement plus qu'à rajouter les thèmes et les sources y correspondant.

Merci beaucoup pour ton temps desert ça fonctionne presque de presque !

Le problème c'est qu'il ne garde plus en mémoire le dernier thème sélectionné...

Par exemple tu va sur blue-theme et tu rafraichi la page avec F5, il va retourner au thème par défaut.

Nouvelle page avec la modif > http://kunpen75.free.fr/a2/indexb.html
Ancienne page sans la modif > http://kunpen75.free.fr/a2/

styleswichtb.js

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function setStylesheet(title, randomize) { //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled var banner = document.getElementById("banner"); if (title == "default") banner.src = "bannertree.jpg"; else if (title == "blue-theme") banner.src = "bannerblue.jpg"; var i, cacheobj, altsheets=[""] for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) { if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title cacheobj.disabled = true altsheets.push(cacheobj) //store reference to alt stylesheets inside array if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter cacheobj.disabled = false //enable chosen style sheet } }

---

Et si je veux rajouter d'autres thèmes je fait comme ce ci par exemple?

Code:

---

1 2 3 4 5 6 7

if (title == "default") banner.src = "bannertree.jpg"; else if (title == "blue-theme") banner.src = "bannerblue.jpg"; (title == "silver-theme") banner.src = "bannersilver.jpg";

---

De nouvelles idées?