CIT041J Index > Lecture Notes - Images and ImageMaps

CIT041J Lecture Notes

Many to One

Our current situation has been “one to one”; each picture has a highlighted and non-highlighted image. The next variation is to have several links, all of which change a single picture. In this situation, which you may see here, rolling over the small images replaces the large image. If you look at the code, you will see that there are three “on” images, but only one “off” image. This means we need only one image name (called bigPicName in the code) instead of an array of image names. Because none of the small pictures is going to be replaced, we really do not need to give them name= attributes, but they are there just for the sake of completeness.

The script also has two different functions. The showBig( ) function requires a parameter—we need to know which big picture to display. The showEmpty( ) function does not need any parameters, since there is only one picture when no link is active.

Many to Many

The next step up in complexity is to combine the one-to-one and many-to-one programs to create a page where rolling over a small picture will highlight it and also load the large picture. The screenshot below shows part of such a page. In this case, we highlight a small image by changing it from black and white to color.

Korean image highlighted and loaded

This particular example is very close to the specification for one of the class assignments, so we are not showing you the page and its code. We will say that, rather than use separate functions for modifying the small picture and loading the large picture, we combined their code into a single function. Your mileage may vary.

Imagemaps

Let’s say we want to have rollovers activated for the shapes in this image. Since this is one image, not three, we need to attach an imagemap. Mouse over the image below, and you can see it in action. As you can see from the HTML, the picture is in file shapes0.png.

square, circle, and triangle

<img src="rollover/shapes0.png" name="shapes" usemap="#shapemap"
    width="283" height="103" alt="square, circle, and triangle"
    border="0" />

Important: It is not possible to replace a part of an image. We have to replace the whole image, so we will need the following image files (named shapes1.png, shapes2.png, and shapes3.png):

square, circle, and triangle; square highlighted square, circle, and triangle; circle highlighted square, circle, and triangle; triangle highlighted

The imagemap will look like a normal imagemap, except that we will add onmouseover and onmouseout attributes to invoke JavaScript.

<map name="shapemap">
    <area shape="rect" coords="20,17,86,88"
        href="#" onmouseover="highlight(1);" onmouseout="highlight(0);" />
    <area shape="circle" coords="134,53,30"
        href="#" onmouseover="highlight(2);" onmouseout="highlight(0);" />
    <area shape="polygon" coords="227,10,180,88,280,88,227,10"
        href="#" onmouseover="highlight(3);" onmouseout="highlight(0);" />
</map>