| Image polaroïd |
|
|
| 19-07-2008 | ||||||||
Images polaroïds en CSSSur une idée de Peûr, sur son site d'aide overblog
|
||||||||
 |
Les codes à insérer pour avoir cet effet en CSS :
D'abord, le css à mettre soit entre les balises <head>......<head>, soit à faire en appel <link href="url du fichier css" rel="stylesheet media="all">dans un fichier externe, au même endroit entre les balises.
<style type="text/css"> * { margin : 0px ; padding : 0px ; border: 0px; } td.polar { padding: 8% 2% 20% 2%; background: #FFFFFF; border: 1px solid #555555; border-width: 2px 4px 4px 2px; align:center; } </style> |
Le code en orange est un hack pour Internet explorer pour effacer toutes les marges par défaut des réglages clients (les internautes qui visitent votre site)
Ensuite, le code à insérer dans la page html, pour créer l'image polaroïd :
| < <table align="center"> <tr> <td class="polar" align="center"> <font face="Verdana, Arial, Helvetica, sans-serif"> <img src="sal1.gif" alt="Commentaire" width="149px" height="128px" align="middle"> </font> </td> </tr> </table> |
La taille de l'image est importante, car c'est elle qui détermine les valeurs en % du padding du polaroïd.
Une utilisation possible de la photo polaroïd :
Voici une photo polaroïd vignette reliée à un popup avec la photo taille réelle. A la place d'une photo dans le popup, vous pouvez y mettre du texte ou ce qui se met dans une page html. Cliquez sur la vignette......
))
|
Voici le code pour réaliser ce lien à partir de la vignette :
<table align="center"> <tr> <td class="polar" align="center"> <font face="Verdana, Arial, Helvetica, sans-serif"> <a href="javascript:void(window.open('http://www.mon.fr/site/image1.jpg' ,'','resizable=no,location=no,menubar=no,scrollbars=no,status=no, toolbar=no,fullscreen=no,dependent=no,width=401,height=343, left=300,top=200'))"> <img alt="Alain" src="http://www.mon.fr/site/image2.jpg" width="100" border="0"> </a> </font> </td> </tr> </table> |
javascript:void(window.open : La fonction javascript qui va ouvrir le popup
class="polar" : L'appel à la classe css pour la mise en forme de la photo et qui formate la cellule <td>
| Dans le même esprit |
|---|
| < Précédent | Suivant > |
|---|
VLADO FOOTWEAR
Categories
- Apple
- Antivirus
- Education - Sciences
- Firefox Mozilla
- Google Univers
- Hoax informatiques
- Jeux
- Linux
- Live Messenger
- Logiciels utiles
- Map - Localisation
- Microsoft Univers
- Polices - Fonts
- Musiques - Vidéos
- Outils pour Blogs
- Religions
- Sites amusants
- Sites pour les enfants
- Sites utiles
- Tout pour les images
- Tutoriels Vidéos
- Web 2.0
- Webcam
- Widgets ou gadgets
- Windows Live Spaces
- Wallpapers
Live Spaces
S'abonner
Votre adresse email ici pour recevoir les nouveautés du site directement dans votre boite
Java et CSS
Générateurs
Tutoriaux
Nos Gadgets
Download
| Anti-Spyware |
| Plugin incontournables |
| Montage Vidéo |
| Retouche Images |
| Gestion du son |
| Editeurs HTML |
| Logiciels utiles |
| Les Benchmark |
