Image cliquable

Avec ce petit filtre vous allez pouvoir définir des zones cliquables en quelques secondes.

Une fois votre photomontage réalisé, lancez le filtre image cliquable; vous devez maintenant délimiter les zones cliquables point par point. Choisissez le type de forme que vous voulez dessiner (à gauche), puis commencez la sélection. Le clique droit annule les dernières actions, et le double clique termine la sélection, enfin cliquez sur valider dans la nouvelle fenêtre.
Pour enregistrer les coordonnées, cliquez sur la petite disquette et donnez un nom au fichier. Vous pouvez laisser l'extention au format .map ou la mettre en .txt, peu importe, nous allons simplement copier les infomations.

En simplifiant la sélection à des rectangles voila ce que vous devriez avoir dans le fichier généré par gimp:

<img src="images/image.jpg" width="1000" height="335" 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:John -->
<area shape="rect" coords="1,3,209,332"    nohref="nohref" />
<area shape="rect" coords="213,3,391,332"  nohref="nohref" />
<area shape="rect" coords="395,3,619,332"  nohref="nohref" />
<area shape="rect" coords="624,4,798,331"  nohref="nohref" />
<area shape="rect" coords="803,4,998,331"  nohref="nohref" />
</map>

Il faudra modifier le nohref en href, et indiquer un lien:

<img src="images/image.jpg" width="1000" height="335" 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:John -->
<area shape="rect" coords="1,3,209,332"    href="lien1.html" />
<area shape="rect" coords="213,3,391,332"  href="lien2.html" />
<area shape="rect" coords="395,3,619,332"  href="lien3.html" />
<area shape="rect" coords="624,4,798,331"  href="lien4.html" />
<area shape="rect" coords="803,4,998,331"  href="lien5.html" />
</map>

Voila ce que cela donne avec les contours détaillés:

Ensuite il peut être intéressant de rajouter une touche de javascript pour permettre d'afficher une image différente au survol de la souris.

<script language="JavaScript" type="text/javascript">

  function change_image(image_name) 
{document.mouseover.src = image_name}

  function reset_image()
{document.mouseover.src = "emplacement de l'image de base ici";}

</script>

Ensuite il faudra modifier un peu le code fourni par Gimp.
Ancien code:

<img src="images/image.jpg" width="1000" height="335" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="1,3,209,332"    href="lien1.html" />
...
</map>

Nouveau code: ajout du mouseover. (nom arbitraire)

<img src="images/image.jpg" width="1000" height="335" border="0" usemap="#mouseover_map" name="mouseover" />
<map name="mouseover_map">
<area shape="rect" coords="1,3,209,332"    href="lien1.html" onMouseOver = "change_image('votre image de survole')" 
onMouseOut = "reset_image()" onClick="return false" title="Un petit commentaire popup ici" />
...
</map>

Nous allons prendre image de base et appliquer un flou glaussien x20.
Nous allons ensuite mettre les sculptures sur des calques individuels et flouter celle que l'on ne survole pas.
Le grand Jules César de Nicolas COUSTOU 1700
Spartacus de Denis Foyatier 1830.
L'empereur Auguste. -20 Av JC.
Sa nation a perdu la guerre.
Voila le montage final. Mais attention ces bouts de code ne semblent pas validés par le W3C... Mais bon ça reste joli.

Slice/Tranche

Ce filtre découpe l'image en fonction des guides tirés et génère un code valide prêt à l'emploi.

Cette image sera utilisée par défaut.
Celle-ci apparaitra lors du survole des zones.
On verra brièvement celle-là quand on cliquera sur un des liens.
L'ordre des calques est primordial! Le calque en bas de la pile sera votre image par défaut, celui du dessus sera l'image que l'on verra au survol des liens, et celui du haut sera affiché au moment de cliquer.
Tirage des règles pour indiquer les zones à découper. On en ajoutera aussi à 1px des bords, car les zones cliquables doivent se trouver entre 2 règles.
Il ne vous reste plus qu'à lancer le filtre et à activer le java script en cliquant sur Yes. Vous choisissez un répertoire de sortie et vous validez.

Voila que ce que donne le script slice. Idéal pour faire un menu dynamique en 5min.