11540 sujets

JavaScript, DOM et API Web HTML5

[jQuery] Comment changer une image de fond et integrer une page php

Bonjour, je suis actuellement entrain d'essayer de coder mais je me heurte à un soucis. Voilà, je souhaiterai savoir comment faire pour changer une image de fond d'une div en cliquant sur l'image d'un menu. J'ai essayé plusieurs méthodes mais aucune n'a fonctionné Smiley bawling .
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.

fichier css
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-image:url(images/wallpaper.jpg);
	/* [disabled]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;
}


et le fichier index
<!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.
Rien de bien compliqué. Par contre, utilises un ID pour content… Tout se passe par l'ajout ou la suppression de classes.
Bref, je t'ai fait un exemple ici : http://jsfiddle.net/tNCSJ/1/

(Penses à créer un fiddle la prochaine fois que tu veux exposer ton problème)
Modifié par ZeB_panam (08 Jul 2013 - 08:00)
Sujet clos
Aller à