Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Changing Styles on Anchored Links

Problem

You want to change the style of elements within a web page when a user clicks on a link.

Solution

First, set up the markup with normal anchored links within the document. For this Solution, the anchored links (technically referred to as fragment identifiers) are placed within an image map:

<img src="target_header.jpg" alt="Header" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="circle" coords="115,136,72" href="#mark" />
 <area shape="circle" coords="244,145,55" href="#jessica" />
 <area shape="circle" coords="340,88,58" href="#trueman" />
 <area shape="circle" coords="480,287,79" href="#katrina" />
</map>
<div class="bios">
 <dl id="katrina">
  <dt>Katrina</dt>
  <dd>...</dd>
 </dl>
 <dl id="jessica">
  <dt>Jessica</dt>
  <dd>...</dd>
 </dl>
 <dl id="trueman">
  <dt>Trueman</dt>
  <dd>...</dd>
</dl>
 <dl id="mark">
  <dt>Mark</dt>
  <dd>...</dd>
</dl>
</div><!-- end /#bios -->

Then set up CSS rules for the default styles for the web page (as shown in Figure 7-35):

.bios dt {
 font-weight: bold;
}
.bios dd {
 margin: 0;
 padding: 0;
}
The default rendering of the web page

Figure 7-35. The default rendering of the web page

Then use the :target pseudo-class to define the look of the elements when the user clicks on the anchored link, as shown in Figure 7-36:

.bios dl:target {
 background-color: #999999;
 border: 1px solid black;
 padding: 1em;
 font-weight: bold;
 line-height: 1.5;
}
.bios dl:target ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required