Vignettes SVG (portail)

De Wiki1000
(Différences entre les versions)
 
 
Ligne 1 : Ligne 1 :
 
 
 
==Vignettes SVG==
 
==Vignettes SVG==
  
Ligne 39 : Ligne 37 :
 
Tout d’abord le bout de script qui va appeler le gestionnaire de lien du client JavaScript :
 
Tout d’abord le bout de script qui va appeler le gestionnaire de lien du client JavaScript :
  
 
+
<nowiki>
 
+
<svg
<svg
+
 
+
 
   xmlns:svg=
 
   xmlns:svg=
 
 
   …
 
   …
 
 
   <script type="text/ecmascript"> <![CDATA[
 
   <script type="text/ecmascript"> <![CDATA[
 
+
     function doonclick(href) {window.top.JS_UTILS.URL.execLink(null,href);
     function doonclick(href) {
+
 
+
window.top.JS_UTILS.URL.execLink(null,href);
+
 
+
 
     }
 
     }
 
 
   ]]> </script>
 
   ]]> </script>
 
+
 
+
</nowiki>
 
+
 
+
  
 
Les liens sont ensuite définis sur les balises « Anchor » créées par l’éditeur :  
 
Les liens sont ensuite définis sur les balises « Anchor » créées par l’éditeur :  
Ligne 65 : Ligne 52 :
  
  
  <a
+
<nowiki>
 
+
<a
 
       id="idLink3"
 
       id="idLink3"
 
 
       transform="translate(1.636245,-0.9061258)"
 
       transform="translate(1.636245,-0.9061258)"
 
 
       inkscape:label="#a5169">
 
       inkscape:label="#a5169">
 
 
       <g onclick="doonclick('frm://wfclassea.dfm')"
 
       <g onclick="doonclick('frm://wfclassea.dfm')"
 
 
         id="g5163">
 
         id="g5163">
 
 
         <text
 
         <text
 
 
           xml:space="preserve"
 
           xml:space="preserve"
 
+
</nowiki>
  
  
 
Dans le portail :
 
Dans le portail :
 
 
  
 
{{#images:image4.png|Vignettes_SVG}}
 
{{#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 :  
 
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}}
 
{{#images:image5.png|Vignettes_SVG}}
 
  
  

Version actuelle en date du 12 novembre 2009 à 16:36

Vignettes SVG

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


image1.png


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)


image2.png


L’image SVG contient des liens :


image3.png


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 :

image4.png

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

image5.png


Et voila !

Outils personnels