OrdinadorsProgramari

Com fer una referència d'imatge-en-imatge? Com inserir un enllaç a una imatge

La creació de banners i mapes de lloc, els administradors web principiants s'enfronten a un problema, com inserir un enllaç a una imatge, fer amb ell menú més brillant i més interessant. Però la forma de posar-la en pràctica? No hi ha res més fàcil si vostè sap el llenguatge HTML.

Anem a esbrinar com podem fer realitat aquesta idea. En aquest article, oferirem dues opcions per resoldre el problema. Rares vegades s'utilitza a causa del fet que es necessita una gran quantitat de temps i esforç, mentre que es considera la segona a ser ben conegut. Analitzem amb tots dos.

Quan s'utilitzi la imatge-enllaç

Abans de parlar de com fer una referència d'imatge-en-imatge, entendrem on i per què s'utilitzen. Després de tot, serà més fàcil d'entendre el que volem de la imatge.

Imatges enllaços són comunament utilitzats com banners, anuncis tout dibuixos. Exemples d'això són les imatges estan tots en la mateixa "VKontakte". Recordeu quantes vegades has clic a la foto a la qual una direcció particular, s'ha construït? A més, sovint s'utilitzen en forma de grups de menús i les comunitats, especialment si contenen entrades especials. Moltes d'aquestes imatges trobades en altres llocs.

Pegar l'enllaç en el quadre

El més senzill - una imatge-enllaç. Això és tot, parlem de començar. Aquesta il·lustració és una referència ràpida. És a dir, en fer clic en aquesta icona, passareu a la nova pàgina.

Si vostè sap com es defineix per un vincle comú amb l'ajuda d'HTML marcat, els problemes que han de presentar-se. L'única diferència és que en lloc d'enllaços de text s'especifica una imatge.

Per tant, per a posar en pràctica el seu pla, necessita la imatge en si, pujat a Internet o emmagatzemada a l'ordinador (depenent de si s'està treballant en la manera en línia, en realitat en el lloc, o zadeystvuete editors).

Estem a la recerca d'una adreça d'imatge, l'escrivim, per no oblidar. També fixar el vincle que ha d'obrir aquest quadre.

A continuació, escriviu el següent: imatge - un codi especial . Enllaç a imatge es defineix amb la seva ajuda.

Per tant, prescrivim un enllaç que es mostra en forma d'il·lustració. Bastant fàcil. No obstant això, aquest enfocament només si vostè creu que no ha d'haver només una baula. Però el que si hi ha d'haver uns pocs? A continuació, passem a altres opcions.

Fer un menú d'imatges

El primer mètode va ser desenvolupat de forma independent en l'estudi de les pàgines web de llenguatge de marques. La creació d'un menú d'aquest tipus pot trigar un parell d'hores.

Aquest mètode és adequat per a aquells que els agrada jugar amb diversos editors, ja que és bastant lent i triga una mica més que la creació de la targeta del menú o el segon mètode. Es troba en el fet que es pren la fotografia, que es talla en diverses tires o quadrats. Cada imatge està signada, i la base per a un enllaç, com es va descriure anteriorment. A continuació, les etiquetes de pàgina de codi s'escriuen en l'ordre correcte. Això és tot una qüestió de com fer una referència d'imatge-en-imatge, gairebé resolt. Però no us oblideu de la segona opció.

Ell és fer un menú amb només una imatge, demanant cada zona il·lustrar el seu enllaç. No es preocupi, res aquestes extremadament complex en aquest. Ara, el primer és el primer.

com fer

Examinem una mica més de la primera forma.

Per començar, haurà coneixement dels editors gràfics i HTML. Com fer una imatge de referència, que li diu a aquest tipus de pàgines de marques.

Per tant, si vostè decideix anar d'aquesta manera, es necessita d'una imatge i un editor gràfic simple que li permet tallar les imatges i posar en les seves etiquetes, així com un lloc on vostè serà capaç de omplir-los.

Si aquest és el seu propi lloc web - galeria o biblioteca arxius convencionals adequats, per "VKontakte" pot ser un àlbum de grup o comunitat (preferiblement lliure).

A més, la imatge que es talla en peces, pel que és necessari recordar l'ordre en què es reben parts. Estampada en elles inscripcions i omplir el servidor, escriviu les referències a cada il·lustració.

Prengui el codi anterior, i per substituir les dades desitjades. Després ompli la imatge en el lloc en l'ordre en què han d'anar. Alhora, si es talla en tires, llavors vostè necessita per demanar a cada enllaç en una línia, però si vostè ha compartit fotos en quadrats, llavors vostè necessita per posar en una fila tants enllaços com es va veure quadrats.

Fem un mapa del lloc

Per tant, si no us agrada la primera versió, i desitja aprendre com fer una referència d'imatge-en-imatge en qualsevol altra forma, podem oferir-li per desenvolupar un mapa de referència. Es va fer més fàcil, aquí només pot ocórrer amb els paràmetres de la tasca del problema. Per què va a entendre més.

En primer lloc, cal recordar que el mapa del lloc es troba connectat a la imatge utilitzant el usemap comandament = "# map1, que es prescriu a l'etiqueta img Per tant, omplint la imatge en el lloc, assegureu-vos d'afegir l'etiqueta a la segona part -. Usemap =" # nom del mapa ".

Més imatges de marcat en zones, que estan units als enllaços es realitza usant una etiqueta aparellat , que es pot posar en qualsevol lloc convenient entre les etiquetes aparellades .

Recordeu que quan s'utilitza aquest tipus de mapa s'ha de demanar no només els enllaços, sinó també l'àrea de les seves activitats i les coordenades. A continuació, examinarem els paràmetres bàsics que té l'etiqueta.

valors de les combinacions

Així, davant els seus ulls, la imatge llestos referència. HTML li permet millorar significativament la funcionalitat de la imatge - assignar una àrea determinada per referència. Tot això està donat per paràmetres específics, que ara seran discutides.

Anem a parlar una mica sobre els paràmetres bàsics de l'etiqueta aparellat . Principalment aquest nom, que és igual al valor usemap. Així que vostè designi que la targeta s'escriu en el quadre.

A més a l'interior del parell d'etiquetes es prescriu una altra etiqueta - , que descriu l'àrea de referència. Ell no és l'home i, per descomptat, té els seus propis paràmetres.

La primera - la forma. Amb l'ajuda d'un webmaster estableix una mena de camp. Això pot ser:

  • Cercle - cercle;
  • rectangle - rect;
  • Polygon - poli;
  • Zona de descans d'imatges - per defecte.

Següent - coords. Amb l'ajuda de les coordenades de l'àrea de píxels. L'origen d'aquest sistema de coordenades - la cantonada superior esquerra. Va ser llavors, i és el principal problema - no és tan fàcil de definir les coordenades dels píxels, sobretot si no hi ha familiaritat amb els gràfics per ordinador.

Esmentem també bastant famós href, que estableix la direcció de l'enllaç.

I l'última opció, que és d'esmentar, - nohref. Això demostra que aquesta regió no és una referència.

Per descomptat, això no és una llista completa dels paràmetres que es poden definir la imatge o l'enllaç de ruta. Però, al mateix temps, serà suficient per crear un enllaç brillant i colorit o fins i tot la totalitat del seu sistema.

consells

Sigui quin sigui el camí per a la creació d'enllaços, imatges que triï, l'important és que la imatge original era bona. Intenta triar els dissenys que no criden l'atenció, no irritin els colors brillants o patrons. Això és especialment important per a un mapa del lloc. Pot fer un collage de diverses fotos, enfosqueixen, o encendre un dels filtres en un programa de gràfics.

Quan es crea un mapa del lloc es recomana triar una imatge amb suau, no irritant per als patrons oculars. Creguin-me, no sempre és la clau de l'èxit - brillant -link imatge. "VKontakte", però, sovint se centren només en la brillantor i vistositat, per tal d'atraure nous visitants.

troballes

Per resumir. Estem amb vostès descobert la manera de fer una referència d'imatge-en-imatge, i es veia en dues formes en què igualment es pot utilitzar per crear un menú de diversos nivells de dificultat. A més, ens vam adonar de com configurar la imatge-enllaç i aprendre sobre els principals paràmetres que li permeten crear tot un pràctic mapa del lloc, grup o comunitat.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ca.atomiyme.com. Theme powered by WordPress.