Comment remplacer la balise img src width à 100% en CSS? [Fait]

**kunpen** · 27/01/2009, 04h22

Bonjour à toutes et à tous,

Je cherche à changer de thèmes (images, couleurs, dispositions,etc) pour mon site avec du CSS.

Hors, je n'arrive pas à remplacer l'image (960x159) qui fait office de bannière
que j'ai mis en largeur à 100% pour gagner en poid et pour qu'elle s'adapte automatiquement à la résolution du navigateur/écran.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="theme_default.jpg" alt="banner" width="100%" height="159" />

J'ai utilisé en CSS (appelé) 2 exemples pour aller d'un thème à l'autre:
default.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#banner {
background:url(bannerdefault.jpg) no-repeat;
border:0
}

blue.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#banner {
background:url(bannerblue.jpg) no-repeat;
border:0
}

J'ai utilisé en HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="nature-theme" href="nature.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="silver-theme" href="silver.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="space-theme" href="space.css" />
<title>Document sans nom</title>
<script type="text/javascript" src="styleswitch.js"></script>
</head>
 
<body>
<a href="javascript:chooseStyle('default', 60)" checked="checked" >thème par default </a>
<a href="javascript:chooseStyle('nature-theme', 60)" >thème nature</a>
<a href="javascript:chooseStyle('silver-theme', 60)" >thème silver</a>
<a href="javascript:chooseStyle('blue-theme', 60)" >thème blue</a>
<a href="javascript:chooseStyle('space-theme', 60)" >thème space</a>
 
Ne fonctionne pas
<img src="theme_default.jpg"     id="banner"      alt="banner" width="100%" height="159" border="0" />
Ne fonctionne pas
<span id="banner"><img src="theme_default.jpg"  alt="banner" width="100%" height="159" border="0" /></span>
Ne fonctionne pas
<div id="banner"><img src="theme_default.jpg" alt="banner" width="100%" height="159" border="0" /></div>
 
</body>
</html>

Pour le script changeur de thèmes, vous pouvez le trouver ici:
http://www.dynamicdrive.com/dynamici...etswitcher.htm

J'ai essayé de nombreuse combinaisons en CSS comme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
Ne fonctionne pas
#banner {
background:url(bannerblue.jpg) no-repeat;
position:absolute;
width:100%;
height:159px;
border:0
}
 
Ne fonctionne pas
div#banner {
background:url(bannerblue.jpg) no-repeat;
position:absolute;
width:auto;
height:159px;
border:0
}
 
Ne fonctionne pas
div#banner {
background:url(bannerblue.jpg) no-repeat;
border:0
}
 
ETC....

Bref si il y a une technique qui pourrais afficher mes bannières images
toujours à la même hauteur et une largeur qui s'auto adapte à la largeur de la résolution via CSS ou autres techniques ce serais super

Ici les thèmes changent facilement de bannière image, le seul problème c'est que j'ai du faire plusieurs images en fonction de la résolution sans compter le script qui redirige l'utilisateur vers sa résolution, trop compliqué donc j'ai abandonné pour du tout en 1.
Exemple ici: http://kunpen75.free.fr/aa/fr/index3c.php

Nouvelle version tout en un sur lequel je travail actuellement ou se situe mon problème actuel...
Exemple ici: http://kunpen75.free.fr/a2

De plus j'aimerais faire un effet de fondu (fading) entre 2 thèmes
Appeler un script java pour faire tomber de la neige sur un des thèmes
Appeler un script pour lancer un lecteur de musique en flash pour chaque thèmes
mais bon la c'est une autre histoire mais si l'un de vous connais la méthode pour faire le tout avec un ou des script léger ou du CSS ce serais magnifique

(j'ai déjà le script pour la neige que je vais remplacer par des pétales de cerisier, des lecteur de musique en flash à foison, effet de fondu ou autre léger j'ai pas encore trouvé...)

**lvr** · 27/01/2009, 17h51

Petite suggestion d'un css-noob: Est-ce que la propriété width ne s'applique pas uniquement au élément qui ont une disposition de type "block" alors que les ton span et ton image ont une disposition de type "inline" ? Je testerais d'ajouter mon #banner un "display: block;"

**kunpen** · 27/01/2009, 19h54

Merci de ton initiative Ivr !

J'avais déja tenté rapidement avec les block sans succès mais après ton post j'ai réessayé de différente manière avec block et je suis en train de me renseigner sur le net pour mieux connaitre son fonctionnement et ses options.

Grâce à ta suggestion l'image change suivant le thème mais le problème est toujours là, la bannière image reste toujours à sa taille d'origine au lieu de s'étendre automatiquement en largeur comme le ferais le width à 100% en HTML...

Voici mon code actuel

default.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
div#banner {
background:url(bannerdefault.jpg) no-repeat;
display: block;
border:0
}

blue.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
div#banner {
background:url(bannerblue.jpg) no-repeat;
display: block;
border:0
}

index.HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="nature-theme" href="nature.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="silver-theme" href="silver.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="space-theme" href="space.css" />
<title>Document sans nom</title>
<script type="text/javascript" src="styleswitch.js"></script>
</head>
 
<body>
<a href="javascript:chooseStyle('default', 60)" checked="checked" >thème par default </a>
<a href="javascript:chooseStyle('nature-theme', 60)" >thème nature</a>
<a href="javascript:chooseStyle('silver-theme', 60)" >thème silver</a>
<a href="javascript:chooseStyle('blue-theme', 60)" >thème blue</a>
<a href="javascript:chooseStyle('space-theme', 60)" >thème space</a>
 
<div id="banner"><img src="imagetransparente.png" alt="banner" width="100%" height="159" border="0" /></div>
 
</body>
</html>

Des solutions SVP?

**GihefBey** · 28/01/2009, 00h18

Bonjour,

Pour faire ça tu ne peux pas utiliser l'image en background.
Par contre, sur une image c'est possible.

Par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="banner">
  <img src="banniere.png" alt="bannière" />
</div>

avec

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#banner img{ 
  display : block;
  width : 100%;
  }

-

**kunpen** · 28/01/2009, 17h44

Heu...Tu peu développer GihefBey ?
Sans 2ème image pour passer d'une bannière à l'autre je fait comment du coup?

**lvr** · 28/01/2009, 18h17

Tu as un background coloré qui change en fonction du thème auquel tu superpose l'image "the_default.jpg" qui, elle, reste la même quel que soit le thème ? C'est ça que tu veux faire ?

**kunpen** · 28/01/2009, 21h47

Je viens de modifier la page sur http://kunpen75.free.fr/a2/

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 comme ci:
- Entête de la page HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

- Dans default.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
div#banner {
background:url(bannertree.jpg) no-repeat;
border:0
}

- Dans blue.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**desert** · 29/01/2009, 09h44

Regardes le post de GihefBey. Il a raison, tu ne peux étirer ton image qu'en utilisant une balise img. Hors, dans ton code, tu utilises un div.
Tu dois donc juste spécifier la source de ton image (bannertree.jpg) et sa longueur (width:100%) et enlever dans ton css tout ceux qui est en rapport avec le div "banner".

**kunpen** · 29/01/2009, 19h42

Oui même un fond entier peut être étiré,
exemple ici http://www.cssplay.co.uk/layouts/background.html

Mais je ne vos pas comment passer d'une banière à l'autre sans utiliser les
background:url d'un css à l'autre si mon image est toujours la même dans
img src car je ne recharger pas toute la page entière.

Et vu que le script de changement de thèmes garde en mémoire le dernier thème utilisé en passant par les css et cookies, si j'opte pour la solution d'utiliser un autre java script (c'est lourd) pour changer d'image onclic,
et quand l'utilisateur reviendra à nouveau il verra la première bannière de base et non celle qu'il aura sectionné avec le thème correspondant.

Donc visiblement je dois absolument passer par les fichiers CSS pour que les thèmes correspondent à la bannière qui va avec et le tout à width 100% étirable, mais comment?
Ou alors je n'ai pas bien compris la technique de GihefBey.

J'ai même essayé comme ce ci sans succès
(les 2 bannières s'affichent l'une au dessu de l'autre
et je ne pense pas que ce soit léger à afficher)

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="banner">
 <img src="bannertree.jpg" alt="bannière" />
  <img src="bannerblue.jpg" alt="bannière" />
</div>

default.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#banner img{ 
display: block;
width:100%;
height:159px;
border:0;
}

blue.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#banner img{ 
display: block;
width:100%;
height:159px;
border:0;
}

Je suis toujours coincé

**desert** · 29/01/2009, 20h36

En JavaScript, cela doit être facilement faisable. Il suffirait simplement de récupérer la source de ta seule balise img et de la modifier à chaque changement ou rafraîchissement de page en fonction du thème choisi. Mais dans ce cas-ci, on n'est plus dans la bonne section du forum.
Ou bien, tu répètes l'image horizontalement.

**lvr** · 29/01/2009, 21h29

Plusieurs remarques:

1) l'exemple que tu donnes (avec le rabbit) n'utilise absolument pas la propriété "background" !!!! Regarde le code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<style type="text/css">
#background{position:absolute; z-index:1; width:100%; height:100%;}
</style>
<div>
<img id="background" src="rabbit.jpg" alt="" title="" /> 
</div>

2) Le code de ton précédent post ne peut pas fonctionner car tes deux disent la même chose: "toute image dans un élément d'id='banner' doit avoir 100%". Il n'y a aucune distinction entre l'une et l'autre image.
C'est technique peut marcher comme ceci:

/* Toute image dans l'élément "banner" est par défaut caché
HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<style type="text/css">
#banner img{ 
display: none;
}
</style>
<div id="banner">
 <img id="bannertree" src="bannertree.jpg" alt="bannière" />
  <img id="bannerblue" src="bannerblue.jpg" alt="bannière" />
</div>

Default.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
/* Dans default.css, l'image "bannertree" est visible  */
#bannertree { 
display: block;
width:100%;
height:159px;
border:0;
}

Blue.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
/* Dans blue.css, l'image "bannerblue" est visible  */
#bannerblue { 
display: block;
width:100%;
height:159px;
border:0;
}

Comme ça, ça devrait marcher.
Inconvénient, t'es obligé de charger toutes les images à l'avance, d''où l'utilité de javascript pour ne charger les images qu'à la demande. Et donc, quitte à utiliser du javascript, autant gérer ta bannière uniquement via javascript comme te le suggérait desert.

Dis-moi si mon css fonctionne.

**kunpen** · 30/01/2009, 16h53

Merci pour ce code Ivr, cette idée m'avais passé par la tête mais vu que je maitrise pas à 100% le CSS j'ai pas osé le faire.

J'ai testé avec le code identique à celui que tu ma donné mais malheureusement la bannière ne s'affiche pas du tout
et rapproche le menu du haut et celui du bas donc j'ai essayer de feinter n mettant une image transparente au dessus l'écart est a nouveau creusé entre les 2 menu mais les bannières ne s'affichent pas sauf si j'enlève

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display: none;

mais bon ont perd l'intérêt de la manip...

C'est une bonne idée mais malheureusement pas envisageable car j'aurais une dizaines de thèmes avec leur bannières respective donc très lourd à charger tout d'un coup.

Laissez le post ouvert dès fois qu'une solution miracle apparaisse
mais visiblement comme disais GihefBey afficher à 100% des image en background n'est pas possible...

Je vais ouvrir suivre le conseil de desert et ouvrir un post dans la section java et ajouter le lien ici.

**lvr** · 30/01/2009, 17h11

Je crois que tu te compliques la vie.
Le javascript nécessaire pour faire cette manip est ultra-ultra-simple.

**kunpen** · 30/01/2009, 17h23

Effectivement ce serais plus simple en javascript mais j'ai très peu de connaissances en javascript à part le copier coller...

Et je pensais qu'en CSS ce serais beaucoup plus léger mais bon vu que j'ai pas le choix voici le post dans la section javascript:

http://www.developpez.net/forums/d68...s/#post3983164

Comment remplacer la balise img src width à 100% en CSS? [Fait]

CSS

Discussions similaires

Partager

Partager