Comment remplacer la balise img src width à 100% en CSS?
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:
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:
1
2
3
4
5
|
#banner {
background:url(bannerdefault.jpg) no-repeat;
border:0
} |
blue.css
Code:
1
2
3
4
5
|
#banner {
background:url(bannerblue.jpg) no-repeat;
border:0
} |
J'ai utilisé en HTML:
Code:
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:
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é...)
