Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris.

  • descriptiondescription
  • descriptiondescription
  • descriptiondescription








Première étape :

Allez chez Hoverbox

Cliquez sur Hoverbox: Download Here (280 KB)

Vous venez de télécharger un fichier .zip : un ensemble de fichiers compressés.

Pour les décompresser, j'utilise WinRAR - extraire vers.

Les 2 fichiers qui nous intéressent sont : hoverbox.css et ie_fixes.css

Deuxième étape :

Pour que le rendu soit bon sur OverBlog, j'ai dû ouvrir le fichier hoverbox.css dans mon bloc-note et effacer le background, le padding et le width dans la ligne body.

body {background: #fff; color: #777;margin: 0 auto; padding: 50px; position: relative;width: 620px;}

Elle a maintenant cet aspect :

body{color: #777; margin: 0 auto; position: relative;}

Troisième étape :

En Confiance : j'héberge ces fichiers sur ArchiveHost et je note les adresses

En Privilège et Premium : Dans mon administration - documents - autres fichiers :
  • j'ai créé un répertoire hoverbox
  • dans lequel j'ai enregistré :
  • hoverbox.css
  • ie_fixes.css
  • je note les adresse de ces fichiers
  •  
Quatrième étape :

Lorsque je place les images, en mode source, je colle

<div class="hoverbox" style="margin-left: 2em;">
<ul>
    <li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo01.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo01.jpg" /></a></li>
    <li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo02.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo02.jpg" /></a></li>
    <li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo03.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo03.jpg" /></a></li>
</ul>
<!--[if IE]>
<link rel="stylesheet" href='http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]--></div>
<link media="screen, projection" type="text/css" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/css/hoverbox.css" rel="stylesheet" />

En rouge, les adresses des images
En bleu, les adresses des fichiers



publié dans : Tous Blogs - Effets sur Images et documents
ajouter un commentaire commentaires (4)   

Articles les plus populaires

Publicité

Recherche Rapide Sur le Site

Sommaires

top

Dernières Astuces

liste complète
Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus