September 25
Sia che si sta creando o personalizzando, immagini mouseover possono aggiungere un tocco e una qualità "magico" al tuo sito web. Aggiunta la possibilità di rendere le immagini cambiamento passandoci sopra con il mouse del computer non è troppo in termini di tempo, ma richiede un po 'di codice personalizzato. Implementazione di passaggio del mouse (o rollover) immagini utilizza semplici codici HTML e JavaScript - che sono entrambi universali per computer di codifica lingue, facile da implementare in qualsiasi pagina web.
1 Aprire la pagina HTML che si desidera aggiungere il rollover immagine (o passaggio del mouse) in, utilizzando un editor HTML o testo valido.
2 Incollare il seguente codice all'interno della vostra pagina HTML (all'interno del tag <body> </ body> del codice della pagina):
"<Script type =" text / javascript ">
<! -
// Copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribuire liberamente questo script, ma si prega di tenere presente
// Avviso con il codice.
var rollOverArr = new Array ();
Funzione setrollover (OverImgSrc, pageImageName)
{
se il ritorno (document.images!);
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr [pageImageName] = new Object;
rollOverArr [pageImageName] .overImg = nuova immagine;
rollOverArr [pageImageName] .overImg.src = OverImgSrc;
}
funzione di rollover (pageImageName)
{
se il ritorno (document.images!);
se il ritorno (rollOverArr [pageImageName]!);
if (! rollOverArr [pageImageName] .outImg)
{
rollOverArr [pageImageName] .outImg = nuova immagine;
rollOverArr [pageImageName] .outImg.src = document.images [pageImageName] .src;
}
document.images [pageImageName] .src = rollOverArr [pageImageName] .overImg.src;
}
funzione di rollout (pageImageName)
{
se il ritorno (document.images!);
se il ritorno (rollOverArr [pageImageName]!);
document.images [pageImageName] .src = rollOverArr [pageImageName] .outImg.src;
}
// ->
</ SCRIPT> "
3 Carica le immagini che si desidera utilizzare con il rollover dell'immagine (due necessario) per host del tuo sito web o ad un host di immagini gratuito, come ad esempio Imgur (imgur.com), ImageShack (imageshack.us) o Photobucket (photobucket.com) .
4 Individuare il posto nel file del pagina che si desidera avere il rollover immagine appaiono e copiare e incollare (premendo il tasto "CTRL", "C" contemporaneamente sulla tastiera del computer per copiare e "CTRL", "V" per incollare) il codice seguente:
"<A
HREF="TARGETLINK.html"
onMouseOver = "rollover ( 'NAMEOFROLLOVER')"
onMouseOut = "rollout ( 'NAMEOFROLLOVER')"
> & Lt; IMG
SRC = "YOURFIRSTIMAGEURL"
NAME = "NAMEOFROLLOVER"
ALT = "Testo alternativo" BORDER = 0
HEIGHT = 150 WIDTH = 150
> & Lt; / A>
<Script type = "text / javascript">
<! -
setrollover ( "ROLLOVERIMAGEURL");
// ->
</ SCRIPT> "
5 Modificare le variabili nel codice in base alle proprie immagini e collegamenti web.
6 Sostituire "TARGETLINK.html" con il sito o la pagina l'immagine di rollover collegherà a. Dare l'immagine di rollover un nome specifico e sostituire "NAMEOFROLLOVER" con il nome scelto. Sostituire "YOURFIRSTIMAGEURL" con l'URL dell'immagine della foto che si desidera visibile prima del rollover del mouse. Change "ROLLOVERIMAGEURL" per l'immagine dopo un mouse per computer si libra l'immagine. Modificare l'altezza e la larghezza dell'immagine cambiando "150" per la giusta quantità di pixel tua foto è.
7 Salvare la pagina HTML e ri-caricarlo sul server del tuo sito web.