Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
Publié dans : Effets d'Images et diaporamas - Tous blogs
Ce n'est pas très difficile à réaliser.
Voici un exemple : Lbox
Je l'ai mis sur une page à part car la galerie est trop large. Je n'y ai mis que quelques photos. Survolez avec la souris le menu, puis les photos.
Première étape :
Allez chez StuNicolls
Cliquez sur Download lightbox2.zip.
Vous venez de sauvegarder un fichier .zip : une ensemble de fichiers compressés.
Pour les décompresser, j'utilise WinRAR - Extraire vers
Deuxième étape :
Dans votre administration, Documents - Autres fichiers :
Sur votre PC, vous cliquez sur le fichier lightbox2.html.
C'est un lien qui vous conduit sur une page web où apparaît la galerie.
Vous regardez sa source et la sauvegardez.
Je la mets ici pour les explications :
Vous allez coller ce code en mode source/HTML.
Voici un exemple : Lbox
Je l'ai mis sur une page à part car la galerie est trop large. Je n'y ai mis que quelques photos. Survolez avec la souris le menu, puis les photos.
Première étape :
Allez chez StuNicolls
Cliquez sur Download lightbox2.zip.
Vous venez de sauvegarder un fichier .zip : une ensemble de fichiers compressés.
Pour les décompresser, j'utilise WinRAR - Extraire vers
Deuxième étape :
Dans votre administration, Documents - Autres fichiers :
- vous créez un répertoire Lbox, vous y sauvegardez l'image :
- close.gif
- vous notez son adresse
Sur votre PC, vous cliquez sur le fichier lightbox2.html.
C'est un lien qui vous conduit sur une page web où apparaît la galerie.
Vous regardez sa source et la sauvegardez.
Je la mets ici pour les explications :
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}
/* slides styling */
.photo {width:720px; text-align:left; position:relative;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:240px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/lbox/close.gif) no-repeat right top; width:479px; padding:70px 100px; border:20px solid #aaa;}
.photo ul.topic li a:hover ul li,
.photo ul.topic li:hover ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li a:hover ul li a,
.photo ul.topic li:hover ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li a:hover ul li a img,
.photo ul.topic li:hover ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a img.large,
.photo ul.topic li:hover ul li a img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
.photo ul.topic li a:hover ul li a:hover img.large,
.photo ul.topic li:hover ul li a:hover img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li:hover ul li a:focus,
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active
{position:static; outline:0;}
.photo ul.topic li:hover ul li a:focus img,
.photo ul.topic li:hover ul li a:active img,
.photo ul.topic li a:hover ul li a:active img
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}
.photo ul.topic li:hover ul li a:focus img.large,
.photo ul.topic li:hover ul li a:active img.large,
.photo ul.topic li a:hover ul li a:active img.large
{position:absolute; left:15px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;}
</style>
</head>
<body>
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#portrait1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait4"><img src="lbox/portrait4a.jpg" alt="" title="" /><img class="large" src="lbox/portrait4.jpg" alt="" title="" /></a></li>
<li><a href="#portrait5"><img src="lbox/portrait5a.jpg" alt="" title="" /><img class="large" src="lbox/portrait5.jpg" alt="" title="" /></a></li>
<li><a href="#portrait6"><img src="lbox/portrait6a.jpg" alt="" title="" /><img class="large" src="lbox/portrait6.jpg" alt="" title="" /></a></li>
<li><a href="#portrait7"><img src="lbox/portrait7a.jpg" alt="" title="" /><img class="large" src="lbox/portrait7.jpg" alt="" title="" /></a></li>
<li><a href="#portrait8"><img src="lbox/portrait8a.jpg" alt="" title="" /><img class="large" src="lbox/portrait8.jpg" alt="" title="" /></a></li>
<li><a href="#portrait9"><img src="lbox/portrait9a.jpg" alt="" title="" /><img class="large" src="lbox/portrait9.jpg" alt="" title="" /></a></li>
<li><a href="#portrait10"><img src="lbox/portrait10a.jpg" alt="" title="" /><img class="large" src="lbox/portrait10.jpg" alt="" title="" /></a></li>
<li><a href="#portrait11"><img src="lbox/portrait11a.jpg" alt="" title="" /><img class="large" src="lbox/portrait11.jpg" alt="" title="" /></a></li>
<li><a href="#portrait12"><img src="lbox/portrait12a.jpg" alt="" title="" /><img class="large" src="lbox/portrait12.jpg" alt="" title="" /></a></li>
<li><a href="#portrait13"><img src="lbox/portrait13a.jpg" alt="" title="" /><img class="large" src="lbox/portrait13.jpg" alt="" title="" /></a></li>
<li><a href="#portrait14"><img src="lbox/portrait14a.jpg" alt="" title="" /><img class="large" src="lbox/portrait14.jpg" alt="" title="" /></a></li>
<li><a href="#portrait15"><img src="lbox/portrait15a.jpg" alt="" title="" /><img class="large" src="lbox/portrait15.jpg" alt="" title="" /></a></li>
<li><a href="#portrait16"><img src="lbox/portrait16a.jpg" alt="" title="" /><img class="large" src="lbox/portrait16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="topic"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#landscape1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo005bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo005bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo006bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo006bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape4"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo007bis.jpg" alt="" title="" /><img class="large" src="lbox/landscape4.jpg" alt="" title="" /></a></li>
<li><a href="#landscape5"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo007bis.jpg" alt="" title="" /><img class="large" src="lbox/landscape5.jpg" alt="" title="" /></a></li>
<li><a href="#landscape6"><img src="lbox/landscape6a.jpg" alt="" title="" /><img class="large" src="lbox/landscape6.jpg" alt="" title="" /></a></li>
<li><a href="#landscape7"><img src="lbox/landscape7a.jpg" alt="" title="" /><img class="large" src="lbox/landscape7.jpg" alt="" title="" /></a></li>
<li><a href="#landscape8"><img src="lbox/landscape8a.jpg" alt="" title="" /><img class="large" src="lbox/landscape8.jpg" alt="" title="" /></a></li>
<li><a href="#landscape9"><img src="lbox/landscape9a.jpg" alt="" title="" /><img class="large" src="lbox/landscape9.jpg" alt="" title="" /></a></li>
<li><a href="#landscape10"><img src="lbox/landscape10a.jpg" alt="" title="" /><img class="large" src="lbox/landscape10.jpg" alt="" title="" /></a></li>
<li><a href="#landscape11"><img src="lbox/landscape11a.jpg" alt="" title="" /><img class="large" src="lbox/landscape11.jpg" alt="" title="" /></a></li>
<li><a href="#landscape12"><img src="lbox/landscape12a.jpg" alt="" title="" /><img class="large" src="lbox/landscape12.jpg" alt="" title="" /></a></li>
<li><a href="#landscape13"><img src="lbox/landscape13a.jpg" alt="" title="" /><img class="large" src="lbox/landscape13.jpg" alt="" title="" /></a></li>
<li><a href="#landscape14"><img src="lbox/landscape14a.jpg" alt="" title="" /><img class="large" src="lbox/landscape14.jpg" alt="" title="" /></a></li>
<li><a href="#landscape15"><img src="lbox/landscape15a.jpg" alt="" title="" /><img class="large" src="lbox/landscape15.jpg" alt="" title="" /></a></li>
<li><a href="#landscape16"><img src="lbox/landscape16a.jpg" alt="" title="" /><img class="large" src="lbox/landscape16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="topic"><a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#bird1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo008bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo008bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo009bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo009bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /><img class="large" src="lbox/bird4a.jpg" alt="" title="" /></a></li>
<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /><img class="large" src="lbox/bird5a.jpg" alt="" title="" /></a></li>
<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /><img class="large" src="lbox/bird6a.jpg" alt="" title="" /></a></li>
<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /><img class="large" src="lbox/bird7a.jpg" alt="" title="" /></a></li>
<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /><img class="large" src="lbox/bird8a.jpg" alt="" title="" /></a></li>
<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /><img class="large" src="lbox/bird9a.jpg" alt="" title="" /></a></li>
<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /><img class="large" src="lbox/bird10a.jpg" alt="" title="" /></a></li>
<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /><img class="large" src="lbox/bird11a.jpg" alt="" title="" /></a></li>
<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /><img class="large" src="lbox/bird12a.jpg" alt="" title="" /></a></li>
<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /><img class="large" src="lbox/bird13a.jpg" alt="" title="" /></a></li>
<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /><img class="large" src="lbox/bird14a.jpg" alt="" title="" /></a></li>
<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /><img class="large" src="lbox/bird15a.jpg" alt="" title="" /></a></li>
<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /><img class="large" src="lbox/bird16a.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div></style>
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}
/* slides styling */
.photo {width:720px; text-align:left; position:relative;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:240px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/lbox/close.gif) no-repeat right top; width:479px; padding:70px 100px; border:20px solid #aaa;}
.photo ul.topic li a:hover ul li,
.photo ul.topic li:hover ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li a:hover ul li a,
.photo ul.topic li:hover ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li a:hover ul li a img,
.photo ul.topic li:hover ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a img.large,
.photo ul.topic li:hover ul li a img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
.photo ul.topic li a:hover ul li a:hover img.large,
.photo ul.topic li:hover ul li a:hover img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li:hover ul li a:focus,
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active
{position:static; outline:0;}
.photo ul.topic li:hover ul li a:focus img,
.photo ul.topic li:hover ul li a:active img,
.photo ul.topic li a:hover ul li a:active img
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}
.photo ul.topic li:hover ul li a:focus img.large,
.photo ul.topic li:hover ul li a:active img.large,
.photo ul.topic li a:hover ul li a:active img.large
{position:absolute; left:15px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;}
</style>
</head>
<body>
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#portrait1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait4"><img src="lbox/portrait4a.jpg" alt="" title="" /><img class="large" src="lbox/portrait4.jpg" alt="" title="" /></a></li>
<li><a href="#portrait5"><img src="lbox/portrait5a.jpg" alt="" title="" /><img class="large" src="lbox/portrait5.jpg" alt="" title="" /></a></li>
<li><a href="#portrait6"><img src="lbox/portrait6a.jpg" alt="" title="" /><img class="large" src="lbox/portrait6.jpg" alt="" title="" /></a></li>
<li><a href="#portrait7"><img src="lbox/portrait7a.jpg" alt="" title="" /><img class="large" src="lbox/portrait7.jpg" alt="" title="" /></a></li>
<li><a href="#portrait8"><img src="lbox/portrait8a.jpg" alt="" title="" /><img class="large" src="lbox/portrait8.jpg" alt="" title="" /></a></li>
<li><a href="#portrait9"><img src="lbox/portrait9a.jpg" alt="" title="" /><img class="large" src="lbox/portrait9.jpg" alt="" title="" /></a></li>
<li><a href="#portrait10"><img src="lbox/portrait10a.jpg" alt="" title="" /><img class="large" src="lbox/portrait10.jpg" alt="" title="" /></a></li>
<li><a href="#portrait11"><img src="lbox/portrait11a.jpg" alt="" title="" /><img class="large" src="lbox/portrait11.jpg" alt="" title="" /></a></li>
<li><a href="#portrait12"><img src="lbox/portrait12a.jpg" alt="" title="" /><img class="large" src="lbox/portrait12.jpg" alt="" title="" /></a></li>
<li><a href="#portrait13"><img src="lbox/portrait13a.jpg" alt="" title="" /><img class="large" src="lbox/portrait13.jpg" alt="" title="" /></a></li>
<li><a href="#portrait14"><img src="lbox/portrait14a.jpg" alt="" title="" /><img class="large" src="lbox/portrait14.jpg" alt="" title="" /></a></li>
<li><a href="#portrait15"><img src="lbox/portrait15a.jpg" alt="" title="" /><img class="large" src="lbox/portrait15.jpg" alt="" title="" /></a></li>
<li><a href="#portrait16"><img src="lbox/portrait16a.jpg" alt="" title="" /><img class="large" src="lbox/portrait16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="topic"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#landscape1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo005bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo005bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo006bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo006bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape4"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo007bis.jpg" alt="" title="" /><img class="large" src="lbox/landscape4.jpg" alt="" title="" /></a></li>
<li><a href="#landscape5"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo007bis.jpg" alt="" title="" /><img class="large" src="lbox/landscape5.jpg" alt="" title="" /></a></li>
<li><a href="#landscape6"><img src="lbox/landscape6a.jpg" alt="" title="" /><img class="large" src="lbox/landscape6.jpg" alt="" title="" /></a></li>
<li><a href="#landscape7"><img src="lbox/landscape7a.jpg" alt="" title="" /><img class="large" src="lbox/landscape7.jpg" alt="" title="" /></a></li>
<li><a href="#landscape8"><img src="lbox/landscape8a.jpg" alt="" title="" /><img class="large" src="lbox/landscape8.jpg" alt="" title="" /></a></li>
<li><a href="#landscape9"><img src="lbox/landscape9a.jpg" alt="" title="" /><img class="large" src="lbox/landscape9.jpg" alt="" title="" /></a></li>
<li><a href="#landscape10"><img src="lbox/landscape10a.jpg" alt="" title="" /><img class="large" src="lbox/landscape10.jpg" alt="" title="" /></a></li>
<li><a href="#landscape11"><img src="lbox/landscape11a.jpg" alt="" title="" /><img class="large" src="lbox/landscape11.jpg" alt="" title="" /></a></li>
<li><a href="#landscape12"><img src="lbox/landscape12a.jpg" alt="" title="" /><img class="large" src="lbox/landscape12.jpg" alt="" title="" /></a></li>
<li><a href="#landscape13"><img src="lbox/landscape13a.jpg" alt="" title="" /><img class="large" src="lbox/landscape13.jpg" alt="" title="" /></a></li>
<li><a href="#landscape14"><img src="lbox/landscape14a.jpg" alt="" title="" /><img class="large" src="lbox/landscape14.jpg" alt="" title="" /></a></li>
<li><a href="#landscape15"><img src="lbox/landscape15a.jpg" alt="" title="" /><img class="large" src="lbox/landscape15.jpg" alt="" title="" /></a></li>
<li><a href="#landscape16"><img src="lbox/landscape16a.jpg" alt="" title="" /><img class="large" src="lbox/landscape16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="topic"><a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#bird1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo008bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo008bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo009bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo009bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /><img class="large" src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /><img class="large" src="lbox/bird4a.jpg" alt="" title="" /></a></li>
<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /><img class="large" src="lbox/bird5a.jpg" alt="" title="" /></a></li>
<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /><img class="large" src="lbox/bird6a.jpg" alt="" title="" /></a></li>
<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /><img class="large" src="lbox/bird7a.jpg" alt="" title="" /></a></li>
<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /><img class="large" src="lbox/bird8a.jpg" alt="" title="" /></a></li>
<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /><img class="large" src="lbox/bird9a.jpg" alt="" title="" /></a></li>
<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /><img class="large" src="lbox/bird10a.jpg" alt="" title="" /></a></li>
<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /><img class="large" src="lbox/bird11a.jpg" alt="" title="" /></a></li>
<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /><img class="large" src="lbox/bird12a.jpg" alt="" title="" /></a></li>
<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /><img class="large" src="lbox/bird13a.jpg" alt="" title="" /></a></li>
<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /><img class="large" src="lbox/bird14a.jpg" alt="" title="" /></a></li>
<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /><img class="large" src="lbox/bird15a.jpg" alt="" title="" /></a></li>
<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /><img class="large" src="lbox/bird16a.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div></style>
Vous allez coller ce code en mode source/HTML.
- en rajoutant ce qui est en rouge
- en personnalisant avec votre propre adresse d'image (celle que vous avez sauvegardé dans votre administration à la 2ème étape) ce qui est en bleu
- en vert, ce sont les images qui apparaîtront. Je ne les ai pas toutes mises en couleur. Vous les reconnaissez car devant chacune d'elle, il y a : src
- il faudra peut-être revoir les dimensions :
- dimension totale : .photo {width:720px; text-align:left; position:relative;}
- .photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}
MàJ : Janvier 2009
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Sommaires
Sommaires Pour les Blogs OverBlog
- Premiers pas en V2
- Gestion quotidienne
- Ecritures dans les modules
- Ecritures dans les articles et pages
- Ecritures dans les fenêtres et albums photos
- Modifier les Fonds
- Placer des images
- Ajouter, déplacer ou masquer
- Design complet et Idées de Mise en page
- Aspect des Ascenseurs, Puces et Curseurs
- Cadres,lignes et bordures
- Effets d'Ecriture et de Texte
- Effets d'images et Diaporamas
- Créer et transformer des Images
- Placer des documents
- Musique, son, vidéo et télé
- Cadres, tableaux, lignes
- Liens, listes et menus
- Interactivité et gadgets
- Indicateurs,compteurs et Protection
- référencement, communautés et flux RSS
Dernières Astuces
- Fonction Lire la suite
- Espacer les lettres des mots dans un article
- Espacer les lettres de tous les mots de votre blog
- Souligner un mot ou une phrase en pointillé
- Changer plusieurs fois la couleur des liens au survol de la souris - Privilège
- Créer des infobulles avec Prototip - Privilège
- Créer un pop up avec message
- Changer un texte au passage de la souris
- Créer des textes animés en flash
- Créer votre signature manuscrite
Publicité
Coin Films
Coin Jeux Vidéos
Coin Loisirs Exterieurs
| Articles les plus populaires | L'Univers des Ficelles |
|
|
Commentaires