Come fare una mappa interattiva in jQuery

December 22

Una mappa interattiva è un'immagine che può essere inserito in una pagina Web e diviso in sezioni, ognuna delle quali rappresenta un link cliccabile a un URL specificato. È possibile utilizzare i CSS per la sezione l'immagine e quindi utilizzare jQuery per creare le funzioni cliccabili che si innescano quando si fa clic su una sezione dell'immagine. È possibile utilizzare qualsiasi immagine come la mappa interattiva e collegare le sezioni di immagine ad una funzione jQuery.

istruzione

1 Fare clic destro sul file HTML che si desidera utilizzare per creare la mappa. Fai clic su "Apri con" e selezionare il vostro editor preferito.

2 Inserire l'immagine che si desidera utilizzare. Il codice seguente aggiunge un'immagine al documento HTML:

<Img src = "myimage.jpg" id = "mappa" />

Sostituire "myimage.jpg" con il proprio nome del file immagine.

3 Impostare il CSS per sezionare l'immagine in segmenti cliccabili. Le seguenti sezioni di codice l'immagine in due sezioni distinte:

panel1b {left: 0; width: 95px;} panel2b {left: 96px; width: 75px;}

4 Aggiungere la funzione jQuery che si attiva quando un utente clicca su una delle sezioni. Questo codice accede alla pagina Web associata con la sezione:

$ ( '# Map'). Clic (function () {
se ( "# panel2b") {
browser.navigate = "page1.php";
} altro {
browser.navigate = "page2.php";
}
});

Sostituire i nomi dei file di pagina Web con il proprio.

5 Aggiungere i file di script jQuery per i tag head. Copia e incolla il seguente codice alla sezione testa del codice:

<Script type = "text / javascript"
src = "& lt; / script" rel = target "nofollow" = "_blank"> http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&quot;> & lt; / script >