Intégrer une image
Bonjour,
je souhaite intégrer une image en .pgn que j'ai créer pour remplacer le fond gris de mon menu.
voici le script:
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 30px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #;
}
#menu li a, #menu dt a {
color: #FF0;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
color: #D6D6D6;
}
-->
</style>
<style type="text/css">
<!--
body {
font-family: "Comic Sans MS", cursive, "Berlin Sans FB";
background-image: url(Images/IMAGE%20FOND.jpg);
background-repeat: repeat;
}
#apDiv1 {
position:absolute;
left:19px;
top:22px;
width:1134px;
height:120px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:19px;
top:169px;
width:1136px;
height:32px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:214px;
top:225px;
width:739px;
height:483px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:12px;
top:720px;
width:1138px;
height:80px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:968px;
top:224px;
width:188px;
height:484px;
z-index:5;
}
body {
}
body {
background-image: url(Images/IMAGE%20FOND%20copie.jpg);
background-color: #009;
}
#apDiv6 {
position:absolute;
left:19px;
top:223px;
width:180px;
height:484px;
z-index:6;
background-image: url();
}
-->
</style>
<style type="text/css">
<!--
body,td,th {
color: #000;
}
a {
}
-->
</style></head>
<body>
<div id="apDiv1"><img src="Images/bannière2.jpg" width="848" height="142" /></div>
<div id="apDiv2"> </div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6">
<dl id="menu">
<dt onclick="javascript:montre();">Menu 1</dt>
<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
je souhaite intégrer une image en .pgn que j'ai créer pour remplacer le fond gris de mon menu.
voici le script:
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 30px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #;
}
#menu li a, #menu dt a {
color: #FF0;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
color: #D6D6D6;
}
-->
</style>
<style type="text/css">
<!--
body {
font-family: "Comic Sans MS", cursive, "Berlin Sans FB";
background-image: url(Images/IMAGE%20FOND.jpg);
background-repeat: repeat;
}
#apDiv1 {
position:absolute;
left:19px;
top:22px;
width:1134px;
height:120px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:19px;
top:169px;
width:1136px;
height:32px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:214px;
top:225px;
width:739px;
height:483px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:12px;
top:720px;
width:1138px;
height:80px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:968px;
top:224px;
width:188px;
height:484px;
z-index:5;
}
body {
}
body {
background-image: url(Images/IMAGE%20FOND%20copie.jpg);
background-color: #009;
}
#apDiv6 {
position:absolute;
left:19px;
top:223px;
width:180px;
height:484px;
z-index:6;
background-image: url();
}
-->
</style>
<style type="text/css">
<!--
body,td,th {
color: #000;
}
a {
}
-->
</style></head>
<body>
<div id="apDiv1"><img src="Images/bannière2.jpg" width="848" height="142" /></div>
<div id="apDiv2"> </div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6">
<dl id="menu">
<dt onclick="javascript:montre();">Menu 1</dt>
<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
Configuration: Windows XP Internet Explorer 7.0
6 réponses
-
Ben tu peux peut-être le mettre en jpg non?
-
lourd? c'est le plus léger que j'ai
-
Dans ton CSS tu as déjà deux body{} avec tout deux des images de fond plus un troisième plus haut.
body { font-family: "Comic Sans MS", cursive, "Berlin Sans FB"; background-image: url(Images/IMAGE%20FOND.jpg); background-repeat: repeat; }
etbackground-image: url(Images/IMAGE%20FOND%20copie.jpg); background-color: #009; }
et plus hautbody { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; }
Pour mettre une image de fond il faut mettre sur un body{}background-image: url(chemin de l'image);
Par contre un PNG est assez lourd en général donc a éviter de préférence surtout dans de grande taille. -
le problème est que je voudrai mettre un .png à la place du fond coloré.
j'ai supprimé les body en double j'avais pas vu. -
oui pardon j'ai fais une faute de frappe c'est bien du .png
-
"je souhaite intégrer une image en .pgn ..."
cette extension n'existe pas, essaye le .png
...
La création d'un site commence par la réflexion de son devenir...
