713 Shares 1939 views

Come fare un riferimento picture-in-picture? Come inserire un link a una foto

Creazione di banner e mappe del sito, i webmaster principiante si trovano ad affrontare un tale problema, come inserire un link a una foto, fare con esso menù più luminoso e più interessante. Ma come per la sua attuazione? Non c'è niente di più facile se si sa linguaggio HTML.

Cerchiamo di scoprire come possiamo rendere una realtà di questa idea. In questo articolo, vi offriremo due opzioni per risolvere il problema. Un usato raramente a causa del fatto che ci vuole un sacco di tempo e fatica, mentre la seconda è considerata essere ben noto. Analizziamo con voi due.

Quando viene utilizzato l'immagine-link

Prima di parlare di come fare un riferimento picture-in-picture, potremo capire dove e perché vengono utilizzati. Dopo tutto, sarà più facile capire cosa vogliamo dall'immagine.

Immagini collegamenti sono comunemente usato come banner, pubblicità tout disegni. Esempi di questo sono le immagini sono tutti nella stessa "VKontakte". Ricordate quante volte hai fatto clic sulla foto a cui è stato costruito un particolare indirizzo? Inoltre, molto spesso vengono utilizzati sotto forma di gruppi di menu e delle comunità, soprattutto se contengono voci speciali. Molte di queste immagini che si trovano su altri siti.

Incollare il link nel quadro

La cosa più semplice – una foto-link. Questo è tutto, parliamo di partenza. Questa illustrazione è un riferimento pronto. Vale a dire clic su questa icona, si verrà reindirizzati alla nuova pagina.

Se sai come è definito da un legame comune con l'aiuto di HTML markup, i problemi che dovessero sorgere. L'unica differenza è che invece di collegamenti di testo è specificato immagine.

Così, ad attuare il suo piano, è necessario l'immagine stessa, caricato su Internet o memorizzati sul computer (a seconda se si sta lavorando in modalità on-line, in realtà sul sito, o zadeystvuete redattori).

Siamo alla ricerca di un indirizzo di immagini, scriviamo, per non dimenticare. risolvere anche il legame che dovrebbe aprire questa immagine.

Quindi, scrivere il seguente: sito href="http:// immagine – un codice speciale . Immagine-collegamento viene definito con il suo aiuto.

Così, noi prescriviamo un link che viene visualizzato sotto forma di illustrazione. Abbastanza facile. Ma questo approccio solo se si ritiene che ci dovrebbe essere un solo collegamento. Ma cosa succede se non ci dovrebbero essere pochi? Poi si passa ad altre opzioni.

Fare un menu di immagini

Il primo metodo è stato sviluppato in modo indipendente nello studio delle pagine web linguaggio di markup. La creazione di un simile menu può prendere un paio di ore.

Questo metodo è adatto per chi ama armeggiare con vari editori, in quanto è molto tempo e prende un po 'di più che la creazione della carta menu o il secondo metodo. essa consiste nel fatto che l'immagine è presa, che viene tagliato in diverse strisce o piazze. Ogni immagine è firmato, e la base per un collegamento, come descritto sopra. Successivamente, i tag di pagina di codice sono scritti nell'ordine corretto. Questo è tutto una questione di come fare un riferimento picture-in-picture, quasi risolto. Ma non dimenticare la seconda opzione.

Egli è quello di fare un menu con una sola immagine, chiedendo per ogni zona illustrare il suo legame. Non si preoccupi, niente di questi estremamente complessa in questo. Ora, andiamo con ordine.

Come fare

Esaminiamo un po 'di più il primo modo.

Per cominciare, è necessario la conoscenza di editor grafici e HTML. Come fare un quadro di riferimento, si dice che questo tipo di pagine di markup.

Quindi, se si decide di andare in questo modo, avrete bisogno di un'immagine e un editor grafico semplice che permette di tagliare le immagini e mettere sulle loro etichette, così come un luogo in cui si sarà in grado di riempirli.

Se questo è il tuo sito web – adatti galleria o biblioteca convenzionali file, per "VKontakte" potrebbe essere un album di gruppo o comunità (preferibilmente gratuito).

Inoltre, l'immagine da tagliare in pezzi, quindi è necessario ricordare l'ordine in cui vengono ricevuti parti. Impresso sul loro iscrizioni e riempire il server, scrivere i riferimenti su ogni illustrazione.

Prendere il codice sopra, e sostituire i dati desiderati. Quindi riempire l'immagine sul sito nell'ordine in cui dovrebbero andare. Allo stesso tempo, se si taglia a striscioline, allora avete bisogno di chiedere ad ogni collegamento in una nuova linea, ma se hai condiviso le foto in quadrati, quindi è necessario mettere in fila come molti collegamenti, come si è scoperto piazze.

Facciamo una mappa del sito

Quindi, se non ti piace la prima versione, e si desidera imparare a fare un riferimento picture-in-picture in qualsiasi altro modo, siamo in grado di offrire per sviluppare una mappa di riferimento. Ha reso più facile, qui può avvenire solo con i parametri dell'attività del problema. Perché capirà di più.

In primo luogo, dobbiamo ricordare che la mappa del sito è collegato all'immagine utilizzando il comando usemap = "# map1, che è prescritto nel tag img Pertanto, riempiendo la foto sul sito, assicuratevi di aggiungere il tag nella seconda parte -. USEMAP =" # nome della mappa".

Ulteriori immagini di markup in zone, che sono attaccati ai collegamenti avviene tramite un tag accoppiato

, che può essere posizionato in qualsiasi luogo comodo tra i tag accoppiati .

Si noti che quando si utilizza questo tipo di mappa dovrebbe essere chiesto non solo i collegamenti, ma anche la zona di attività e le coordinate. Successivamente, esamineremo i parametri di base che ha il tag.

impostazioni di scelta rapida

Così, davanti ai vostri occhi, immagine pronto riferimento. HTML consente di migliorare in modo significativo la funzionalità delle immagini – di assegnare una certa area di riferimento. Tutto questo è dato da parametri specifici, che ora saranno discussi.

Parliamo un po 'sui parametri di base del tag accoppiato

. Principalmente questo nome, che è uguale al valore usemap. Così si designa che la scheda viene scritto l'immagine.

Inoltre all'interno della coppia di tag

è prescritto un altro tag –

, che descrive l'area di riferimento. Non è il ragazzo e, naturalmente, ha i propri parametri.

Il primo – forma. Con l'aiuto di un webmaster imposta una sorta di campo. Questo può essere:

  • cerchio – cerchio;
  • rettangolo – rect;
  • Poligono – poli;
  • foto della zona di riposo – di default.

Avanti – coordinate. Con l'aiuto delle coordinate della zona di pixel. L'origine di questo sistema di coordinate – in alto a sinistra. Fu allora, ed è il problema principale – non è così facile definire le coordinate dai pixel, soprattutto se non v'è la familiarità con la computer grafica.

Citiamo anche abbastanza famoso href, che imposta l'indirizzo del collegamento.

E l'ultima opzione, che è quello di essere menzionato, – nohref. Essa mostra che questa regione non è un riferimento.

Naturalmente, questo non è un elenco completo dei parametri che è possibile impostare l'immagine o il link-map. Ma allo stesso tempo, sarà sufficiente per creare un collegamento luminoso e colorato o anche l'intero del loro sistema.

Consigli

In qualunque modo per la creazione di collegamenti, le immagini che si sceglie, la cosa importante è che l'immagine originale è stata buona. Prova a scegliere quei disegni che non catturano lo sguardo, non irritano i colori vivaci o modelli. Ciò è particolarmente importante per una mappa del sito. È possibile fare un collage di diverse foto, li scurire, o accendere uno dei filtri in un programma di grafica.

Quando si crea si raccomanda una mappa del sito per scegliere un'immagine con morbido, non irritante per gli occhi modelli. Credetemi, non è sempre la chiave del successo – immagine luminosa -link. "VKontakte", tuttavia, spesso si concentrano solo sulla luminosità e ostentazione, al fine di attrarre nuovi visitatori.

risultati

Per riassumere. Siamo con voi capito come fare un riferimento picture-in-picture, e guardò due modi che si possono altrettanto bene essere utilizzato per creare un menu di varia difficoltà. Inoltre, abbiamo capito come impostare l'immagine-link e conoscere i principali parametri che consentono di creare un bel comoda mappa del sito, gruppo o comunità.