Liens sur une image de background

**Go0ners** · 27/07/2016, 19h04

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 :

Nom : bg-web.png
Affichages : 164
Taille : 171,5 Ko

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>

**mathieu** · 28/07/2016, 08h04

Un effet responsif est un effet qui adapte l'affichage pour que la page soit accessible avec des écran moins larges.
Donc pour votre page, il faudrait d'abord réfléchir à ce que vous souhaitez présenter sur un petit écran.