Aller au contenu

Lien Hypertexte


gb2525

Sujets conseillés

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.




Lien vers le commentaire
Partager sur d’autres sites

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> ?


Lien vers le commentaire
Partager sur d’autres sites

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 wink.gif



Voici ce que ça donne :


post-1-0-84602500-1419268695_thumb.jpg


Lien vers le commentaire
Partager sur d’autres sites

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>
Lien vers le commentaire
Partager sur d’autres sites

"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


Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...