HTML and CSS Reference
In-Depth Information
Listing 6-19 shows a basic example which will create a parallelogram.
Listing 6-19.
An image map with a polygonal area
<map name="crime-map" id="crime-map">
<area shape="poly" coords="20,30,100,30,80,60,0,60">
</map>
In order to create a polygon, you must provide at least six values (three pairs of coordinates) and the
number of integers must be even. Aside from those two conditions, you are free to add as many
coordinates to the shape as you like.
Styling Anchors and Image Maps with CSS
Now that you've learned about the features of anchors and image maps, let's dive into some CSS for
changing their presentation. In this section, we'll walk you through some common techniques for styling
links.
Styling Anchors
As we showed you earlier in this chapter, links, by default, appear as blue, underlined text in the browser.
This default styling may work well for Google search results pages, but it doesn't serve the needs of most
designs you are likely to dream up or otherwise encounter. Luckily, CSS affords you plenty of opportunity
to style anchor elements. For starters, Listing 6-20 contains a little bit of CSS that changes some of the
basic presentation of a set of anchors.
Listing 6-20.
CSS for styling the default state of an anchor element
a:link {
background: #ddd;
color: #cc0000;
font-weight: bold;
text-decoration: none;
}
The results of the code from Listing 6-20 are shown below in Figure 6-3.
Figure 6-3.
Browser output of an anchor element styled with CSS
The selector used in Listing 6-20,
a:link
, instructs the browser to make the default state of links dark red,
bold, and underlined.
