Un menu di navigazione per essere gradevole alla vista deve avere un buon design ma anche un effetto rollover (l’evento che avviene sul pulsante al passaggio del mouse).

Un effetto rollover può essere realizzato in diversi modi e con diverse tecniche. Oggi vediamo come realizzare un menu con rollover realizzato tramite CSS.

Per prima cosa, con il nostro editor grafico preferito, realizziamo due immagini (menu.jpg e menu_rollover.jpg) che rappresentano il pulsante e il pulsante al passaggio del mouse. In questo caso, sul rollover, prevediamo un cambiamento del colore del pulsante.

Andiamo quindi a realizzare il DIV (menu) che contienre il menu di navigazione:

<div id=”menu”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
</ul>
</div>

Definiamo per prima cosa una regola per l’UL per eliminare margin, padding e il disco:

#menu ul {
list-style-type:none;
margin:0;
padding:0;
}

Ora definiamo gli stili per i link:

#menu a {
display:block;
background:url(menu.jpg) no-repeat;
width:150px;
height:30px;
font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
padding-left:20px;
padding-top:4px;
}

Abbiamo impostato la proprietà display su block per dare una dimensione al pulsante, quindi l’immagine di sfondo e lo stile per il font.

Questa la regola per il rollover (praticamente cambiamo l’immagine di sfondo):

#menu a:hover {
background:url(menu_rollover.jpg) no-repeat;
}

Ecco il link alla demo.

Potete scaricare i files dell’esempio:

download: MenuCSS (6.26KB) added: 28/10/2008 clicks: 24 description: Menu con rollover realizzato tramite CSS

E voi come realizzate il rollover per i vostri menu?

Ecco un video assolutamente da vedere, davvero simpatico. Un notebook di carta fatto con un libro:

Via | MaestroAlberto

Oggi vedremo come rendere trascinabile tramite drag & drop un DIV in una pagina HTML. Per rendere l’oggetto “draggable” utilizzeremo Script.aculo.us una delle più note librerie JavaScript con cui è possibile realizzare effetti, animazioni, controlli Ajax e altro ancora.

Per prima cosa scarichiamo la libreria da qui.

A questo punto decomprimiamo il pacchetto ZIP e includiamo i file scriptaculous.js e prototype.js, che trovate nelle cartelle src e lib, nel nostro file HTML:

<script src=”lib/prototype.js” type=”text/javascript”></script>
<script src=”src/scriptaculous.js” type=”text/javascript”></script>

Creiamo il nostro DIV (che avrà un immagine di sfondo) che chiameremo “content“:

<div id=”content” style=”background-image:url(images/drag.jpg); width:200px; height:100px;”></div>

Ora rendiamolo “draggable” con il seguente comando:

<script type=”text/javascript”>

new Draggable(’content’);

</script>

Potete vedere una demo di questo esempio qui.

download: scriptaculous-dragedrop (74.69KB) added: 25/10/2008 clicks: 22 description: drag e drop con scriptaculous

Wordpress rilascia la versione 2.6.3 che corregge un bug riguardante il componente Snoopy. Per correggere il bug è possibile:

- scaricare l’intero pacchetto
- aggiornare i soli files /wp-includes/class-snoopy.php e /wp-includes/version.php.

Ecco il link della notizia dal blog ufficiale di Wordpress

Vediamo oggi, con un semplice esempio, come mostrare o nascondere un DIV in una pagina HTML.

Creiamo un DIV e chiamiamolo “content” digitando poi un testo al suo interno:

<div id=”content”>
Questo è il div da mostrare o nascondere
</div>

All’interno della pagina HTML posizioniamo due pulsanti che, rispettivamente, mostreranno o nasconderanno il DIV richiamando un’opportuna funzione JavaScript:

<input type=”button” value=”Mostra” onclick=”javascript:mostra()” />
<input type=”button” value=”Nascondi” onclick=”javascript:nascondi()” />

Le due funzioni JavaScript (mostra / nascondi), agendo sulla proprietà display del DIV, ci permetteranno di mostrare il div (block) o di nasconderlo (none).

Ecco le funzioni JavaScript che fanno uso del DOM (getElementById) per manipolare il DIV:

function mostra() {
document.getElementById(”content”).style.display=”block”;
}

function nascondi() {
document.getElementById(”content”).style.display=”none”;
}

Scarica il file di esempio

download: Mostra-nascondi-div (634B) added: 22/10/2008 clicks: 51 description: File di esempio su come mostrare o nascondere un div in una pagina HTML.

Sul portale html.it è stata pubblicata una guida a MooTools. La guida è stata scritta da Riccardo Degni e, nella prima parte, troverete le seguenti lezioni:

- Introduzione a MooTools
- Le funzioni core
- Come usare il costruttore Class
- Integrazione con le Class Extras

Ecco il link alla guida: guida MooTools

Per gli amanti di Batman (tra cui io ) ecco un mini-pack gratuito di 10 icone dedicate all’uomo-pipistrello.

Nel pack ci sono le icone di Batman, Robin, Joker e Pinguino in formato ICO e PNG (16 px per 16 px).

download: BatmanMiniIcons (7.32KB) added: 17/10/2008 clicks: 37 description: Batman mini icons - mini pack gratuito di icone su batman

Volete embeddare le vostre foto Flickr nel vostro sito web o blog? Flickrin è un servizio che vi permetterà di farlo in modo semplice e veloce.

Inserendo dei tags o il vostro username otterrete da Flickrin un file Flash da incorporare nel vostro sito. Il file mostrerà con un effetto grafico le foto di Flickr e potrà essere embeddato attraverso un codice HTML o JavaScript.

Ecco il link: Flickrin

Prosegue la mia collaborazione con Blographik. Oggi, su www.blographik.it, trovate il primo di 6 articoli riguardanti le pagine ASP.

Vi consiglio di non perdere le prossime puntate di questa panoramica sulle Active Server Pages, sempre su Blographik.

Intanto ecco il link alla prima puntata: Come realizzare pagine in ASP (parte 1)

SilverStripe è un CMS / Framework in PHP, semplice da usare, compatibile con gli standard web e multipiattaforma (Windows / Linux / Mac).

E’ possibile espandere le funzionalità di questo CMS tramite appositi moduli o realizzare templates. SilverStripe è Open Source ed è supportato professionalmente da una community di sviluppatori.

Link al sito ufficiale: silverstripe.com
Demo on-line

Video 1 (dimostrativo)
Video 2 (per sviluppatori)