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. 

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

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>

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 ? 

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

Bonjour,

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