La soluzione che vi propongo oggi riguarda la creazione di una mappa immagine dove le aree vengono evidenziate al passaggio del mouse, qualcosa di simile all’immagine qua sotto.
Per farlo senza ricorrere ad html5 esistono principalmente due modi:
- Utilizzare un’overlay con un div e css. Elegante ma limitato alle forme rettangolari.
- Sostituire l’immagine. Un po macchinoso soprattutto quando ci sono molte aree cliccabili.
Prosegui la lettura…
Categorie:Javascript, Markup, Neuroni, PHP, Prodotti SK, WD Tools Tag: code, download, HTML, Idee, Javascript, Markup, PHP, risorse, Skipstorm, snippets, software, Sviluppo Web
Vediamo ora alcuni semplici esempi di pagine web che proveremo a modificare.
Primo esempio, solo html
In questo esempio vediamo dei nuovi attributi, “text” inserito nel body determina il colore del testo della pagina, dato che abbiamo messo lo sfondo nero non potevamo lasciare il testo nero.
L’attributo “align” che può avere valore left (sinistra), right (destra), center (al centro) o justify (giustificato) determina il tipo di allineamento del testo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body bgcolor="#000000" text="#ffffff">
<h1>
<font color="#ff0000">
Titolo della pagina
</font>
</h1>
<p align="center">
Del testo
<font color="#00ff00">
in due colori.
</font>
</p>
</body>
</html>
Stesso esempio, con l’auiuto dei css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body style="background:#000000; color:#ffffff;">
<h1 style="color:#ff0000;">
Titolo della pagina
</h1>
<p style="text-align:center;">
Del testo
<span style="color:#00ff00;">
in due colori.
</span>
</p>
</body>
</html>
In una pagina web si può impostare un colore tramite il suo nome, un codice esadecimale di 6 o 3 cifre preceduto dal simbolo # oppure con un codice RGB composto da 3 numeri decimali.
Ad esempio per il nero posso scrivere black, oppure #000, oppure #000000 oppure rgb(0,0,0).
In genere si utilizza il codice esadecimale di 6 cifre, se utilizzate gimp o photoshop quando aprite la schermata per la selezione del colore vi verrà visualizzato anche il codice esadecimale in modo da poterlo utilizzare in una pagina web.
Tempo fa, quando i monitor non avevano molti colori ne erano stati selezionati alcuni come maggiormente compatibili (web colors), ora non è più necessario limitarsi all’utilizzo di questi colori ma solo per questi esiste una corrispondenza letterale, dato che non potevano scegliere un nome per oltre 16 milioni di colori.
Lista dei colori con corrispondenza letterale.
Potete vedere questo video che mostra come creara la tavolozza per un sito utilizzando GIMP
Creare una tavolozza con GIMP
