Your Electronic Books

)

3. Add thumbnails. In each case, the swapPhoto value is the file name of the image to
be loaded. Remember that the path to the images was defined in step 1, so it??™s not
needed here. The href value links directly to the full-size image to accommodate
users who have disabled JavaScript.
Switching images using JavaScript
USING LINKS AND CREATING NAVIGATION
185
5
?? alt="sheep" width="100" height="75" />
?? alt="hillside" width="100" height="75" />
4. Add some CSS. To the gallery.css file, add the following rules, the first of which
sets a width value for the wrapper div, and the second of which removes the
default border from image-based links.
#wrapper {
width: 500px;
}
a img {
border: 0;
}
And that??™s all there is to it. The solution is elegant and doesn??™t require pop-up windows.
Instead, users can see thumbnails on the same page as the main image, making
navigation through the portfolio that much easier. For those users who don??™t
have JavaScript, the values in the href attributes ensure they still get access to the
full-size images, too.


Pages:
255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279