Stai leggendo il blog di: Elvo
Questo blog ha 0 Followers

Vignetta: The Marius - Clicca sull'immagine per visitare il suo blog

ATTENZIONE !

Per la complessità della procedura, si consiglia di fare queste operazioni solo a chi ha una buona conoscenza del linguaggio HTML, di Javascript, nonchè leggere quanto scritto su Plugin e Widget Javascript sempre in questa guida. Chiunque non conosca minimamente i linguaggi e le parti della guida sopracitate, è pregato di non continuare nella lettura.


PULSANTI ROLLOVER

Un tasto rollover è un’immagine che al passaggio del mouse cambia, diventando dinamica. Su WEBCOMICS è possibile attivare questa funzione sia per le pagine che per dei banner particolari. (Si consiglia di leggere la sezione de banner per maggiori dettagli).

Per prima cosa createvi o procuratevi le varie immagini. Per un maggiore ordine nel gestire più file si consiglia di chiamare i file prima del caricamento con On e Off. (Es: Tasto_home_on.png e Tasto_home_off.png). ON è l’immagine che apparirà col passaggio del mouse, OFF è l’immagine normale

Si consiglia una larghezza massima di 240 pixel e una altezza non superiore ai 58 pixel e con sfondo bianco per adattarsi alla sidebar. Si consiglia anche di salvarli nel formato PNG.

Caricate le immagini nella vostra libreria e copiatevi su un file di testo a parte gli URL di origine di ogni tasto.

Per generare il codice Javascript di più tasti, si consiglia di un utilizzare un generatore di immagini in rollover come questo (ce ne sono anche altri in rete).

All’interno del campo #1 inserite l’immagine off, in MO1 l’immagine on e in URL1 il link di destinazione.

Fate questo per tutti i tasti immagine e premete il tasto “Done! Make my Script!”. Nel generatore precedentemente linkato sarà possibile creare solo 5 tasti rollover. nel caso vogliate inserirne di più dovrete modificare a mano la scritta in rosso del codice generato:

<a href="http://www.webcomics.it/turel" onmouseover="image1.src='https://www.webcomics.it/turel/files/2012/04/New_side_home_on.png';"
onmouseout="image1.src='https://www.webcomics.it/turel/files/2012/04/New_side_home_off.png';">
<img name="image1" src="https://www.webcomics.it/turel/files/2012/04/New_side_home_off.png" border=0></a>

Cambiate image1 con image6 e così via.

Da WordPress, andate ora in Aspetto -> Widget e inserite un nuovo Widget Javascript Adder. Incollate il codice con tutti i tasti generati e salvate. Andate sul vostro sito e se avrete seguito perfettamente questi passaggi, dovrete vedere le pagine in rollover sotto le pagine normali.

Nel caso non vogliate più visualizzare le pagine standard di WEBCOMICS, entrate in wordpress è andate in Aspetto -> Menù. Ora andate su + e createvi un nuovo menù configurandolo come nell’immagine qui sotto.

Cambiando il check Primary Navigation in “Posizione dei temi” con il nome del vostro menù, disattiverete le pagine sulla sidebar sinistra, inclusa la Home. Qualora vogliate tornare indietro basterà modificare questo campo o cancellare il menu personalizzato cliccando su “Cancella menu”.

 IMPLEMENTARE LE SOTTOPAGINE DINAMICHE CON I TASTI ROLLOVER

Nel caso vogliate inserire delle sottopagine dinamiche su di un pulsante rollover, la procedura risulterà un antico più complicata. Infatti oltre che del codice Rollover, avremo bisogno dell’estensione del codice html delle sottopagine. Facciamo un’esempio utilizzando le pagine nomali della sidecar senza rollover: Il nostro blog ha le pagine:

HOME
INFO
EPISODI
   - STAGIONE 1
   - STAGIONE 2

Le pagine HOME, INFO ed EPISODI sono 3 pagine mastro, mentre STAGIONE 1 e STAGIONE 2 sono due sottopagine della pagina mastro EPISODI. Non dimenticate di impostarle come tali dal vostro WordPress. Ispezionando l’elemento della pagina* (con le opzioni del nostro browser) senza attivare ancora i rollover ma utilizzando il normale menù messo a disposizione di Web-Comic. Vi do l’esempio del codice. Vi basterà sostituire le scritte in rosso con le diciture e i link del vostro sito. L’unica cosa che dovrete procurarvi, ispezionando la pagina è il page-item (scritto in verde). Ogni pagina ha un suo numero identificativo, vi basterà cercare la riga ispezionando l’elemento* e modificando il numero identificativo col vostro!

 

* La funzione ispeziona cambia dicitura a prescindere dal browser. La funziona Visualizza Sorgente ispeziona la pagina visualizzata in un editor di testo, bi basterà fare cerca “</a><ul class=’children’><li e verrete reindirizzati nel codice per far funzionare le sottomarine.