𝒫er creare il nastro con sfondo trasparente come si vede qua
e per metterlo nelle vostre pagine web, seguite i seguenti passi:
Se avete dubbi posso provare ad aiutarvi, la mia email pubblica è in fondo a ogni pagina di questo sito oppure mettete un commento.
L'immagine png "We support Wikileaks" l'ho creata io (www.kensan.it) e non ha copyright, la metto nel pubblico dominio, per qualsiasi uso, fatene ciò che volete.
Se volete creare una immagine diversa dovete cambiare un po' di numeri nei file che ho fornito.
Se cambia solo la larghezza del nastro (che nell'immagine fornita è di 45px) è da cambiare la mappa del punto 4 (coords="0,0,250,250,250,205,45,0"), che sono coppie di coordinate cartesiane che generano una spezzata chiusa. In particolare se il vostro nastro (non tutta l'immagine ma solo la banda obliqua) fosse largo 50px basta sostituire 205 con 200 e 45 con 50.
Se cambiasse anche la grandezza dell'immagine del nastro allora dovete sostituire tutti i numeri 250 con la vostra grandezza e aggiornare la mappa del punto 4.
- Creazione del Foglio di Stile (CSS)
- Richiamo del Foglio di Stile (CSS)
- Creazione dell'immagine del Nastro
- Visualizzazione del Nastro
memorizzate il foglio di stile (css) seguente nel vostro sito nella cartella che volete, supporrò in seguito che abbia nome http://www.miosito.it/cartella/Nastro.css
Usate solo un editor di testo quale kwrite o notepad, non usate assolutamente Openoffice o Microsoft Office.div.nastro{
position:absolute;
left:100%;
top:0px;
overflow:visible;
height:250px;
width:250px;
background-color:transparent;
margin:0 0 0 -250px;
padding:0;
z-index:1;
border:none;
float:none;
}
Nota: se volete che il nastro stia sopra il vostro testo o le vostre immagini mettete come z-index un numero maggiore di 0 (dovrebbe bastare il numero 1), se invece volete stia sotto il vostro testo, mettete un numero negativo (dovrebbe bastare un -1). Si noti che il nastro per essere cliccabile e aprirsi il link relativo deve essere "sopra" quindi con un z-index maggiore di zero (per es. 1).
mettete la riga seguente nella pagina web dove volete compaia il nastro, tra i tag <head> e </head>. È il richiamo del file css del punto 1:
<link rel="stylesheet" type="text/css"
href="/cartella/Nastro.css">
N.B. modificate il link /cartella/Nastro.css opportunamente secondo il punto 1.
memorizzate nella cartella dove volete l'immagine del nastro che trovate qui.
mi riferirò a questa immagine del nastro col nome http://www.miosito.it/images/Nastro.png
nella stessa pagina dove avete messo il richiamo al file css (punto 2) e dove volete compaia il nastro, mettete tra i tag <body> e </body> la visualizzazione del nastro:
potete cambiare il link wikileaks.org e l'alt text come preferite.<!--Nastro Start-->
<div class="nastro">
<img src="http://www.miosito.it/images/Nastro.png"usemap="#nastro_map"border="0">
</div>
<map name="nastro_map">
<area shape="poly" coords="0,0,250,250,250,205,45,0"
href="http://www.wikileaks.org" alt="Trasparenza, Glasnost, Transparency">
</map>
<!--Nastro End-->
N.B. modificate il link http://www.miosito.it/images/Nastro.png opportunamente secondo il punto 3.
N.B.2 usate al posto di
src="http://www.miosito.it/images/Nastro.png"
il più elegante src="/images/Nastro.png" sempre ché
l'immagine sia sul vostro server.Se avete dubbi posso provare ad aiutarvi, la mia email pubblica è in fondo a ogni pagina di questo sito oppure mettete un commento.
L'immagine png "We support Wikileaks" l'ho creata io (www.kensan.it) e non ha copyright, la metto nel pubblico dominio, per qualsiasi uso, fatene ciò che volete.
Se volete creare una immagine diversa dovete cambiare un po' di numeri nei file che ho fornito.
Se cambia solo la larghezza del nastro (che nell'immagine fornita è di 45px) è da cambiare la mappa del punto 4 (coords="0,0,250,250,250,205,45,0"), che sono coppie di coordinate cartesiane che generano una spezzata chiusa. In particolare se il vostro nastro (non tutta l'immagine ma solo la banda obliqua) fosse largo 50px basta sostituire 205 con 200 e 45 con 50.
Se cambiasse anche la grandezza dell'immagine del nastro allora dovete sostituire tutti i numeri 250 con la vostra grandezza e aggiornare la mappa del punto 4.
