|
Image maps and Image rollovers, are two powerful graphic linking
features in web design. Image maps allow one image to have more
then one link in it, and Image rollovers can create a button pressed
effect on a image.
You'll want to use
an Image map when you have a graphic that is too difficult to
cut appart and turn into different pictures that can be placed
back together. A good example of this could be a family
picture, where you want to make each family member a link
to a description page. Below is the most basic image map code
for a image.
<img src="images/family.jpg"
width="250" height="250" usemap="#map1"
border="0" alt="family" >
<map name="map1">
<area shape="rect" coords="0,0,176,26"
href="URL" alt="alt text" title="alt
text">
</map>
The image tag is the
same but that it has a new attribute called usemap This
attribute tells HTML that there is an image map used for this
graphic. Below the image tag is the image map code. Notice how
the <map>
tag has a closing tag, you can put as many <area>
tags in between the <map>
tags as you want. Each <area>
tag creates a different spot on the image that can be clickable.
Let's break down the
<area> tag
now, the first attribute is shape it can be one of three things
rect (for rectangle), circle,
or poly (for polygon). coords
is the second attribute listed, and what it does is tell the x,y
postion on the image for each point used to create the shape for
the link. The circle coords attribute has 3 values, the first
2 are the x,y coordinates for the center of the image, then the
third number is the radius length of the circle. href is
where you put in the file name of where you want to go once you
click on this area. alt is the alternate text for the shape,
and the value of the title attribute will appear below
the mouse cursor if you leave your mouse on the area for 1 second
or longer. It's a nice little feature that you can add to any
HTML link.
Image Rollovers
incorporate javascript to accomplish this effect, most WYSIWYG
(What You See Is What You Get) HTML programs have built in abilities
to create rollovers for you. But if you are using this site to
learn to write HTML, here is the code for a rollover button. This
first set of code is the javascripts used, they below in the Head
tags of the HTML file:
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i]
&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length;i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&
parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n);
return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
If you want the image
that isn't seen until you move your mouse over the button you'll
need to add this attribute to the body tag:
onLoad="MM_preloadImages('rollover_image.gif');
MM_preloadImages('rollover_image2.gif')"
For every image that
you want to preload on the page you'll need to add a MM_preloadImages
function to the onLoad attribute of the body tag. You replace
rollover_image.gif
with the actual path
and file name of the image you want to have preloaded.
Here is what the link
and image tags look like when the rollover javascript code is
applied to them
<a href="URL" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image2','','rollover_image.gif',1)">
<img name="Image2" border="0" src="image.gif" width="#" height="#">
</a>
Here the link tag has
some new attributes, onMouseOut and onMouseOver,
both of them are javascript attributes, and they are calling the
functions that are set in the javascript code in the head tags.
The image tag also has a new attribute, which is name.
This gives the image a name so that the javascript knows which
image to swap out with a different image, when your mouse moves
onto it. Below is a working version of an image rollover, view
the source of this page to look at it in action.
|
Image-Links