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
    Homme Profil pro
    Etudiant
    Inscrit en
    juillet 2016
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Etudiant

    Informations forums :
    Inscription : juillet 2016
    Messages : 2
    Points : 2
    Points
    2
    Par défaut 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 :

    Nom : bg-web.png
Affichages : 42
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>

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    7 397
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 7 397
    Points : 11 593
    Points
    11 593
    Par défaut
    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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 527
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 527
    Points : 34 038
    Points
    34 038
    Par défaut
    Bonjour,

    en faisant une RECHERCHE rapide
    on trouve :


    A tester...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Lien sur une image
    Par Antoon dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 21/05/2007, 10h24
  2. Pb de liens sur une image avec firefox
    Par potao dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 20/04/2007, 13h08
  3. Plusieurs liens sur une image?
    Par spirit69 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 03/08/2006, 10h55
  4. [HTML] Mettre un lien sur une image
    Par mavina dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 24/04/2006, 16h34
  5. lien sur une image
    Par DiverSIG dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 29/03/2006, 15h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo