Lien Hypertexte

gb2525 · 21 Décembre 2014

Bonjour à tous,

je suis en train de faire un site.

Sur ma première page j'ai affiché une photo en arrière plan suivant ce tutoriel :

http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Cela a fonctionné parfaitement !

Par contre :

je désire créer des liens hypertextes sur 3 zones précises de ma photo d'arrière plan ;

et

je veux que suivant les tailles d'écran ces liens restent toujours fixés sur ces zones

( et ne se déplacent donc pas sur un autre endroit de la photo ).

Auriez-vous une solution ?

Merci d'avance pour vos réponses et très bon dimanche, Bianca.

gb2525 · 22 Décembre 2014

Pas d'idée ?

**Dan** · 22 Décembre 2014

Juste une idée...

As-tu essayé de mettre cette image dans une <div> dont la position est relative et les liens hypertexte en position absolue exprimée en pourcentage dans cette <div> ?

Zlika · 22 Décembre 2014

Bonsoir Bianca,

Faudrait voir la page mais a priori je n'ai pas de solution directe, sauf à passer par de l'area map => ce lien devrait vous aider

Cdt

**Dan** · 22 Décembre 2014

Je pense que ceci est le plus simple...



<style>

#conteneur {

    border: 1px solid red;

    height: 200px;

    width: 200px;

    overflow: hidden;

    position: relative;

}


#item {

    border: 1px dashed red;

    position: absolute;

    left: 40%; top:30%

}

</style>


<div id="conteneur">

    <div id="item">TEXTE</div>

</div>

Je viens de tester, cela fonctionne

Voici ce que ça donne :

gb2525 · 22 Décembre 2014

Merci je fais le test et je reviens vers toi !

gb2525 · 22 Décembre 2014

Rebonsoir Dan,

je viens d'essayer mais, suivant la taille de l'écran, les liens changent de zones sur la photo ( voici mon code ci-dessous ).

Et merci Zlika pour la page sur "jQuery RWD Image Maps", et tu penses qu'avec cette solution la zone cliquable restera sur la zone que j'aurai défini quelque soit la taille de l'écran ?



<!DOCTYPE html>

<html class="">

  <head>

    <meta content="text/html; charset=UTF-8" http-equiv="content-type"></meta>

    <title>


    </title>


<style>

#conteneur {

    border: 1px solid red;

    height: 200px;

    width: 200px;

    overflow: hidden;

    position: relative;

}


#item {

    border: 1px dashed red;

    position: absolute;

    left: 40%; top:30%

}


img{

    position:fixed;

    top:0;

    left:0;

    z-index:-1;

}


</style>



  </head>

    <body>

      <img src="../photos/2.jpg" style="width: 100%; height: 100%; left: 0px; top: -177.5px;"></img>

      <script type="text/javascript" src="../script/jquery.js"></script>

      <script type="text/javascript" src="../script/background.js"></script>


    <div id="conteneur">

      <div id="item">

       <div style="width: 100%; height: 100%;">

        <a href="qui-sommes-nous.php">TEXTE1</a><BR><BR>

        <a href="nos-conditions.php">TEXTE2</a><BR><BR>

        <a href="nos-objets.php">TEXTE3</a></td>

      </div>        

     </div>    

    </div>


  </body>

</html>

Zlika · 22 Décembre 2014

"jQuery RWD Image Maps" je teste début janvier, mais bon la source est !

Pour le reste l'idée de Dan est à travailler si ta css définit des tranches de responsiv ! L'idée de Dan passerait plutôt par du html5 et du jquery j'ai pas investigué la chose.

area map est très précis et normé !

En fait ça dépend de la mise en page !

Zlika

**captain_torche** · 22 Décembre 2014

Je viens de faire un test et je crois bien que ça n'est pas possible du tout : http://jsfiddle.net/13vz8Ly4/

En fonction de la taille de la fenêtre, l'image de fond sera coupée sur les bords ou le haut et le bas, on ne peut pas caler du contenu précisément sur l'image.

Si je comprends bien ton message, tu cherches à faire en sorte que ton interface soit en plein écran, et c'est une mauvaise solution : sur des écrans larges, ton contenu serait difficilement lisible.

Une image de fond comme celle-ci ne doit servir qu'à meubler le fond, l'interface en elle-même étant complètement indépendante. Les exemples fournis sur le lien d'alsacreations le montrent bien.

SStephane · 23 Décembre 2014

https://github.com/stowball/jQuery-rwdImageMaps

C'est comme ça que je fais au cas ou

Connexion

Lien Hypertexte

Sujets conseillés

gb2525

gb2525

Dan

Zlika

Dan

gb2525

gb2525

Zlika

captain_torche

SStephane

Veuillez vous connecter pour commenter

Parcourir

Activité