Content deleted Content added
mNo edit summary |
→Creation and use: rm examplefarm |
||
| (20 intermediate revisions by 18 users not shown) | |||
Line 1:
{{Short description|Method of adding links to parts of an image}}
{{More citations needed|date=September 2023}}
In [[HTML]] and [[XHTML]], an '''image map''' is a list of coordinates relating to a specific [[image]], created in order to [[hyperlink]] areas of
==Server-side==
'''Server-side image maps''' were first supported in [[Mosaic (web browser)]] version 1.1.<ref>{{cite web|url=http://1997.webhistory.org/www.lists/www-talk.1993q2/0343.html|title=IMG extension for Mosaic 1.1}}</ref>
The [[HTML]] code for this type of
<syntaxhighlight lang="
<a href="/imagemapper"><img src="image.png" ismap /></a>
</syntaxhighlight>
Line 20:
A client-side imagemap in HTML consists of two parts:
# the actual image, which is embedded with the <code><img></code> tag. The image tag must have an attribute ''usemap,'' which names the imagemap to use for this image (multiple imagemaps may exist on a single page).
# A <code><map></code> element, and inside that, <code><area></code> elements, each of which defines a single clickable area within the imagemap. These are similar to the <code><a> tag</code> defining which [[Uniform Resource Locator|URL]] should be opened for an ordinary web link. A <code>title</code> attribute may be provided, which may be rendered as a [[tooltip]] if a desktop user hovers their mouse pointer over the area. For [[web accessibility]] reasons, it is often important – and in some cases it may even be a legal or contractual requirement – to provide an <code>alt</code> attribute describing the link that [[screen reader]] software can read to, for example, [[Blindness|blind]] users.<ref name='access-ability'>{{cite web|url=http://accessibility.psu.edu/imagemaps|title=Image Maps in HTML|work=AccessAbility|publisher=[[Penn State University]]|
The <code><area></code> elements can be rectangles (<code>shape="rect"</code>), polygons (<code>shape="poly"</code>) or circles (<code>shape="circle"</code>).
Shape-Values are coordinate-pairs. Every pair has an X and a Y value (from left/top of an image) and is separated with a comma.
* Rectangle: Set four coordinates: "x1,y1,x2,y2"
* Polygon: Set as many coordinates as
* Circle: One coordinate-pair and another value with a radius: "x1,y1,radius"
The following example defines a rectangular area ("9,372,66,397"). When a user clicks anywhere inside this area, they are taken to the [[English Wikipedia]]'s home page.
<syntaxhighlight lang="
<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
Line 38:
===CSS===
A more
==Creation and use==
Line 44:
<imagemap>File:JoshuaReynoldsParty.jpg|Image map example of [[The Club (dining club)|The Club]]. Clicking on a person in the picture causes the browser to load the appropriate article.|350px|thumb
circle 100 141 20 [[Joshua Reynolds|An unknown portrait]]▼
poly 133 343 124 287 159 224 189 228 195 291 222 311 209 343 209 354 243 362 292 466 250 463 [[Samuel Johnson|Dr Johnson - Dictionary writer]]▼
rect 286 87 376 191 [[Joshua Reynolds|unknown painting]]▼
rect 450 86 584 188 [[Joshua Reynolds|prob. The Infant Academy 1782]]▼
poly 76 224 84 255 43 302 62 400 123 423 121 361 137 344 122 290 111 234 96 225 [[James Boswell|Boswell - Biographer]]
▲poly 133 343 124 287 159 224 189 228 195 291 222 311 209 343 209 354 243 362 292 466 250 463 [[Samuel Johnson|Dr Johnson - Dictionary writer]]
poly 190 276 208 240 229 228 247 238 250 258 286 319 282 323 223 323 220 301 200 295 [[Joshua Reynolds|Sir Joshua Reynolds - Host]]
poly 308 317 311 270 328 261 316 246 320 228 343 227 357 240 377 274 366 284 352 311 319 324 [[David Garrick|David Garrick - actor]]
Line 51 ⟶ 54:
rect 418 220 452 287 [[Pasquale Paoli|Pasqual Paoli - Corsican patriot]]
poly 455 238 484 253 505 303 495 363 501 377 491 443 429 439 423 375 466 352 [[Charles Burney|Charles Burney - music historian]]
poly 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 [[Francis Barber|servant - poss. Francis Barber]]▼
poly 501 279 546 237 567 239 572 308 560 326 537 316 530 300 502 289 [[Thomas Warton|Thomas Warton - poet laureate]]
poly 572 453 591 446 572 373 603 351 562 325 592 288 573 260 573 248 591 243 615 254 637 280 655 334 705 396 656 419 625 382 609 391 613 453 [[Oliver Goldsmith|Oliver Goldsmith - writer]]
▲rect 450 86 584 188 [[Joshua Reynolds|prob. The Infant Academy 1782]]
▲rect 286 87 376 191 [[Joshua Reynolds|unknown painting]]
▲circle 100 141 20 [[Joshua Reynolds|An unknown portrait]]
▲poly 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 [[Francis Barber|servant - poss. Francis Barber]]
▲rect 12 10 702 500 [[The Club (dining club)|Use button to enlarge or use hyperlinks]]
desc bottom-left
Line 64:
It is possible to create client-side image maps by hand using a text editor, but doing so requires web designers to know how to code HTML as well as how to enumerate the coordinates of the areas they wish to place over the image. As a result, most image maps coded by hand are simple polygons.
Because creating image maps in a text editor requires much time and effort, many applications have been designed to allow web designers to create image maps quickly and easily, much as they would create shapes in a [[vector graphics editor
Image maps which do not make their clickable areas obvious risk subjecting the user to [[mystery meat navigation]]. Even when they do, where they lead may not be obvious. This can be partially remedied with rollover effects.<ref>{{cite book
| last = Flanders
| first = Vincent
| title = Web Pages That Suck: Learn Good Design by Looking at Bad Design
| publisher = Sybex Inc
| date = March 1998
| ___location = San Francisco
| url = https://archive.org/details/webpagesthatsuck00flan
| isbn = 978-0-7821-2187-2
| url-access = registration
Line 92 ⟶ 87:
{{reflist}}
[[Category:HTML]]
| |||