Bonjour,
Je cherche à mettre des liens sur une image de footer, je ne sais pas comment m'y prendre et je viens vers vous pour avoir des pistes. J'utilise Boostrap entre autres.
Si jamais il faut effectuer une nouvelle découpe de l'image, ce n'ai pas un problème, l'image à été réalisé via Illustrator. pour l'instant l'image est en un seul fichier.
Pour le moment, voici le code, ultra simpliste, je viens de m'y mettre et l'image du footer :
HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <footer id="footer" class="halfscreen background-footer"> </footer>
CSS :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 .background-footer { background-image: url('../../images/bg/6footer/bg.png'); background-position: top; background-repeat: no-repeat; background-size: cover; }
L'image :
La problématique est simple, une image, une section, quatres liens,
Comment les intégré proprement et responsive ?
J'ai fouiné une piste : https://github.com/stowball/jQuery-rwdImageMaps
Si quelqu'un sais comment définir les coordonnés de mon images. J'avoue ne pas comprendre comment rendre ça responsive.
Merci, au plaisir de vous lire.
EDIT ------
J'ai ça pout l'instant, il me manque plus que la gestion du responsive ... plus que ... Une idée ?
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 <footer> <div> <img src="images/bg/6footer/bg.png" usemap="#footer"> <map name="footer"> <area href="#" shape="poly" coords="821,83,846,61,948,81,951,124,838,112"> <area href="#" shape="poly" coords="956,127,1054,121,1088,144,1067,169,956,166"> <area href="#" shape="poly" coords="864,182,835,210,858,228,951,220,954,181"> <area href="#" shape="poly" coords="1046,234,1071,258,1049,284,955,269,956,228"> </map> </div> </footer>
Partager