HTML and CSS Reference
In-Depth Information
<p>
To help us serve you better.
</p>
</div>
</body>
</html>
Figure 5.4 shows how this code appears in a browser before and ater the
level-four heading is clicked. he key to making it work is in the jQuery
expression assigned to the
onclick
attribute of the
h4
element:
$('#states').toggle('slow');
he dollar sign ($) beginning the expression is an alias for the jQuery func-
tion. he expression instructs the browser to select the element with the
id
attribute of
states
. he browser applies a
toggle
to the element so that, if it
is currently hidden, it is displayed, and if it is visible, it disappears when the
heading is clicked again. he toggle method takes an optional speed param-
eter. he strings
'fast'
and
'slow'
can be used, as well as a number indicating
the efect's duration in milliseconds.
Figure 5.4: a jQuery drop menu
Every once in a while, the best way to solve a particular navigation problem is
graphically. hat's why the imagemap exists. If the website's conceptual layout
can best be presented as a two-dimensional image, with diferent areas of the
image linked to diferent pages and resources, an imagemap is appropriate. An
internal company website might use a loor plan this way, placing the image-
map on the home page, with possibly a smaller version in a sidebar common
to all pages. Imagemaps are also useful when a photograph is featured on a
page and parts of the photograph cry out for hyperlinks to external sources of
information such as Wikipedia articles or Google search results.
