Grafica per il web

Realizzazione favicon personalizzata e animata!

Vuoi un'icona personalizzata per il tuo sito?
RAM realizza su richiesta la favicon del tuo sito, l'icona che ti identifica sui alcuni browsers tra cui: Microsoft Internet Explorer, Firefox, Opera, Safari.

Realizziamo anche favicon animate e loghi animati in formato .gif e ti forniamo il codice html da mettere nella tua pagina

Esempi di favicon:

Icona personalizzata e animata


Icona fissa creata in base al logo del cliente


Icona animata in gif


Icona animata per ditta Presservice




Grafica web

Come visualizzare un'immagine di anteprima e la sua corrispondente più grande tramite CSS, rimanendo nella pagina html

Esistono vari metodi per visualizzare le immagini più grandi cliccando su un'immagine piccola posta come anteprima nella pagina html, senza uscire dalla pagina.

Per un web designer può essere utile conoscere questi metodi per vari motivi. Infatti, per l'utente inesperto, può risultare disagevole trovarsi aperta una pagina nuova del browser dove viene presentata solo l'immagine di dimensioni maggiori, lasciando la pagina del nostro sito che stava navigando, senza sapere come fare a tornare nella pagina del sito che stava navigando.

Abbiamo un'esempio di questa modalità di visualizzazione delle immagini in un sito dedicato alle disinfestazioni, il quale presenta alcune pagine con contenuti testuali e di immagini, dove le immagini sono in un formato medio/piccolo (ad esempio 300 x 226 px). L'immagine è generalmente collegata tramite link ad una immagine più grande (anche fino a 1000 x 750 px) posta nella cartella relativa.

Immagine anteprima nella paginacliccando sull'immagine anteprima...Cliccando sull'anteprima si apre una pagina nuova nel browser con l'immagine originale caricata in Wordpress

Ad esempio, in un blog, quando viene postato un nuovo articolo, l'utente effettua l'upload dell'immagine e sceglie il ridimensionamento dell'anteprima posta nella pagina html che viene creata.
Questa immagine viene collegata con un link diretto all'immagine grande, nella cartella, e se non viene revisionato il link, aggiungendogli il settaggio target="_blank", (che porterebbe ad aprire una nuova pagina) il collegamento viene di default effettuato come DIRETTO, cioè target="_self", il che significa: cliccando su quell'immagine di anteprima, si aprirà un'altra pagina, in SOSTITUZIONE della prima, nella quale verrà visualizzata solo l'immagine a grandezzaPulsante INDIETRO del Browser originale, e l'utente, per tornare al sito, sarà costretto a cliccare sul pulsante "indietro" del browser.


Ad oggi sono stati progettati molti meccanismi di apertura delle immagini, generalmente usufruendo di script, che rendono l'apertura e la chiusura morbida e molto gradevole. Tuttavia esistono alcune situazioni nelle quali gli script possono risultare in conflitto con altri scripts presenti nel sito, oppure si chiede un metodo diverso per semplificare al massimo il codice della pagina.

In questi casi usare gli stili CSS può rappresentare una alternativa, infatti è una modalità accessibile a qualsiasi sito e a tutti gli utenti e i browsers.

Per caricare l'ingrandimento di un'immagine direttamente in pagina, tramite i CSS, occorre seguire una procedura semplice, ma nella quale va posta una certa attenzione. Per descriverla useremo un'esempio da noi realizzato su un sito di disinfestatori nel quale è stato posto un menu incolonnato a sinistra, con il testo e l'immagine piccola dell'animale "infestatore" di cui si parla in un'apposita pagina, collegata ad ogni voce di menu.

Menu testuale e di immagini anteprimeImmagine di anteprima del menuspostando la freccia del mouse si carica subito l'immagine più grande che sovrasta gli altri elementi della pagina

Appoggiando il mouse sull'immagine di anteprima del menu, compare l'immagine più grande sopra agli altri elementi, cliccando questa più grande si viene indirizzati alla pagina specificata nel menu.

Per realizzare questa grafica web occorre:

  • Dimensionare le immagini come desiderato. Nell'esempio l'immagine piccola (ratto-sm.jpg) è di 76 x 80 pixel, realizzata in Photoshop con un bordo esterno a destra e in basso del colore del fondo pagina del sito, per cui, l'immagine dell'animale risulta di 56 x 61 pixel, mentre l'immagine grande (ratto.jpg) è di 167 x 180 pixel

    anteprima immagine ratto  Immagine ratto allargata

  • All'interno della pagina html è stata inserita una tabella dove ogni riga contiene due celle, nella sinistra c'è la voce di menu testuale, linkata alla pagina relativa, nell'altra cella a destra, c'è un DIV che contiene l'immagine piccola collegata anch'essa alla pagina html relativa da aprire.

    A questo DIV è stato dato un ID che richiama alcuni settaggi presenti nel foglio di stile collegato alle pagine del sito.
    Puoi vedere qui sotto il codice:

Nel body puoi copiare e incollare questo codice, cambiandone i percorsi e sostituendoli con quelli delle tue immagini :
<tr><td height="90" valign="top"><p>Derattizzazione<br /> &nbsp; </p></td>
<td valign="top"><div id="ratto"><a href="derattizzazione.html"><img src="img-derattizzazione/ratto-sm.jpg" alt="Rattus Rattus" width="76" height="80" border="0" /></a></div>
</td>
</tr>


Puoi copiare e incollare lo stile css nell'head della tua pagina, oppure nel foglio di style associato alla pagina, in questo caso avrai linkato il foglio di stile nell'head della pagina in questo modo:
<link rel="stylesheet" href="miostyle.css">

Stile CSS
div#ratto{
width:76px;
margin:0;
float:left;
}
div#ratto img{
border-top:#333366 dotted 3px;
border-left:#333366 dotted 3px;
}
div#ratto a{
display:block;
position:absolute;
z-index:8;
}
div#ratto a:hover img, #ratto a:active img{
display:none;
}
div#ratto a:hover, #ratto a:active {
height:180px;
width:167px;
background-image:url(img-derattizzazione/ratto.jpg);
border-top:#333366 dotted 3px;
border-left:#333366 dotted 3px;
}

Va posta attenzione allo z-index, che sia superiore a quello di altri elementi della pagina, altrimenti l'immagine che compare sarà coperta da questi ultimi. In questo caso si è utilizzata la proprietà di default del browser che visualizza l'immagine in a:hover a partire dall'angolo superiore sinistro del div relativo. Volendo è possibile anche far comparire l'immagine in un'altra posizione della pagina, settando le coordinate left:___; e top:___; dove si conteranno i pixel settati a partire dal punto 0;0 che è sempre l'angolo superiore sinistro del nostro DIV id="ratto".

Per ogni immagine del menu è stato dato un diverso ID al div che la contiene, per far sì che carichi la immagine più grande ad essa relativa, così abbiamo il DIV id="zanzare", il DIV id="mosche", ecc.

Infine facciamo notare che, per una buona ottimizzazione della pagina, per il posizionamento sui motori di ricerca, sia il nome delle immagini, sia le piccole che le grandi, che il nome della cartella che contiene le immagini, sono stati chiamati con le parole chiave occorrenti, ed è stato utilizzato l'Alt delle immagini.

Chi siamo

Rinaldi Annamaria Grafica per il web: Realizzazione grafica Immagini in anteprima con CSS Realizzazione favicon personalizzata animata Codice HTML Grafica web a Modena, Sassuolo, Carpi, Vignola, Castelfranco, Maranello, Bologna, Reggio Emilia, Milano, Roma.

Privacy Policy

Foto panoramiche e navigazioni virtuali

Vedi alcuni esempi di foto panoramiche montate in HTML5

Contatti

  • Mobile:
    333 7334899
  • Email:
    ram@graficawebmodena.it
  • Indirizzo:
    via R. Prati, 54 41126 Modena Italia
  • P. IVA: 03103270363