Titre: verification de mon code, je ne trouve pas l'erreur
Posté par: audreysene le le 10-04-2012 a 23:34:25
bonjour,
voila j'ai creer un site via dreamweaver.
J'ai dans un premier temps creer un template pour pouvoir mettre à jour mes autres pages html. J'y est introduit un porte folio jquery javascript. Sur mon dans template dans ma balise head, j'ai indiquer le chemin de mon .js ainsi que ma feuille de style, bref tout ce qu'il faut (enfin j'espere...!!)
je me suis baser sur cette page la , deja en ligne sur le net :
http://as-infographistemultimedia.perso.sfr.fr/travaux.html#
Et voici ci dessous mon template :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Bijoux Gourmands / Priscilla.G</title>
<!-- TemplateEndEditable -->
<script src="jquery.js" type="application/javascript"></script>
<script>
$("document").ready(function(){
// alert("tutu");
$("#vignettes img").hover(function(){
$(this).animate({opacity:0.5},500);
$(this).find("em").animate({opacity: "show",top:"-85px"},500);
},
function(){
$(this).animate({opacity:1},500);
})
$("#vignettes img").click(
function(){
var cible=$(this);
$("#folio").find("em").find("p").remove();
var contenu_em=$(this).attr('alt');
$("#folio").find("em").append("<p>"+contenu_em+"</p>");
$("#grande").animate({opacity:0},500,
function(){$("#grande").attr("src",cible.attr("src"));
$("#grande").animate({opacity:1},500);
});
})
})
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../style_prisc.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="conteneur">
<div id="header">
<div id="logo">
</div>
<div id="facebook">
<a name="fb_share">Partager</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div><!--fin de facebook-->
</div><!--fin de header-->
<div id="milieu">
<div id="menu">
<ul class="menu1">
<li><a href="colliers.html">Colliers</a></li>
<li><a href="bo.html">Boucles d'oreilles</a></li>
<li><a href="pc.html">Porte clef ou bijoux de sac</a></li>
<li><a href="bracelet.html">Bracelets</a></li>
<li><a href="cdrapo.html">Colliers Drapeaux</a></li>
<li><a href="bague.html">Bagues</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="contenu"><!-- TemplateBeginEditable name="EditRegion1" -->EditRegion1<!-- TemplateEndEditable --></div>
<div id="pied">
<div id="texte"><img src="../images/a.png" width="500" height="20" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="363,3,464,18" href="http://as-infographistemultimedia.perso.sfr.fr/" target="_blank">
</map>
</div></div>
</div>
</div>
</body>
</html>
et voici une page type html avec dedans un tableau en rapport avec mon jquery :
<!DOCTYPE html>
<html><!-- InstanceBegin template="/Templates/test.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Bijoux Gourmands / Priscilla.G</title>
<!-- InstanceEndEditable -->
<script src="jquery.js" type="application/javascript"></script>
<script>
$("document").ready(function(){
// alert("tutu");
$("#vignettes img").hover(function(){
$(this).animate({opacity:0.5},500);
$(this).find("em").animate({opacity: "show",top:"-85px"},500);
},
function(){
$(this).animate({opacity:1},500);
})
$("#vignettes img").click(
function(){
var cible=$(this);
$("#folio").find("em").find("p").remove();
var contenu_em=$(this).attr('alt');
$("#folio").find("em").append("<p>"+contenu_em+"</p>");
$("#grande").animate({opacity:0},500,
function(){$("#grande").attr("src",cible.attr("src"));
$("#grande").animate({opacity:1},500);
});
})
})
</script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="style_prisc.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="conteneur">
<div id="header">
<div id="logo">
</div>
<div id="facebook">
<a name="fb_share">Partager</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div><!--fin de facebook-->
</div><!--fin de header-->
<div id="milieu">
<div id="menu">
<ul class="menu1">
<li><a href="colliers.html">Colliers</a></li>
<li><a href="bo.html">Boucles d'oreilles</a></li>
<li><a href="pc.html">Porte clef ou bijoux de sac</a></li>
<li><a href="bracelet.html">Bracelets</a></li>
<li><a href="cdrapo.html">Colliers Drapeaux</a></li>
<li><a href="bague.html">Bagues</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="contenu"><!-- InstanceBeginEditable name="EditRegion1" --><div id="cadre">
<div id="folio">
<table>
<tr>
<td width="30"></td>
<td>
<table id="vignettes" width="120" height="250" >
<tr>
<td><a href="#"><img src="images/b/b1.jpg"height="80"/></a></td>
</tr>
<tr>
<td><a href="#"><img src="images/b/b2.jpg"height="80"/></a></td>
</tr>
<tr>
<td><a href="#"><img src="images/b/b3.jpg"height="80"/></a></td>
</tr>
<tr>
<td><a href="#"><img src="images/b/b4.jpg"height="80"/></a></td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="410" height="550"><img src="images/b/b1.jpg" width="528" height="427" id="grande"/>
<!--<span><img src="images/montre.png" height="550" id="supergrande"/> </span>-->
</td>
<!--<td width="360" height="480">on ajoute un identifiant pour cibl? les vignettes
</td>-->
</tr>
</table>
</div></div>
<!-- InstanceEndEditable --></div>
<div id="pied">
<div id="texte"><img src="images/a.png" width="500" height="20" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="363,3,464,18" href="http://as-infographistemultimedia.perso.sfr.fr/" target="_blank">
</map>
</div></div>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
et ci dessous ma feuille de style :
@charset "utf-8";
/* CSS Document */
html {
margin:0;
padding:0;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover;
background-image: url(images/fond.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
#conteneur{
max-width:100%;
max-height: 100%;
position:relative;
}
#header{
margin-top:30px;
width: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#logo{
width:300px;
height:79px;
background-image: url(images/logo2.png);
background-repeat: no-repeat;
float: left;
}
#facebook{
float: left;
margin-top: 50px;
margin-left: 580px;
}
#menu {
width:200px;
height:600px;
float:left;
}
#contenu{
width:800px;
height:600px;
float:left;
}
#milieu{
width:1000px;
height:600px;
clear: both;
margin-right: auto;
margin-left: auto;
float: none;
position: relative;
}
ul.menu1 {
float: left;
width: 200px;
padding: 0;
list-style: none;
margin-top:50px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
background-image: url(images/a.jpg);
background-repeat: repeat;
}
ul.menu1 li a{
color: #000;
font-size:14px;
font-weight:bold;
text-decoration: none;
display: block;
width: 180px;
padding: 10px;
border-bottom: 1px solid #474747;
text-shadow: #dddddd 0px 1px 1px;
}
ul.menu1 li a:hover{
text-shadow: #ededed 0px 1px 1px;
background-color: #ffa0d3;
background-image: url(images/bg_hover.jpg);
background-repeat: repeat-x;
background-position: 0 0;
}
ul.menu1 li span{
display: none;
font-size:11px;
font-weight:100;
}
ul.menu1 li a:hover span {
display: block;
padding:5px 0 0 0;
}
#cadre{
width:750px;
height:500px;
background-image: url(images/cadre.png);
background-repeat: no-repeat;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}
#pied{
background-repeat: no-repeat;
height: 30px;
width: 1000px;
margin-right: auto;
margin-left: auto;
clear: both;
border: thin solid #F63;
background-image: url(images/pied.png);
margin-bottom: 20px;}
#texte{
width:500px;
height:20px;
margin-left:auto;
margin-right:auto;
margin-top: 5px;
}
#folio {
width: 1000px;
margin-right: auto;
margin-left: auto;
height: 650px;
}
voila je suis desesperer, mon portefolio qui a pour fonction :
quand je passe ma souris sur mes vignettes, elle s'opacifient et quand je clique sur ma vignette, l'image de ma vignette est censé s'afficher dans la grande image. comme sur cette page la : http://as-infographistemultimedia.perso.sfr.fr/travaux.html#
et rien ne fonctionne, si juste quand je passe ma souris sur mes vignette, la fleche de ma souris devient une main, d'ou je pense comme quoi ca fonctionne sans aller jusqu'au bout.
Merci de m'aiguiller avec vos lumieres car les miennes sont eteintes, mes ampoules ont grillées!!!!
Audrey ??? ??? ??? |
Titre: Re:verification de mon code, je ne trouve pas l'erreur
Posté par: Madrileño le le 11-04-2012 a 23:51:22
| Vous pouvez corriger les erreurs HTML. |
Titre: Re:verification de mon code, je ne trouve pas l'erreur
Posté par: audreysene le le 12-04-2012 a 19:33:23
oui je veux bien les corrigés, mais voila je demande ou elles sont mes erreurs, je debute dans la creation de site et je ne suis pas forcement une super pro , c'est pour cela que je viens sur le forum pour de l'aide.ou se trouve mes erreurs, dans le html , oui mais ou??
merci de votre reponse et de votre aide !!! |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|