L'image de fond que je veux changer c'est celle de la classe "content" du fichier css quand on clic sur l'image "presentation.png" du fichier index.
De plus au moment du clic sur cette image je voudrais charger une page dans une div (par exemple dans la div "pages"). Comment faire?
fichier css
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/wallpaper.jpg);
/* margin: 0; */
background-position:center;
background-position:bottom;
padding: 0;
color: #000;
}
.container {
width: 900px;
margin: 0 auto; /* la valeur automatique sur les côtés, associée à la largeur, permet de centrer la mise en page */
}
.header {
background-color: transparent;
background-image: url(images/header.png);
width: 900px;
height: 37px;
}
.sidebar1 {
float: left;
width: 34px;
height: 469px;
background-image: url(images/gauche.png);
}
.content {
width: 832px;
height: 469px;
float: left;
background-image: url(images/background.jpg);
}
.imgpages {
width: 200px;
height: 394px
}
.pages {
width: 632px;
height: 394px;
padding-left: 200px;
}
.menu {
width: 832px;
height: 75px;
padding-bottom: 0px;
}
img {
border: none;
}
.dock {
position: relative;
height: 50px;
text-align: center;
}
#dock2 {
width: 100%;
bottom: 167px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.sidebar2 {
float: left;
width: 34px;
height: 469px;
background-image: url(images/droit.png);
}
.footer {
background-image: url(images/footer.png);
position: relative;
clear: both;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
height: 187px;
}
<!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=utf-8" />
<title>Association GRAAL</title>
<script type="text/javascript" src="template/defaut/js/jquery.js"></script>
<script type="text/javascript" src="template/defaut/js/interface.js"></script>
<link href="template/defaut/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<div align="center"></div>
</div>
<!-- end .header -->
<div class="sidebar1">
</div>
<!-- end .sidebar1 -->
<div class="content">
<div class="imgpages">
</div>
<div class="pages">
</div>
<div class="menu">
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" a href="#"><span>Présentation</span><img src="template/defaut/images/menu/presentation.png" alt="Présentation" /> </a>
<a class="dock-item2" href="#"><span>Nos valeurs</span><img src="template/defaut/images/menu/valeurs.png" alt="Nos valeurs" /></a>
<a class="dock-item2" href="#"><span>Trombinoscope</span><img src="template/defaut/images/menu/trombi.png" alt="Trombinoscope" /></a>
<a class="dock-item2" href="#"><span>Calendrier</span><img src="template/defaut/images/menu/calendrier.png" alt="Calendrier" /></a>
<a class="dock-item2" href="#"><span>Vos idées</span><img src="template/defaut/images/menu/message.png" alt="Vos idées" /></a>
<a class="dock-item2" href="#"><span>Contact</span><img src="template/defaut/images/menu/email.png" alt="contact" /></a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
<!-- end .content -->
<div align="center"></div>
<div class="sidebar2">
</div>
<!-- end .sidebar2 -->
<div class="footer">
</div>
<!-- end .footer -->
</div>
<!-- end .container -->
</body>
</html>D'avance merci pour votre aide j'espère avoir été le plus précis possible dans ma demande d'aide.
