Need suggestion to display image dynamically in the foreground of other image in web page

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