The Basics: Web Developers Forum

Purple Haze

This tutorial was just put together by me today, it's not much, but I hope it will at least help a couple of people who are new to HTML. If you have any suggestions or questions about it, feel free to post them in this topic.

Note: due to the forum's restriction on the amount of images allowed in a single post, the tutorial is split into four posts in this topic.

This tutorial is split among four sections in this post. This is how the tutorial is organized:
- Introduction to images on the web
- Rollovers
- Preloading and images in text
- Image maps

1. Introduction to images on the web

Images are used on every web page on the net. They are used as logos, icons, screenshots, and more. Images add to the look and feel of every web site. This tutorial will cover how to place images on a web page, how to links images, and ways you can customize your pictures. So let's get started.

There are a couple of different types of images that you can display on a web page. Here are the most common types:
.gif - Graphics Interchange Format
.jpeg and .jpg - Joint Photographic Experts Group
.png - Portable Network Graphics

For this tutorial, we will use this image .

Here is how you display an image:
Now if you are wondering, "What is happening here?" here is how it works:
img is the tag. It tells the browser that you are requesting an image to be displayed on the web page. The image will appear wherever you place your tag.
src is the attribute that tells the <img> tag which image to show. In this case, the image we want is http://talkwebdev.com/images/statusicon/forum_new.gif, so we place that inside the quotes.

If you use the code above, for any image, it will display the image exactly as it is. There will be no changes made to it. But let's try and make some changes to it. Below are some attributes for the <img> tag to make your image look different.

Attributes for the <img> tag
alt - This is the alternate text attribute of an image, and is a required attribute. If an image does not appear, or a user has disabled images, this is the text that will appear in place of that image.
title - Text that is displayed as a tooltip when the user moves his or her cursor over the image
width - The width attribute tells how wide the image should be displayed (in pixels). However, you can also use a percentage to tell it to take up that much of the percentage of the screen. If you used width="100%", the image will automatically be as wide as the user's screen, no matter what.
height - Tells how tall the image should be displayed (in pixels). You can also use a percentage for this as well.

Now let's try some of these out.
Our image is now much bigger since we specified height and width. Also, if you try put your mouse over the image for a second, a text box will appear with "This is an image" in it.

Note: To settle any confusion about the "alt" attribute, it is not what is supposed to be used for tooltip text. That functionality is reserved for the "title" attribute, which is a core attribute that can be used on almost any HTML tag.

Note: It is always good to specify the width and height of an image. It shortens loading time because the browser does not have to "find out" what the width and height are for the image, it is already specified. But be careful about specifying width and height because, as you can see in our example, altering the width and height of an image from the original may cause the image to become unproportional or will decrease the quality if you make the image larger.

Now that we know how to create an image and modify it, let's link it. We will use the same image we used before. You link images the same way you would with text, with the <a> tag and the href attribute. Here is how we would do it in HTML:
What this is doing is making it so the user can click on the image and it will bring us to this page: http://talkwebdev.com. We place what we want linked after the <a> tag. Then we place the </a> tag to declare when we want it to stop linking to a page.

You'll probably notice a border around the image even though we did not specify for there to be one. This is because, by default on certain browsers, an image will have a border around it if it is linked. We can get rid of this border by specifying the border to be 0 pixels in the style attribute:
Note: we are not using the border attribute because it's depreciated.

Purple Haze

2. Rollovers

An image rollover is when a user drags his or her cursor over an image and it switches to another image. If you have browsed the internet before, then I'm sure that you have seen this on many sites. It is very popular, and I will show you how it is done. Before we start, you'll have to know about event attributes.

HTML 4.0 brought the ability for HTML events to trigger actions in the user's browser. It allowed scripts to be run when the user did certain actions. Below are just a few of the event attributes that you can apply to any HTML tag!
onmouseover - Runs script when mouse cursor moves on the element
onmouseout - Runs script when mouse cursor moves off the element
onclick - Runs script when mouse is clicked
onload - Runs script when document loads

For a full list, visit http://www.w3schools.com/xhtml/xhtm...tattributes.asp
For more about using DHTML with event attributest, visit http://www.w3schools.com/dhtml/dhtml_events.asp

For this tutorial, we are going to make this image change upon a user moving his or her cursor over it.

Here is the code to do the image rollover:
Cool, isn't it? But let's break down the code so you understand what is happening here.

Here is an explanation of the event attributes in the <img> tag above:
- The onmouseover attribute is changing the image of the element that it's it in to "http://talkwebdev.com/images/statusicon/forum_new.gif".
- The onmouseover attribute is changing the image of the element that it's it in back to "http://talkwebdev.com/images/statusicon/forum_old.gif". This is needed if you want the image to change back to its original state when the user moves his or her mouse off of the image, it is not done automatically.

Note: for the source, remember to use single quotes (') so that it doesn't mess with the double quotes (") of the attributes of the <tag>.

One thing that a lot of people have asked me about before is how to make it so when users put their cursors over an image, it changes a different image. Since so many people have asked me for this, I will explain how to do it.

Let's make it so when a user puts his or her cursor over this , then this will turn into this .

Here's the code:
If you put your mouse over the lock on the left, the picture to the right of it will change. It's pretty much the same as a normal rollover with one small difference.

The on the right has the name attribute in its <img> tag. This attribute is an identifier to help scripts recognize elements (you'll notice that we have identified the image with the name "rollover"). The left image's <img> tag has "rollover" in place of "this" in the event attributes' scripts. This is because we are pointing the scripts to a different element. The rollover is now being applied to another image rather than itself. Neat, isn't it?

Purple Haze

3. Preloading and images in text

Now that you have made a rollover script, you may be noticing (depending on the size of the rollover image) that it takes a while for the picture to come up after you put your cursor over it. This is because the rollover image is not loaded along with the rest of the document; it is loaded when your cursor moves over the image. What we will need to do is make it so that those images load with the rest of the document so that there is no loading time for the rollover image.

Note: as stated before, this is not true in the example of the tutorial since the images have a small byte size, but in larger images, you may need to do this.

Here is the code to preload images:
This code is not HTML, it is JavaScript, and it must be placed in between the <head> and </head> tags of your web page.

For more on JavaScript, visit http://www.w3schools.com/js/default.asp

To adapt it to your page, simply change the image file names to match your images. To add another image, simple add another variable:
Simple, isn't it?

Have you ever tried to make text wrap around an image in a paragraph only to realize that the line of text you put the image in will become as tall as the picture? Here is an example of that:
As you can see, this does not look very attractive. But it's simple to fix, all you have to do is align the image:
The float property is the way CSS aligns elements, and the padding property defines how much space is between the image and text. This can be very useful for articles when you want a big picture of the first letter of the article on the left .

Note: we are not using the align or hspace attributes because they're depreciated.

Purple Haze

4. Image maps

Image maps are very useful to webmasters. They allow one image to link to many different places. For this tutorial, I will be using the Google logo as our picture to experiment with:



To make this image link to a file, we simply wrap the <a> tag around it. But if we want only certain parts of the image to link to a file, we have to use an image map. The only new tags in this tutorial are the <map> tag and the <area> tag. The <map> tag defines an image map, and the <area> tag, which is always nested in its <map> tag declares an region (or "hot spot"). Below are the attributes that you will need to set in order to get the image map working.

Attributes for the <map> tag:
name - The image map's unique identifier
id - Another identifier attribute. Both are used to stay compatible with different browsers.

Attributes for the <area> tag:
href - The link for the area
alt - This is the alternate text attribute, and is a required attribute. If an image does not appear, or a user has disabled images, this is the text that will appear in place of the area.
shape - What shape the area is. The possible values for this attribute are "circ", "rect", and "poly", of which shapes are circle, rectangle, and polygon respectively. One other possible value for the shape attribute is "default", which refers to all unlinked portions of the image.
coords - The coordinates of the shape relative to the x and y axis in terms of pixles. Coordinates are done differently for each of the three shapes and will be demonstrated below.

Attributes for the <img> tag
usemap - This tells the browser what image map the image will refer to; you will know this by the "name" attribute in the <map> tag. There must be a number sign "#" in front of the name.

Now, let's make it so the "G" in Google is a circular area linked to http://google.com:
A circle shape has three numbers for the "coords" attribute. The first two numbers are the coordinates of the circle's center, and the thrid number is the radius of the circle in pixles.

In this next example, the two "o's" in Google are a rectangular area linked to http://talkwebdev.com:
Rectangle coordinates are easy. This first two numbers are the coordinates of the upper-left corner of the rectangle, and the second two numbers are the coordinates of the lower-right corner of the rectangle.

The next example has the "l" and "e" as a polygon area linked to http://talkwebdev.com, and links the rest of the image area to http://yahoo.com:


Well, I hope this tutorial has solved any problems you may have had with images. Feel free to post any comments.

Archaic Sage

Another brilliant tutorial. Th eonly thing I do have to say is, in XHTML you need a closing slash in <img> tags. Which you have forgotten to add.

Purple Haze

Yeah, you're right, they should have the closing slash. I must have forgot it with the first image and never realized it as I was copying and pasting it.

__________________
Sticky Icky