Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Webdesign & Ergonomie Discussion :

Liens sur une image de background


Sujet :

Webdesign & Ergonomie

  1. #1
    Candidat au Club
    Liens sur une image de background
    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>

  2. #2
    Expert éminent sénior
    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.

  3. #3
    Invité
    Invité(e)
    Bonjour,

    en faisant une RECHERCHE rapide
    on trouve :


    A tester...

###raw>template_hook.ano_emploi###