Web Programming: HTML Using Map

Ada saatnya, daripada memberikan link pada banyak gambar seperti,

<a href=”#”><img src=”..”></a> …

kita diperlukan membuat banyak link dari 1 gambar, gimana caranya ?

Begini nih caranya,

<img src=’..” border=’0′ usemap=’#nav’ />

<map name=’nav’>

<area shape=’rect’ title=’..’  coords=’.., .., .., ..’ href=’..’ />

</map>

contoh bisa dilihat di: geraibunda.multiply.com

Smoga bermanfaat.

Tambahan:

Notes on Coords of <area>

Definition and Usage

The coords attribute specifies the x and y coordinates of an area.

The coords attribute is used together with the shape attribute to specify the size, shape, and placement of an area.

The coordinates of the top-left corner of an area are 0,0.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The coords attribute is supported in all major browsers.


Syntax

<area coords=”value” />

Attribute Values

Value Description
x1,y1,x2,y2 If the shape attribute is set to “rect”, it specifies the coordinates of the top-left corner and the bottom-right corner of the rectangle
x,y,radius If the shape attribute is set to “circle”, it specifies the coordinates of the circle center and the radius
x1,y1,x2,y2,..,xn,yn If the shape attribute is set to “poly”, it specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser must add the last coordinate pair to close the polygon

Source: w3schools.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s