Image mappée comme header

[TheDirector]

Bonjour,
savez-vous comment mettre des liens sur le header comme ici : http://www.goldheartofficiel.com/ ?

Merchi ^^

[Jack&Rose]

Bonjour,

Il me semble bien (mais je n'ai pas une grande connaissance en la matière) qu'il s'agisse d'une image "linkée". C'est-à-dire que l'on crée une image sur un logiciel graphique et qu'on sélectionne des parties pour y ajouter un lien. Ici, je dirais que ça ressemble plus à une infobulle qu'à un lien, d'ailleurs.

J'avais déjà essayé de faire ça, sans succès, car c'est assez compliqué. Il faut utiliser les coordonnées de l'image, ce sont des area map. Il existe des générateurs en ligne, comme là (je ne sais pas si je suis autorisée à poster un lien comme ça, désolée sinon).

Mais il doit exister une autre solution plus simple, je pense.

[TheDirector]

Merci beaucoup ^^
En effet, si y a plus simple, je prend !

[Ea]

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif

[TheDirector]

Problème toujours d'actualité !!

[Ea]

Le header est mis en fond.

Et il y a une grande image transparente "mappée" ( voir le tutoriel ), qui :

• quand on survole une zone donnée, est remplacée par une autre image ( par exemple : https://nsm08.casimages.com/img/2013/03/10/13031004370215192710953108.png )
  
• quand on ressort de la zone, est remplacée à nouveau par l'image transparent.

voici un exemple pour faire cela avec gimp :

• Je veux mettre un header :
  
  https://i.imgur.com/xQsUG0i.jpg
  
  et que le monstre dise "salut" et ait un lien vers google quand on le survole.
  
  
• Premièrement, charger l'image :
  
  https://i.imgur.com/vnvrc4a.png
  https://i.imgur.com/LTyoUCQ.png
  https://i.imgur.com/o6EfUvr.png
  
  
• Ensuite faire l'image transparente :
  
  https://i.imgur.com/NTBlUPB.png ( si elle n'était pas déjà transparente )
  https://i.imgur.com/xpaFotM.png
  https://i.imgur.com/lPdRULF.png ( cliquer sur l'oeil )
  https://i.imgur.com/pJTO4AZ.png
  https://i.imgur.com/XVQyBeq.png ( aller dans Exporter... )
  https://i.imgur.com/xosJXoL.png
  https://i.imgur.com/eeLGE4B.png
  
  Puis héberger l'image :
  
  https://i.imgur.com/ExXpFzN.png
  https://i.imgur.com/z8mXLSz.png
  https://i.imgur.com/wAIYEEw.png
  https://i.imgur.com/yBMz1dI.png
  
  Elle est disponible à l'adresse : https://i.imgur.com/6X4xGKs.png
  
  
• Ensuite faire une image avec la bulle de "salut" :
  
  https://i.imgur.com/BpxGY0y.png
  https://i.imgur.com/N2PkQn0.png
  https://i.imgur.com/0ZYqvwL.png
  https://i.imgur.com/jgrSKQ5.png
  https://i.imgur.com/KgzKZwv.png
  https://i.imgur.com/AjtyTVn.png
  
  Elle est disponible à l'adresse : https://i.imgur.com/hKyPxYm.png
  
  
• Finalement, faire la "carte" :
  
  https://i.imgur.com/4ZCKJjA.png
  
  
• Sélectionner la zone souhaitée :
  
  https://i.imgur.com/QHZVp0U.png
  
  
• Dans l'onglet de lien, mettre un lien vers où vous voulez :
  
  https://i.imgur.com/aCOOyNl.png
  
  
• Dans l'onglet javascript, mettre à onMouseover ceci :
  
  

  Code:

  area_change_img(this,'http://i.imgur.com/hKyPxYm.png')

  avec l'adresse entre ' qui est l'adresse d'image avec la bulle.
  
  À onMouseout mettre ceci :
  
  

  Code:

  area_change_img(this,'http://i.imgur.com/6X4xGKs.png')

  avec l'adresse entre ' qui est l'adresse de l'image transparente.
  
  Et ensuite appuyer sur OK :
  
  https://i.imgur.com/FQAJRsk.png
  
  
• Une fois que vous avez fait toutes vos zones spéciales, afficher la source du mappage :
  
  https://i.imgur.com/2nDAHYU.png
  https://i.imgur.com/Eq7T4NA.png
  
  Cela donnera quelque chose de ce genre :
  
  

  Code:

  <img src="Untitled" width="835" height="158" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:root -->
<area shape="rect" coords="10,29,86,150" onmouseover="area_change_img(this,&apos;http://i.imgur.com/hKyPxYm.png&apos;)" onmouseout="area_change_img(this,&apos;http://i.imgur.com/6X4xGKs.png&apos;)" href="http://www.google.com" />
</map>

  Les commentaires on peut les retirer, et il faut remplacer Untitled par l'adresse de l'image transparente :
  
  

  Code:

  <img src="http://i.imgur.com/6X4xGKs.png" width="835" height="158" border="0" usemap="#map" />

<map name="map">
<area shape="rect" coords="10,29,86,150" onmouseover="area_change_img(this,&apos;http://i.imgur.com/hKyPxYm.png&apos;)" onmouseout="area_change_img(this,&apos;http://i.imgur.com/6X4xGKs.png&apos;)" href="http://www.google.com" />
</map>

  Ceci c'est le code de l'image transparente mappée, qu'il faudra que vous vous arrangiez afin qu'elle soit au dessus de votre header.
  
  Ensuite également pour que ça fonctionne, il faut mettre ce code javascript sur toutes les pages ( voir ce tutoriel ) :
  
  

  Code:

  function area_change_img(a, b) {
  $('img[usemap="#' + $(a).closest("map").attr("name") + '"]').attr("src", b)
};

  
  Voilà un exemple sur une page html avec ce qu'on a fait :
  http://www.maonyn.com/h28-test-map-img
  
  Sinon vous voulez en mettre plusieurs différentes sur la même page, il faudra modifier : "#map" et "map" en changeant map par quelque chose d'autre ( map1, map2, map3, ... par exemple ).

Cordialement.

[Ea]

Je déplace ce sujet en archive, vu l'absence de réponse de l'auteur.

La solution a été testée et devrait fonctionner.


Cordialement.