Comment faire un lien quand on clique dessus montrent une plus grande image sur la page
Fondamentalement, je veux voir mon bouton plus, lorsque vous cliquez dessus pour agrandir l'image au-dessus d'elle. De sorte que l'image s'affiche dans le milieu de la page agrandie personne ne sait d'une façon de le faire, ou un tutoriel, j'ai pu suivre, serait très apprécié. par la voie im assez nouveau à la conception web, donc un peu d'aide merci!
Aussi les objets que je veux le changer sont sous portefeuille de l'élément de
voici un lien vers le site:
http://www.mmicgt.com/michael_g/portfolio.html
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Michael Grace} Portfolio website - {Gracey design}</title>
<link href="css/gallery.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<ul id="navigation">
<li><a href="index.html"><img src="images/images/home_button2.gif" onmouseover="this.src='images/images/home_button1.gif'" onmouseout="this.src='images/images/home_button2.gif'"/></a>
</li>
<li><a href="about.html"><img src="images/images/about_button1.gif" onmouseover="this.src='images/images/about_button2.gif'" onmouseout="this.src='images/images/about_button1.gif'"/></a>
</li>
<li>
<div id="logo" style="padding:16px">
<img src="images/images/logo.png" />
</div>
</li>
<li><a href="portfolio.html"><img src="images/images/gallery_button1.gif" onmouseover="this.src='images/images/gallery_button2.gif'" onmouseout="this.src='images/images/gallery_button1.gif'"/></a>
</li>
<li><a href="contact.html"><img src="images/images/contact_button1.gif" onmouseover="this.src='images/images/contact_button2.png'" onmouseout="this.src='images/images/contact_button1.gif'"/></a>
</li>
</ul>
<div id="header">
<h1><img src="images/images/gallery_03.png" /></h1>
<h2>Portfolio.</h2>
</div>
<div id="line">
</div>
<div id="content">
<p>Did I mention I design stuff? I've had plenty of fun creating a bunch of designs for both Univeristy and for myself as personal projects. Here's a collection of some of my favs.
</p>
<div class="portfolio-item">
<a href="#"><img src="images/home/image1.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image2.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image3.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image4.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image5.png" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image6.png" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image7.png" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image8.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
</div>
</div>
</div>
</body>css:
body {
background: url(../images/images/bg_page.gif) center center;
font: 16px Helvetica, Arial, Sans-Serif;
color: #636363;
line-height: 24px;
}
#container {
width: 940px;
margin: 0 auto;
margin-top: 100px;
}
#header {
height: 177px;
background: url(../images/home/header.gif) top center;
padding: 52px 0 0 28px;
position: relative;
border-radius: 10px 10px 0px 0px;
}
#header h1 {
margin: 0px 0 20px 0;
}
#header h2 {
width: 510px;
font: 30px Helvetica, Arial, Sans-Serif;
color: #f2f0eb;
letter-spacing: 2px;
margin: 0 0 20px 0;
text-shadow: 0px 3px 3px #494949;
}
#logo {
width: 272px;
height: 214px;
position: absolute;
left: 49.5%;
top: 11%;
margin-left: -150px;
margin-top: -86px;
z-index: 2;
}
#navigation {
position: relative;
height: 60px;
}
#navigation li {
display: inline;
width: 160px;
height: 60px;
float: left;
padding: 13px 0 0 16px;
}
#navigation li:nth-child(1) {
margin: 0 0 0 -57px;
}
#navigation li:nth-child(2) {
margin: 0 0 0 0;
}
#navigation li:nth-child(3) {
margin: 0 0 0 0;
}
#navigation li:nth-child(4) {
margin: 0 0 0 77px;
}
#content {
height: 592px;
background: url(../images/home/bg_body.png) top center;
padding: 41px 69px 50px 28px;
overflow: hidden;
position: relative;
border-radius: 0px 0px 10px 10px;
}
#content h2 {
font: 30px Helvetica, Arial, Sans-Serif;
letter-spacing: 2px;
margin: 0 0 20px 0;
}
#content h3 {
font: 26px Helvetica, Arial, Sans-Serif;
letter-spacing: 2px;
margin: 0 0 20px 0;
}
#content p {
margin: 0 0 30px 0;
}
#content a {
color: #671111;
text-decoration: none;
}
#content a:hover {
color: #a12121;
}
#content .portfolio-item {
width: 190px;
padding: 1px;
background: #eee;
text-align: center;
float: left;
margin: 0 7px 14px 7px;
}
#content .portfolio-item p.btn {
margin: 0;
}
#content .portfolio-item p.btn a {
display: block;
width: 183px;
height: 29px;
padding: 7px 0 0 0;
background: url(images/images/background-seemore_03.gif);
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
#line {
height: 4px;
background: url(../images/home/line.gif) top center;
position: relative;
}- Salut, vous devriez jeter un oeil sur la lightbox plugin pour jQuery, elle s'adapte à votre besoin, je crois, et il y a beaucoup de tutoriel sur l'utilisation de ce. lokeshdhakar.com/projects/lightbox2
- ok ça marche, mais comment pourrais-je faire la jointure avec le lien afficher plus de cette <p class="btn"><a href="#">VOIR PLUS</a></p
Vous devez vous connecter pour publier un commentaire.
Vous devriez regarder pour satisfaire lib js pour que. Ils sont souvent faciles à installer et ne nécessite pas de codage pour une utilisation de base. Voici quelques exemples courants:
Ces libs soutien du contenu HTML à afficher, de sorte que vous pouvez ajouter n'importe quel contenu à youy photos. Ils sont recommandés, car ils sont développés pour un temps long et assez stable. Bonne chance!
EDIT:
Lien peut avoir n'importe quel contenu en ligne - image, texte, etc.