Menu interativo
Vediamo adesso come utilizzare quanto visto nel corso della guida per realizzare un menu interattivo contenente una serie di link alle pagine che costituiscono un ipotetico sito.
In SVG un menu può essere realizzato nel seguente modo:
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<script type="text/ecmascript"><![CDATA[
function colora(evt,colore){
var elemento=evt.target;
elemento.getStyle().setProperty("fill",colore);
}
]]></script>
<style type="text/css"><![CDATA[
circle {fill:red;stroke:black;stroke-width:2}
text.menu {text-anchor:middle;font-family:arial;font-size:22;fill:black}
text.menupiccolo {text-anchor:middle;font-family:arial;font-size:12;fill:black}
.linearossa {stroke:red;stroke-width:5;fill:none}
]]></style>
</defs>
<rect x="0" y="0" width="800" height="600" stroke="red" fill="none" stroke-width="2"/>
<path d="M5,50 C200,50 200,550 0,550" class="linearossa"/>
<line x1="0" y1="50" x2="800" y2="50" class="linearossa"/>
<text x="400" y="50" text-anchor="middle" font-family="arial" font-size="40" fill="black">
Nome Del Sito
</text>
<g id="VoceMenu">
<a xlink:href="pagina1.html">
<circle cx="150" cy="300" r="37" onmouseover="colora(evt,'lime')" onmouseout="colora(evt,'red')">
<animate attributeName="cx" attributeType="XML" begin="menu.click" dur="1s" from="150" to="280" fill="freeze"/>
<animate attributeName="cx" attributeType="XML" begin="close.click" dur="1s" from="280" to="150" fill="freeze"/>
</circle>
<text x="150" y="305" class="menupiccolo">
Pagina 1
<animate attributeName="x" attributeType="XML" begin="menu.click" dur="1s" from="150" to="280" fill="freeze"/>
<animate attributeName="x" attributeType="XML" begin="close.click" dur="1s" from="280" to="150" fill="freeze"/>
</text>
</a>
<a xlink:href="pagina2.html">
<circle cx="150" cy="300" r="33" onmouseover="colora(evt,'lime')" onmouseout="colora(evt,'red')">
<animate attributeName="cx" attributeType="XML" begin="menu.click" dur="1s" from="150" to="430" fill="freeze"/>
<animate attributeName="cx" attributeType="XML" begin="close.click" dur="1s" from="400" to="150" fill="freeze"/>
</circle>
<text x="150" y="305" class="menupiccolo">
Pagina 2
<animate attributeName="x" attributeType="XML" begin="menu.click" dur="1s" from="150" to="430" fill="freeze"/>
<animate attributeName="x" attributeType="XML" begin="close.click" dur="1s" from="430" to="150" fill="freeze"/>
</text>
</a>
<a xlink:href="pagina3.html">
<circle cx="150" cy="300" r="30" onmouseover="colora(evt,'lime')" onmouseout="colora(evt,'red')">
<animate attributeName="cx" attributeType="XML" begin="menu.click" dur="1s" from="150" to="580" fill="freeze"/>
<animate attributeName="cx" attributeType="XML" begin="close.click" dur="1s" from="580" to="150" fill="freeze"/>
</circle>
<text x="150" y="305" class="menupiccolo">
Pagina 3
<animate attributeName="x" attributeType="XML" begin="menu.click" dur="1s" from="150" to="580" fill="freeze"/>
<animate attributeName="x" attributeType="XML" begin="close.click" dur="1s" from="580" to="150" fill="freeze"/>
</text>
</a>
<g id="close">
<circle cx="150" cy="300" r="20" onmouseover="colora(evt,'lime')" onmouseout="colora(evt,'red')">
<animate attributeName="cx" attributeType="XML" begin="menu.click" dur="1s" from="150" to="685" fill="freeze"/>
<animate attributeName="cx" attributeType="XML" begin="close.click" dur="1s" from="685" to="150" fill="freeze"/>
</circle>
<text x="150" y="308" class="menu">
<
<animate attributeName="x" attributeType="XML" begin="menu.click" dur="1s" from="150" to="685" fill="freeze"/>
<animate attributeName="x" attributeType="XML" begin="close.click" dur="1s" from="685" to="150" fill="freeze"/>
</text>
</g>
<g id="menu" >
<circle cx="150" cy="300" r="50" onmouseover="colora(evt,'lime')" onmouseout="colora(evt,'red')"/>
<text x="150" y="305" class="menu">
Menu
</text>
</g>
</g>
</svg>
Link esempio: menu.svg
Andiamo ad analizzare il codice dell'esempio per capire come funziona.
All'interno dell'elemento <defs> è contenuta la dichiarazione di uno script e di alcuni stili utilizzati dagli elementi grafici del menu.
La funzione presente nel tag <script> permette di colorare in maniera dinamica un oggetto dell'immagine indicandone il colore.
Questa funzione, associata agli eventi onmouseover ed onmouseout, viene utilizzata per ricreare l'effetto tipico dei link di una pagina HTML.
L'elemento grafico <rect> costituisce lo sfondo dell'immagine, mentre con <path> e <line> viene disegnata la "struttura" rossa sulla quale vengono graficamente disposti la stringa (elemento <text>) che contiene il nome del sito e gli elementi del menu.
Il successivo elemento <g> contenuto nel file SVG, costituisce il menu interattivo vero e proprio.
Il menu è formato da una serie di elementi circolari (cinque nel nostro caso) di varie dimensioni a cui è associata una scritta che indica quale voce del menu rappresenta il relativo elemento.
Alcuni elementi (i primi tre) costituiscono dei link alle pagine del sito e ad altri (i primi quattro) sono associate delle animazioni.
Inizialmente solamente l'ultimo elemento circolare (con id="menu") viene visualizzato perché "copre" gli altri elementi, avendo un raggio di dimensione maggiore.
Quando questo elemento viene cliccato viene scatenato l'evento (begin="menu.click") che fa partire una delle due animazioni definite all'interno dei primi quattro elementi del menu.
Questa animazione fa spostare orrizzontalmente i quattro elementi rendendoli di conseguenza visibili.
I primi tre elementi sono i link ad alcune pagine del sito mentre il quarto elemento (con id="close"), se cliccato, scatena l'evento (begin="close.click") che fa partire la seconda animazione. Questa si occupa di riportare gli elementi nella loro posizione originale, nascondendo nuovemente le voci del menu.
Ovviamente cliccando sui link relativi alle voci del menu otterrete un errore perché le pagine non esistono: spetta a voi il compito di migliorare il menu scegliendo il nome del sito, inserendo dei link esitenti ed assegnando delle voci più significative agli elementi del menu.
