Chapter 3: Working With Images
Welcome to this part of "Working With Images". Here we will explore all the many ways to create quick and easy Roll-Overs, Cycling Banners, Wraparound Slideshows, and creating a Random Image script generator. These procedures here are meant to alleviate the extra work the browser has to do, which then leads to a happy user interface.
| Tag | Attribute | Description |
|---|---|---|
| img | Holds the attribute and describes the image for the browser to display | |
| src | Holds the URL to link the image for the web page | |
| width | The width in pixels for the browser to display image | |
| height | The height in pixels for the browser to display image | |
| alt | A hidden attribute used to display the name of an image if the browser is set not to show, or can't show | |
| id | An identification given to an image specifacally for that image, in which JavaScript can later manipulate |
Creating Rollovers
The example below demonstrates one of the most frequently used html code without the use of CSS and jquery. Ids and links to external images are the most important elements here, but the main coding require some javaScript. For instance, onMouseOver is triggered when the mouse is over an image, and vice versa would be the onMouseout, which refers to the mouse not over the image area.
Now for the break down for each element and attributes, so that you can get the same effect as Mr Icon Face below:
<a href="next.htm>
We start first with an A tag which tells the browser that we will be linking something, in this case it will be "next.html"
<onMouseOver="document.icon_face.src='lib/img/icon_face_happy.gif">
Now it's time to add the script following the A tag. This is known as a string of events which will to switch from one image to another. The first string represents the image that will appear when we move the mouse over the face icon, and make it happy looking.
Note: " ' ", is not the same as to what your use to when linking an image source which looks like this " <img src="" ", because this is part of a string to the script. The final image scource will be added at the end when your mouse leaves the area.
<onMouseOut="document.icon_face.src='lib/img/icon_face_sad.gif'">
This is pretty much the same string, but this time the image is set to switch back to the unhappy face icon when the mouse leaves the area.
<img src="lib/img/icon_face_sad.gif" width="131" height="132" border="0" name="icon_face" alt="icon_face" />
Finally we add the final attribute that seals the deal, this links the main image source and includes the dimenetions, the name to associate it's self with the begining string, and an alternative Alt name incase the link is broken. The alt just helps identify what is supposed to be in this area.
The full tag should look like this: <a href="next.html" onMouseOver="document.icon_face.src='lib/img/icon_face_happy.gif'" onMouseOut="document.icon_face.src='lib/img/icon_face_sad.gif'"><img src="lib/img/icon_face_sad.gif" width="131" height="132" border="0" name="icon_face" alt="icon_face" /></a>
EXAMPLE 1 - Creating More Effective Rollovers
Welcome to this part of "Creating More Effective Rollovers". Here we will examine the two rollover buttons below to see how we got this result by using an external javaScript file, and explain their attributes.
First try it out for yourself and you'll notice that when you move the mouse over one of the buttons, it turns to RED indicating that it is on, but if you move off the area, the button then goes back to BLUE indicating that it is off.
| HTML Code | JavaScript Code |
|---|---|
| Your code should look like so: | Your code should look like so: |
<!DOCTYPE html>
<html>
<head>
<title>My JavaScript page<⁄title>
<script src="script04.js"><⁄script>
<⁄head>
<body>
<a href="#">
<img src="lib⁄images⁄button1_off.gif" width="113"
height="33" border="0" alt="button1"
id="button1" ⁄><⁄a>
<a href="#"><img src="lib⁄images/button2_off.gif"
width="113" height="33" border="0" alt="button2"
id="button2" ⁄><⁄a>
<⁄body>
<⁄html> |
window.onload = writeMessage;
alert("This page requires JavaScript.")
|
EXAMPLE 2 - Building Three-State Rollovers
Bla...Bla...Bla...
EXAMPLE 3 - Triggering Rollovers from a Link
Bla...Bla...Bla...
EXAMPLE 4 - Making Multiple Link Change a Single Rollover
Bla...Bla...Bla...
EXAMPLE 5 - Working with Multiple Rollovers
Bla...Bla...Bla...
EXAMPLE 6 - Creating Cycling Banners
Bla...Bla...Bla...
EXAMPLE 7 - Adding Links to Cycling Banners
Bla...Bla...Bla...
EXAMPLE 8 - Building Wraparound Slideshows
Bla...Bla...Bla...
EXAMPLE 9 - Displaying a Random Image
Bla...Bla...Bla...
EXAMPLE 10 - Cycling Images with a Random Start
Bla...Bla...Bla...