|
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.
|
