Insérer des images dans les notes

From GeneWeb
Revision as of 20:09, 31 October 2015 by Henri83 (Talk | contribs) (Inserting images (fr) pass 1)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
150px-Geographylogo svg.png Language: English • français

Les notes individuelles, et les notes générales de la bas peuvent des liens vers des images contenir ou directement des images. Voici les diverses possibilités offertes pas la combinaison de HTML et GeneWeb :


  • lien textuel vers une image : <a href="%sm=IMH;s=image.jpg">lien textuel</a>
  • image directe : <img src="%sm=IM;s=image.jpg" title="mouseover description" alt="alternative description">
  • image boutton : <a href="%sm=IMH;s=full-image.jpg"><img src="%sm=IM;s=thumb-image.jpg"></a>
  • lien textuel vers une image map: <a href="%sm=SRC;v=file">lien textuel vers une image</a>

GeneWeb remplacera les Template:maMacros/fr telles que %s par la valeur appropriée pour atteindre votre serveur, et le paramètre de s= pointe vers le dossier bases/src/mabase/images/ où se trouve l'image recherchée. Le nom du fichier fourni doit inclure l'extension (.jpg, .png.

Le tag HTML img doit être présent dans la liste des tags acceptés par GeneWeb mémorisés dans le fichier bases/tags.txt.

Examlpe d'Image contenant une "image map"

Dans le cas des images avec "image maps", permettant de désigner dans l'image des zones cliquables, la commande GeneWeb n'est plus m=IMH mais m=SRC, et le paramètre v= désigne un fichier .txt qui réside dans le dossier bases/src/mabase/. Attention, pour le paramètre v=, il ne faut pas fournir l'extension .txt!! Dans le fichier .txt désigné, on trouvera du code HTML et quelques macros GeneWeb comme le monrte l'exemple qui suit :

Contenu du fichier bases/src/mybase/grande-ile.txt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<title>
Grande Ile
</title>
<html>
%rcss
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<table border="1" width="100%" height="60">
<tr align="left">
<td width="100%" height="16" bgcolor="#008080"><p align="center">
<font face="Garamond" color="#FFFFFFF"><big><big><strong><big>
La Grande Ile</font></big></strong></big></big></font>
</td>
</tr>
</table>
<p><img SRC="%sm=IM;s=grande-ile.jpg" usemap="#test-chausey" border="0"> <br>
<font size="-1"><em>(Carte construite à partir de celle disponible sur le site réalisé par P. Marques)
</em></font>
<hr>
</p>
En déplaçant le curseur sur les lieux significatifs de l'île, vous verrez (peut être!) apparaitre son nom, et un click vous emmènera vers une description plus détaillée et des photos.

<map name="test-chausey">
	<area shape="poly" coords="206,272,212,255,241,254,240,291,217,290" href="%sm=NG;n=le+vieux+fort" alt="Le Vieux Fort">
	<area shape="poly" coords="132,75,170,78,168,110,132,111" href="%sm=NG;n=le+semaphore" alt="Le S̩maphore">
	<area shape="rect" coords="345,307,433,347" href="%sm=SRC;v=plan-pointe-du-phare">
	<area shape="rect" coords="359,194,485,213" href="%sp=la+maison;n=pilet">
</map>
</body>
</html>

Appel de ce fichier dans les notes d'un personnage :

<a href="%sm=SRC;v=grande-ile">une photo cliquable de l'ile</a>

Cet appel recherche le fichier bases/src/mybase/grande-ile.txt traite els macros GeneWeb et envoie l'ensemble à votre navigateur. celui ci détecte la demande

<img SRC="%sm=IM;s=grande-ile.jpg" usemap="#test-chausey" border="0">

qui a été transformée en

<img SRC="localhost:2317/mabase?sm=IM;s=grande-ile.jpg" usemap="#test-chausey" border="0">

Cette image fait appel au tag HTML <usemap #test-chausey> qui définit des zones de l'image auxquelles sont associées des URL (avec un outil comme Mapedit par exemple). Là encore, avant d'envoyer le résultat à votre navigateur, GeneWeb aura transformé les lignes

<area shape="rect" coords="345,307,433,347" href="%sm=SRC;v=plan-pointe-du-phare">

en

<area shape="rect" coords="345,307,433,347" href="localhost:23127/mabase?m=SRC;v=plan-pointe-du-phare">

et un click sur la zone définie provoquera un nouvel appel à GeneWeb (une nouvelle image en l'occurence, mais les autres ligres du <ni-owiki><usemap></nowiki> appellent des eprsonnages.

Notez que grâce au traitement effectué par GeneWeb, et la macro%s, ces fichiers, et la base correspondantes peuvent s'exécutre sur n'importe quel serveur, local ou distant!!


Through the example above, one can see that the href command can be any valid GeneWeb URL.