28221 sujets

CSS et mise en forme, CSS3

[Résolu] Image décorative dynamique

Bonsoir,

dans la mise en page de mon site, j'aurrais besoin d'intérgé une image décorative, mais dynamiquement. Celle-ci sera différente selon la rubrique dans laquelle se trouve l'utilisateur.

La technique la plus simple serait d'insérer une balise <img> comme suit :
<img src="..." width="..." height="..." alt="" />
mais ceci me pose un problème. J'aimerai, pour une meilleure lisibilité, que cette image ne s'affiche pas quand l'utilisateur désactive la CSS.. Smiley rolleyes

J'ai donc pensé mettre une simple <div class="..."> aggrémentée des plusieurs class :
div.banner_01 { background: url(banner_01.png); }
div.banner_02 { background: url(banner_02.png); }
div.banner_03 { background: url(banner_03.png); }
etc...
mais bon, ça ne me convient pas totalement. Smiley rolleyes Smiley langue

Et puis j'ai pensé à la fonction (!?) CSS : attr(). Je me demandais s'il n'été pas possible de faire quelque chose dans se goût là :
<div id="banner" class="banner_01"></div>

div#banner {
 background: url(elements/[b]attr(class)[/b].jpg);
}
(ceci ne fonctionne pas, et j'ai bien evidement volontairement omis, dans mes exemples, de définir des dimentions aux <div>)

Que pensez-vous de mon problème, avez-vous des idées, des suggestions ?

Antoine.
Modifié le 30 Dec 2004 - 14:17
En attribuant un "id" pour le <body> de chaque rubrique, tu pourras tout contrôler via CSS.
Comme cet évènement survient normalement une seule fois dans une page, je suggère un "id" pour le <div> contenant la bannière.

<body id="home">
 <div id="imgdeco"></div>
</body>

<body id="sitemap">
 <div id="imgdeco"></div>
</body>

<body id="gallery">
 <div id="imgdeco"></div>
</body>

<body id="contact">
 <div id="imgdeco"></div>
</body>



body#home #imgdeco { 
   background: transparent url("decohome.gif") top left no-repeat; 
}

body#sitemap #imgdeco { 
   background: transparent url("decositemap.gif") top left no-repeat; 
}

body#gallery #imgdeco { 
   background: transparent url("decogallery.gif") top left no-repeat; 
}

body#contact #imgdeco { 
   background: transparent url("decocontact.gif") top left no-repeat; 
}

J'espère que ça aide ! Smiley cligne
Stephan a écrit :
En attribuant un "id" pour le <body> de chaque rubrique, tu pourras tout contrôler via CSS.
Comme cet évènement survient normalement une seule fois dans une page, je suggère un "id" pour le <div> contenant la bannière.

<body id="home">
 <div id="imgdeco"></div>
</body>

<body id="sitemap">
 <div id="imgdeco"></div>
</body>

<body id="gallery">
 <div id="imgdeco"></div>
</body>

<body id="contact">
 <div id="imgdeco"></div>
</body>



body#home #imgdeco { 
   background: transparent url("decohome.gif") top left no-repeat; 
}

body#sitemap #imgdeco { 
   background: transparent url("decositemap.gif") top left no-repeat; 
}

body#gallery #imgdeco { 
   background: transparent url("decogallery.gif") top left no-repeat; 
}

body#contact #imgdeco { 
   background: transparent url("decocontact.gif") top left no-repeat; 
}

J'espère que ça aide ! Smiley cligne
Hum, ce que tu me donnes là est sensiblement la même chose que mon exemple. Smiley cligne 

<div class="banner_01"></div>

div.banner_01 { background: url(banner_01.png); }
div.banner_02 { background: url(banner_02.png); }
div.banner_03 { background: url(banner_03.png); }
Ce que j'aurrai aimé, c'est pouvoir éviter d'avoir autant de lignes que de banner_0x.png pour une utilisation plus souple (pas besoin d'aller modifier la CSS quand j'ajoute/modifie l'image d'une rubrique) et afin de réduire la taille de la CSS. Smiley smile
En dehors de ta méthode précitée (qui personnellement me conviendrait tout à fait Smiley cligne ), je ne vois comme solution que la génération de fichier CSS à la volée avec ton langage dynamique (PHP ou autre).

Mais bon, ça fait un peu artillerie lourde pour pas grand chose, non ?
Je vais donc faire à base de class, il n'y a pas grand chose d'autre à faire de toute façon. Merci de votre aide. Smiley cligne
Sujet clos
Aller à