Partage

Un lien dans une image

11 janvier 2018 à 17:59:20

Bonjour à tous,

Je suis actuellement face à un problème : j'ai une grande image, dans laquelle j'aimerai intégrer des liens vers différents thèmes. C'est à dire que dans l'image, il y a écrit "Enfants", "Ados", et "Adultes" et j'aimerais que ces textes puissent servir de lien vers d'autres pages.

Ma première idée a été de découper l'image afin d'avoir :

De façon à mettre un lien sur les 3 parties "Enfants", "Ados" et "Adultes". "Partie haute" et "Partie basse" sont les restes de l'image, tout comme Droite et Gauche. 

J'ai donc fait : 

<div style="display: flex;">

<div><img src="img/accueil/gauche.jpg" style="width: 100%;" /></div>
			
<div style="display: flex; flex-direction: column; justify-content: flex-start;">
<div style="margin: 0px; padding: 0px;"><img src="img/accueil/haut.jpg" style="width: 100%;" /></div>
<div style="margin: 0px; padding: 0px;"><img src="img/accueil/enfants.jpg" style="width: 100%;" /></div>
<div style="margin: 0px; padding: 0px;"><img src="img/accueil/ado.jpg" style="width: 100%;" /></div>
<div style="margin: 0px; padding: 0px;"><img src="img/accueil/adulte.jpg" style="width: 100%;" /></div>
<div style="margin: 0px; padding: 0px;"><img src="img/accueil/bas.jpg" style="width: 100%;" /></div>
</div>
						
<div><img src="img/accueil/droite.jpg" style="width: 100%;" /></div>
		
</div>

Les problèmes sont : 

  • Sur Google Chrome : le redimensionnement est parfait, toutes les images s'affichent bien par rapport aux autres mais il y a une sorte de marge inséreée en dessous de "Partie haute", "Lien enfants", "Ados", "Adultes" et "Partie basse", ce qui provoque un décallage sur toute la colonne. Mais Gauche et Droite sont correctement alignés;
  • Sur Firefox : ici c'est n'importe quoi, Droite et Gauche ne font pas du tout la même taille, et la colonne avec "Partie haute", "Enfants", etc, affiche des images qui sont bien plus grandes, aucune image n'est à l'échelle par rapport aux autres.

J'ai donc essayé avec un tableau. Sur Firefox, nickel, sur Chrome, toujours des marges qui s'ajoutent, ou alors c'est le redimensionnement (avec le width: 100%) qui n'est pas précis et qui laisse des écarts entre les images.

J'ai commencé à chercher à rajouter des liens sur une image avec GD en php, mais je suis persuadé qu'il y a plus simple. :p

C'est pourquoi je me tourne vers vous, amis zéros, pour essayer de me sortir de ce pétrin !

Merci de m'avoir lu 

-
Edité par [Toxik] 12 janvier 2018 à 23:07:42

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
11 janvier 2018 à 18:33:11

Bonjour,

Pour information, il est possible de mettre des zones cliquables avec map et area sur une image

<img src="images/image.gif" usemap="#Nom" border="0">
<map name="Nom">
  <area shape="rect" coords="11,8,49,19" href="#">
</map>



Découvrez les Css avec la zonecss.fr
11 janvier 2018 à 19:29:52

Bonjour,

Tout d'abord merci beaucoup, je ne connaissais pas du tout ! 

Cette solution est la plus efficace, malheureusement je n'arrive pas à adapter le lien par rapport à la taille de l'image, même avec des %... Du coup avec un écran plus petit, ou plus grand, cela fausse tout ... Auriez-vous une idée d'une solution ? 

11 janvier 2018 à 19:40:51

Arg!

J'avais oublié ce détail. Désolé !

Il me semble avoir vue un truc la dessus dans ce forum ou celui alsacreations

mais j'ai pas de solution pour le moment.

-
Edité par AliasDmc 11 janvier 2018 à 19:46:07

Découvrez les Css avec la zonecss.fr
12 janvier 2018 à 23:09:25

Très bien, merci en tout cas de votre réponse ;)
30 avril 2018 à 22:42:16

Up si quelqu'un aurait une réponse !
1 mai 2018 à 10:31:46

Bonjour,

Il est possible d'avoir l'url images, pour faire des tests.

Découvrez les Css avec la zonecss.fr

Un lien dans une image

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown