Liens sur un background

HFSJ -  
Bonjour,

je n'arrive pas à mettre un background avec des liens cliquables dessus,
http://croissantandtea.com/testaccueil/
Je souhaite faire exactement comme ce qui est fait sur cette image, soit, mettre des liens sur les drapeaux dans un background, seulement j'ai beau regarder les tutoriaux sur internet je n'y comprends pas grand chose...
Merci d'avance à tous ! :)

8 réponses

  1.  bg62 Modérateur
    cherche du côté de " mapping " ...
    ici c'est bien le cas : une image avec un mapping dedans pour diriger ... 
    <map name="Map" id="Map">
  <area shape="poly" coords="504,530,666,533,670,580,784,590,782,443,726,436,725,390,506,391" href="http : / / fr .croissantandtea.com" target="_blank" />
  <area shape="poly" coords="860,533,1032,537,1036,584,1149,594,1146,446,1092,438,1090,386,864,384" href="http : / / en .croissantandtea.com" target="_blank" />
</map>

    pas tip top mais bon ;)
    1. HFSJ Auteur
      Faire un mapping sur un background donc ? Étant donné que j'ai fais ça sur dreamweaver en effet c'est pas le top non plus mais c'est ce qu'il y avait de plus précis apparemment !
      Tu connaîtrais un code à faire pour arriver au même résultat que sur ce que j'ai fais sur cette page ?
      1. graffx Contributeur
        De memoire, sur dreamwaver il y a cette fonction, selectionne ton image en cliquant dessus et dnas les propriétés de bas de page en bas il y a une icone qui te permettra de faire un contour point par point de chaque image pour y ajouter un lien.

        Ca permet par exemple de mettre un lien sur chaque region d'une carte de france.
      2. HFSJ Auteur
        C'est justement ce que j'ai fais sur le cas présenté ci-dessus, merci en tout cas !
        Seulement, ça ne marche pas sur un background, Dreamweaver n'a pas cette fonction, en bas rien ne s'affiche, j'ai beau tout essayé rien n'y fait... :/
      3. graffx Contributeur
        Non sur un background, a moins peut etre d'utiliser css et javascript, tu ne peux pas, que sur une image propre.
      4. bg62 Modérateur
        mais dans l'exemple, l'image n'est PAS en background !!!
        elle est déclarée ( scr ..) dans le body et le mapping est fait dessus !!!!!!!
        en plus : quel intéret de mettre une telle page, vierge de tout comme index, pour mettre derrière du wordpress avec une foule de widgets ... niveau ref c'est nul :)
      5. HFSJ Auteur
        On va créer deux portails : un en anglais et un en français. Cette page sert juste de redirection première en gros... Après c'est mon choix ! Du coup comment je pourrai faire pour centrer l'image et créer ce simple index ? Utiliser CSS & Javascript ? Quel type de balise je dois utiliser ?
    2. graffx Contributeur
      Plusieurs solutions relativement simple, en voici une, c'est pas la plus classe mais bon.

      Tu créés une image vide sur fond transparent, que tu positionnes avec css par dessus tes deux boutons et tu leurs donnes le lien.

      1. HFSJ Auteur
        J'ai fais cque tu as dis ! Seulement, quel code css je dois faire pour mettre mon image (sans les drapeaux) en background ?
        J'ai essayé cette balise mais ça marche pas... :
        #background {
        background: url(http://www.croissantandtea.com/img/body.jpg) no-repeat;
        width: 1600px;
        height: 1142px;
        left: 50%;
        top: 50%;
        position: absolute;
        margin: -(1600px / 2) 0 0 -(1142px / 2) ;

        }
        2. graffx Contributeur
          Le probleme est que y' a plus ta page avec les drapeaux.

          Sinon tu refais ce que tu avais, mais au lieu d'ajouter deux drapeaux par dessus ton background, tu les ajoutes au background. Les drapeaux doivent faire partie du background, de la meme image. Ensuite tu ajoutes deux images transparentes par dessus le background au niveau des drapeaux et tu leur mets les liens FR ENG. En cliquant sur les images transparentes on aura l'impression de cliquer sur les drapeaux.
          1. HFSJ Auteur
            tu peux me donner CSS fiable pour mettre mon image en background et la centrer ensuite? En sachant que l'image est la suivante :
            http://croissantandtea.com/img/goodsize.jpg
            c'est là dessus que je galère, après pour le reste je pourrais le faire sans difficulté :) merci en tout cas
            1. bg62 Modérateur
              un exemple à adapter: 
              body { 
margin : 0; 
padding : 0; 
background : url(img/goodsize.jpg) center no-repeat fixed; 
background-color : #444444; 
  -webkit-background-size: cover; /* pour Chrome et Safari */ 
  -moz-background-size: cover; /* pour Firefox */ 
  -o-background-size: cover; /* pour Opera */ 
  background-size: cover; /* version standardisée */ 
font-family : arial, helvetica, sans-serif; 
color : #ffffff; 
font-size : 0.9em; 
line-height : 1.2em; 
letter-spacing : 0.05em; 
}

              mais ce n'est pas comme ça que tu auras ton 'mapping" ... :)
          2. HFSJ Auteur
            Le seul petit hic :
            www.croissantandtea.com/img/pb.jpg
            Je vois pas le "croissant", et je sais pas comment faire pour faire en sorte qu'on puisse le voir non plus en modifiant le CSS... Je m'y connais pas trop comme je l'ai déjà dis !
            Après pour coller les drapeaux ce que je peux faire c'est prendre les deux drapeaux et les coller avec un fond transparent sur le "background" "goodsize", non ?
            Merci pour tout encore !

            Discussions similaires

            Retrouver liens copiés sur le téléphone
            SAMA

            2 réponses
            Copier un lien instagram
            alaurore

            7 réponses
            lien copié presse papier smartphone Samsung
            luckygirl63

            3 réponses
            ne pas utiliser la souris mais le clavier
            isabela

            32 réponses