Bonjour,
J'ai suis nouveau dans la programmation web, et j'essaye de m'entrainer au placement et à l'intégration d'image en me codant une bibliothèque de photos en HTML.
Actuellement je bute sur la création d'un effet sympa sur les "albums".
En gros je veux que mes "albums photos" soient regroupés en mosaique d'images sur la page, et que quand je clique sur l'une des photos de cette mosaique, je rentre dans la page de l'album, et une nouvelle mosaique des photos le concernant s'affiche.
Jusque là, j'ai réussi à le faire en utilisant des balises <TD> et <TR> pour faire les mosaiques. Les albums sont donc un tableau d'image, et chaque image a un lien href vers la page de l'album.
Désormais j'essaye de lui donner meilleure mine à ma mosaique. Et j'aimerai pour ça, que comme effet mouseover sur l'un des albums, un petit encadré assez foncé et presque opaque s'affiche sur la moitié inférieure de l'image d'album sur laquelle je passe, m'indiquant a l'intérieur le titre de l'album, et le nombre de photos à l'intérieur. Si il pouvait en plus avoir une petite transition sympa comme par exemple sortir du bas de l'image (donc apparaitre du bas vers le haut) ce serait tip top.
Pour ça, j'ai trouvé quelques tutos qui m'indiquaient des effets hover sympa en CSS, sauf que ça pose de gros problèmes avec mon tableau... Toutes les photos se superposent, ne sont plus centrées, etc...
Voici un extrait de mon code HTML pour la mosaique sur 4 albums sans aucun effet hover:
Pourriez-vous m'aider à comprendre où placer les divs et effets hover pour que mon tableau reste intact svp (enfin du moins si il faut virer le tableau, au moins conserver cet effet "mosaique d'image")?
Si ça a un intéret de le préciser pour vos conseils, j'utilise Dreamweaver en licence Etudiant, du coup je peux sans probleme attacher à ma feuille HTML5 une feuille CSS3.
Merci mille fois d'avance
Maxime
Modifié par mcochini (02 Oct 2015 - 18:50)
J'ai suis nouveau dans la programmation web, et j'essaye de m'entrainer au placement et à l'intégration d'image en me codant une bibliothèque de photos en HTML.
Actuellement je bute sur la création d'un effet sympa sur les "albums".
En gros je veux que mes "albums photos" soient regroupés en mosaique d'images sur la page, et que quand je clique sur l'une des photos de cette mosaique, je rentre dans la page de l'album, et une nouvelle mosaique des photos le concernant s'affiche.
Jusque là, j'ai réussi à le faire en utilisant des balises <TD> et <TR> pour faire les mosaiques. Les albums sont donc un tableau d'image, et chaque image a un lien href vers la page de l'album.
Désormais j'essaye de lui donner meilleure mine à ma mosaique. Et j'aimerai pour ça, que comme effet mouseover sur l'un des albums, un petit encadré assez foncé et presque opaque s'affiche sur la moitié inférieure de l'image d'album sur laquelle je passe, m'indiquant a l'intérieur le titre de l'album, et le nombre de photos à l'intérieur. Si il pouvait en plus avoir une petite transition sympa comme par exemple sortir du bas de l'image (donc apparaitre du bas vers le haut) ce serait tip top.
Pour ça, j'ai trouvé quelques tutos qui m'indiquaient des effets hover sympa en CSS, sauf que ça pose de gros problèmes avec mon tableau... Toutes les photos se superposent, ne sont plus centrées, etc...
Voici un extrait de mon code HTML pour la mosaique sur 4 albums sans aucun effet hover:
<table border="0" center>
<tr>
<td align="center">
<a href="../../albums/1.html">
<img src="images/1.jpg" style="border-color:#313131" border="3" width="35%" height="30%" alt=""/>
</a>
<a href="../../albums/2.html">
<img src="images/2.jpg" style="border-color:#313131" border="3" width="35%" height="30%" alt=""/>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="../../albums/3.html">
<img src="images/3.jpg" style="border-color:#313131" border="3" width="35%" height="30%" alt=""/>
</a>
<a href="../../albums/4.html">
<img src="images/4.jpg" style="border-color:#313131" border="3" width="35%" height="30%" alt=""/>
</a>
</td>
</tr>Pourriez-vous m'aider à comprendre où placer les divs et effets hover pour que mon tableau reste intact svp (enfin du moins si il faut virer le tableau, au moins conserver cet effet "mosaique d'image")?
Si ça a un intéret de le préciser pour vos conseils, j'utilise Dreamweaver en licence Etudiant, du coup je peux sans probleme attacher à ma feuille HTML5 une feuille CSS3.
Merci mille fois d'avance
Maxime
Modifié par mcochini (02 Oct 2015 - 18:50)