Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 14 ■ IMAGES


Image Example


Representative Excerpts from the HTML


<h1>Northwest USA</h1>

<div id="states">
<img src="nw.gif" width="437" height="328"
alt="Northwest" usemap="#nw-map" class="shadowed" />

<a id="washington" href="washington.html" class="overlay">Washington</a>
<a id="oregon" href="oregon.html" class="overlay">Oregon</a>
<a id="idaho" href="idaho.html" class="overlay">Idaho</a>

<a id="olympia" class="bang-bg" href="olympia.html" title="Olympia">
<span class="screenreader-only">Olympia</span></a>
<a id="salem" class="flag-bg" href="salem.html" title="Salem">
<span class="screenreader-only">Salem</span></a>

<div id="info" class="bg">
<div class="tl"><div class="br"><div class="trc"><div class="blc pad">
<p>Click a state to load information about that state.</p>
<p>Click a symbol to load information about that location.</p>
</div></div></div></div></div>
</div>
Free download pdf