Difference between revisions of "image"
(%s = base?var_contextuelles et non ip:port) |
m (plus léger (explication %macro en triple) ; s/base/mybase/ pour moins de confusion entre le dir de base bases et base…) |
||
Line 1: | Line 1: | ||
{{DISPLAYTITLE:Inserting images in notes}} | {{DISPLAYTITLE:Inserting images in notes}} | ||
{{languages|Images}} | {{languages|Images}} | ||
− | Individual and | + | Individual and main notes in GeneWeb can contain links to images or direct images. Here are the different possibilities using HTML: |
− | * text link to an image: | + | * text link to an image: {{c|1=<a href="%sm=IMH;s=image.jpg">text link</a>}} |
− | * direct image: <code><img src="%sm=IM;s= | + | * direct image: <code><img src="%sm=IM;s=image.jpg" title="mouseover description" alt="alternative description"></code> |
* button image: <code><a href="%sm=IMH;s=full-image.jpg"><img src="%sm=IM;s=thumb-image.jpg"></a></code> | * button image: <code><a href="%sm=IMH;s=full-image.jpg"><img src="%sm=IM;s=thumb-image.jpg"></a></code> | ||
− | * text link to image maps: <code><a href="%sm=SRC;v= | + | * text link to image maps: <code><a href="%sm=SRC;v=file">text link or button image</a></code> |
− | + | GeneWeb replace the [[macros]] {{c|%s}} by the appropriate URL keeping current base/template/language parameters and the {{c|1=s=}} parameter refers to folder {{c|bases/src/mybase/images/}} (for example for the base {{c|Grimaldi}}, in {{c|bases/src/grimaldi/images/}}). | |
− | + | To work the HTML tag {{c|img}} must present in {{c|bases/tags.txt}} (see [[tags]]). | |
− | In the case of image maps, | + | == Image maps example == |
+ | In the case of image maps, gwd looks for {{c|bases/src/mybase/file.txt}}, replace macros by their values, and passes the resulting HTML back to the browser. | ||
− | |||
An example of such a text file is: | An example of such a text file is: | ||
<pre> | <pre> | ||
Line 50: | Line 50: | ||
</pre> | </pre> | ||
− | This example, opens an image file named <code> | + | This example, opens an image file named <code>bases/src/mybase/images/grande-ile.jpg</code> using the HTML <code><map></code> named <code>test-chausey</code>. |
− | In this <code><map></code>, several clickable areas have been defined (using the '''Mapedit''' tool for instance), and with each area is associated a <code>href</code> HTML command. Since the <code> | + | In this <code><map></code>, several clickable areas have been defined (using the '''Mapedit''' tool for instance), and with each area is associated a <code>href</code> HTML command. Since the <code>bases/src/mybase/grande-ile.txt</code> file has been processed by '''gwd''', occurrences of '''%s''' have been replaced by the appropriate address. |
Through the example above, one can see that the <code>href</code> command can be any valid GeneWeb URL. | Through the example above, one can see that the <code>href</code> command can be any valid GeneWeb URL. |
Revision as of 21:34, 24 October 2015
Language: | English • français |
---|
Individual and main notes in GeneWeb can contain links to images or direct images. Here are the different possibilities using HTML:
- text link to an image:
<a href="%sm=IMH;s=image.jpg">text link</a>
- direct image:
<img src="%sm=IM;s=image.jpg" title="mouseover description" alt="alternative description">
- button image:
<a href="%sm=IMH;s=full-image.jpg"><img src="%sm=IM;s=thumb-image.jpg"></a>
- text link to image maps:
<a href="%sm=SRC;v=file">text link or button image</a>
GeneWeb replace the macros %s
by the appropriate URL keeping current base/template/language parameters and the s=
parameter refers to folder bases/src/mybase/images/
(for example for the base Grimaldi
, in bases/src/grimaldi/images/
).
To work the HTML tag img
must present in bases/tags.txt
(see tags).
Image maps example
In the case of image maps, gwd looks for bases/src/mybase/file.txt
, replace macros by their values, and passes the resulting HTML back to the browser.
An example of such a text file is:
<!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 : <a href="http://www.bretagne.iufm.fr/mentiontic19992000/productions/marques/pmarques/DATA/avpropos.htm"> www.bretagne.iufm.fr </a>). </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>
This example, opens an image file named bases/src/mybase/images/grande-ile.jpg
using the HTML <map>
named test-chausey
.
In this <map>
, several clickable areas have been defined (using the Mapedit tool for instance), and with each area is associated a href
HTML command. Since the bases/src/mybase/grande-ile.txt
file has been processed by gwd, occurrences of %s have been replaced by the appropriate address.
Through the example above, one can see that the href
command can be any valid GeneWeb URL.