Hi Gayathri,
This can be simply accomplished by using maps on an image like so
<img src="http://pics.10026.com/?src=images/shapes.jpg" width="375"
height="102" style="border: none;"usemap="#shapes">
then defining the area of maps (coordinates...in that main form)
<map name="shapes"
<area shape="circle"
coords="58,50,40"
href="javascript:clicked_on('circle');"
title="Circle"
<area shape="rect"
coords="136,11,227,89"
href="javascript:clicked_on('rectangle');"
title="Rectangle"
<area shape="polygon"
coords="309,13,358,89,257,89"
href="javascript:clicked_on('triangle');"
title="Triangle"
<area shape="default"
nohref
</map>
the general syntax being
The general syntax for themap
element is:
<map name="map-name"><areashape="area shape"coords="area coordinates"href="area hyperlink"or nohreftarget="hyperlink target"title="area title"><areashape="area shape..."</map>
The name of the image map specified in theusemap
attribute is really a URI, which means it can reference a map in another file on your website, if required.
For example, if you saved yourmap
element in a file calledshapes.map
in the same directory as your HTML file, you would reference the map using:
<img src="http://pics.10026.com/?src=images/shapes.jpg" width="375"
height="102" style="border: none;"usemap="shapes.map#shapes">
Then all you need is to attach onmouseover/onmouseout in those image maps like so in the example
<img src="http://pics.10026.com/?src=toolbar.gif" width=16 height=46 usemap="#toolbar" alt="Toolbar" border=0>
<MAP NAME="toolbar">
<AREA SHAPE="rect" COORDS="0,0,16,15" href="http://links.10026.com/?link=jv_mapov.html" onMouseOver="swapImage(img)" onmouseout="swap_restore" id=Showpic>
</MAP>
then the javascript
<script language="javascript">
function swapImage(sImage)
{
sImage = "http://www.wollinweb.com/blogimages/images/" + sImage + ".jpg";
document.Showpic.src = sImage;
}
</script>
Look at this article herehttp://blogs.msdn.com/lisawoll/archive/2004/10/27/248763.aspx
And heres a working example
<SCRIPT LANGUAGE="JavaScript">
current_overID = "";
last_overID = "";
function item (img_name,width,height)
{
img_prefix = img_name;
this.slide_img = new Image (width,height);
this.slide_img.src = img_prefix + ".gif";
}
function new_item (img_name,width,height)
{
item [img_name] = new item (img_name,width,height);
}
functionmouseover (itemID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.jrcmap.src = item [current_overID].slide_img.src;
}
}
new_item ("lipsv4",210,141);
new_item ("truckin",210,141);
add all images here...etc.
// -->
</SCRIPT>
<MAP NAME="jrc">
<AREA SHAPE="RECT" COORDS="0, 0, 113, 67" href="http://links.10026.com/?link="
OnMouseOver="mouseover('truckin');window.defaultStatus='';
window.status='Keep on Truckin\''; return true"..." OnMouseOut="mouseover('truckiss')"
etc, etc, etc.
</MAP>
Note: coords may be changed to accommodate any number of "new_item"s...!!
& add a line for your Imap and you're set:<img src="http://pics.10026.com/?src=truckiss.gif" border="0" width="210" height="141" name="jrcmap" usemap="#jrc"
Note: If your images are in another directory modify this line:this.slide_img.src ="images/" + img_prefix + ".gif";
Wanna do multiple image maps?
Add this bit of code to the above script to indicate a new instance:
functionmouseover2 (itemID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.jrcmap2.src = item[current_overID].slide_img.src;
}
}
And of course add new items & change the next image mouseover:
OnMouseOver="mouseover2('newtruckin') etc. etc.
Hi naturehermit,
Thanks for that quick and detailed reply. I will try it out and let you know.
Regards,
Gayathri
You can use the example in the bottom of the post straightaway. The top part is all explanation.
Good luck
No comments:
Post a Comment