Difference between revisions of "image"

From GeneWeb
Jump to: navigation, search
m
(%s = base?var_contextuelles et non ip:port)
Line 1: Line 1:
 
{{DISPLAYTITLE:Inserting images in notes}}
 
{{DISPLAYTITLE:Inserting images in notes}}
 
{{languages|Images}}
 
{{languages|Images}}
 +
Individual and general notes in GeneWeb can contain HTML links to images or direct images. Here are the different possibilities:
 +
* text link to an image: <code><a href="%sm=IMH;s=image-file-name.jpg">displayed text</a></code>
 +
* direct image: <code><img src="%sm=IM;s=full-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>
 +
* text link to image maps: <code><a href="%sm=SRC;v=full-image">displayed text or button image</a></code>
  
It is possible to insert links to images or direct images within notes. This is achieved by inserting in the body of the note the following command (verify that the corresponding HTML commands are present in the tags.txt file - see [[Tags]]):
+
The HTML tag {{c|img}} must present in {{c|bases/tags.txt}} (see [[tags]]).
  
* link to an image: <code><a href="%sm=IMH;s=image-file-name.jpg">displayed text</a></code>
+
'''gwd''' reads those commands and replaces the [[macros]] {{c|%s}} by the appropriate URL. The {{c|1=s=}} parameter refers to images in {{c|GeneWeb-Bases/src/base/images/}} folder. For exemple for the base {{c|Grimaldi}}, in {{c|bases/src/grimaldi/images/}}.
* direct image : <code><img SRC="%sm=IM;s=full-image.jpg"></code>
+
* button image: <code><a href="%sm=IMH;s=full-image.jpg"><img SRC="%sm=IM;s=vignette-image.jpg"></a></code>
+
* clickable image: <code><a href="%sm=SRC;v=full-image">displayed text or button image</a></code>
+
  
'''gwd''' reads those commands and replaces '''%s''' by the appropriate server address (localhost:2317 most often).
+
In the case of image maps, '''gwd''' looks for the file {{c|full-image.txt}} in {{c|GeneWeb-Bases/src/base}}, scans the corresponding text, replacing '''%''' macros by their values, and passes the resulting HTML back to the browser.  
Images designated by the '''s=''' parameter are found in the <code>GeneWeb-Bases/src/base/images</code> folder.
+
 
+
In the case of clickable images, '''gwd''' looks for the file '''full-image.txt''' in <code>GeneWeb-Bases/src/base</code>, scans the corresponding text, replacing '''%''' macros (see [[Macros/fr|Macros]]) by their values, and passes the resulting HTML back to the browser.  
+
  
 +
== Image maps example ==
 
An example of such a text file is:
 
An example of such a text file is:
 
<pre>
 
<pre>

Revision as of 22:21, 24 October 2015

150px-Geographylogo svg.png Language: English • français

Individual and general notes in GeneWeb can contain HTML links to images or direct images. Here are the different possibilities:

  • text link to an image: <a href="%sm=IMH;s=image-file-name.jpg">displayed text</a>
  • direct image: <img src="%sm=IM;s=full-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=full-image">displayed text or button image</a>

The HTML tag img must present in bases/tags.txt (see tags).

gwd reads those commands and replaces the macros %s by the appropriate URL. The s= parameter refers to images in GeneWeb-Bases/src/base/images/ folder. For exemple for the base Grimaldi, in bases/src/grimaldi/images/.

In the case of image maps, gwd looks for the file full-image.txt in GeneWeb-Bases/src/base, scans the corresponding text, replacing % macros by their values, and passes the resulting HTML back to the browser.

Image maps example

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 GeneWeb-Bases/src/base/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 GeneWeb-Bases/src/base/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.