Vignettes SVG (portail)

Vignettes SVG

Les vignettes sont définies dans le menu portail de type Vignette SVG :

{{#images:image1.png|Vignettes_SVG}}

Le contenu est une image SVG qui a été placé dans le répertoire du site (dans cet exemple)

(Inkscape est un éditeur OpenSource de document SVG)

{{#images:image2.png|Vignettes_SVG}}

L’image SVG contient des liens :

{{#images:image3.png|Vignettes_SVG}}

Malheureusement on ne peut définir directement le lien dans l’éditeur car nous avons besoin d’un bout de script ; l’éditeur ne gérant pas le script nous devons modifier le fichier à la main :

Tout d’abord le bout de script qui va appeler le gestionnaire de lien du client JavaScript :

<svg

  xmlns:svg=

 …

 <script type="text/ecmascript"> <![CDATA[

   function doonclick(href) {

window.top.JS_UTILS.URL.execLink(null,href);

   }

 ]]> </script>

…

Les liens sont ensuite définis sur les balises « Anchor » créées par l’éditeur :

  <a

      id="idLink3"

      transform="translate(1.636245,-0.9061258)"

      inkscape:label="#a5169">

     <g onclick="doonclick('frm://wfclassea.dfm')"

        id="g5163">

       <text

          xml:space="preserve"

Dans le portail :

{{#images:image4.png|Vignettes_SVG}}

Les liens sont actifs sur les vignettes ; si l’on clique sur « 3 » : l’écran correspondant au lien est ouvert :

{{#images:image5.png|Vignettes_SVG}}

Et voila !