audreysene
Membre récent
 Hors-Ligne
Messages: 12
 
|
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  |
Auteur 
