Jump to content

Lien Hypertexte


Recommended Posts

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.




Link to post
Share on other 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> ?


Link to post
Share on other 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


Link to post
Share on other 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>
Link to post
Share on other 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


Link to post
Share on other 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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...