I am playing around with Image Mapping and trying to add the "onmouseover" effect to display a larger picture (there's a bunch of tiny images on one large image) for the mouseover effect.
Can someone help?

<area shape="rect" coords="1076,5,1125,54" href="URL link here" target="_self" alt="Picture Name Here" onmouseover="" >

In order to enlarge the images, you need a javascript routine or something similar to actually perform the task. The onmouseover will simply activate the script. See this for an example.

Could you give a more specific link, Carefree? They don't have a website search; it's a Google search.

Couldn't find the code there anymore, myself. Here's an alternative (without using javascript):

Originally posted by Carefree
Couldn't find the code there anymore, myself.

Well, that helps me to not feel so stupid! (lol)

Is your script just for single pictures though, Carefree?

I have an image that's 1130px x 162px and it has 50 tiny images on it. I've done image mapping to create links to forums for each of the images but thought it would be cool to have the mouseover effect and show a large pic of each tiny image.

Do you think the 50 tiny images on this image is just too much for mouseover effect to even work? Am I not fully understanding this?

Here's everything Paint Shop Pro came up with when I tried to do the mouseover while doing the image mapping.

<img name="large_pic_with_the_50_tiny_images_name_here" src="/images/large_pic_with_the_50_tiny_images_name_here.png" width="1130" height="162" border="0" usemap="#large_pic_with_the_50_tiny_images_name_here">

<map name="large_pic_with_the_50_tiny_images_name_here">
<area shape="rect" coords="56,4,106,54" href="Forum Link Here" target="_self" alt="Title Name"
title="Title Name" onmouseover="if(document.images) document.large_pic_with_the_50_tiny_images_name_here.src='/forum/images/mouseover_image_name_here.png';" ></map>

This is an old topic, but I just stumbled on it and realized I never answered. Sorry it took so long.
Here's how you do it. All the pieces of the same color should have the same value. With the exception of the "(document.images)", anything in parentheses should be replaced with the proper data, the parentheses should not remain.

Here's the code with sample data.

resizeimgs.js

document.writeln("<link rel=stylesheet type=text/css href='resizeimgs.css'>");
document.writeln("<div id=showimage style='position:absolute;visibility:hidden;border:1px solid black'></div>");


// =============================================================================
// Begin user defined variables
// =============================================================================
var resizeType = 1; // 0 = Dynamically resize to a fraction of the users desktop
// width divided by the dynamicDivisor variable below. // (i.e. 1024/4 = 256 or 1280/4 = 320)
// 1 = Resize the image if it is wider than the fixedWidth
// variable below
var enlargeType = 0 // 0 = Opens in the same window
// 1 = Opens in a new window
var fixedWidth = 480; // Resize the image if it is wider than this many
// pixels. Only used when resizeType = 1. var dynamicDivisor = 0; // Resize images to users screen width divided by
// this number. Only used when resizeType = 0. var alignClose = "left"; // Values are 'left' or 'right'. Default is right. var topSpacing = 25; // Spaces the pop-up window this number of pixels
// from the top of the window
var leftSpacing = 25; // Spaces the pop-up window this number of pixels
// from the left of the window
// =============================================================================
// End of user defined variables
// =============================================================================




// =============================================================================
// Do not modify below this line
// =============================================================================
var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all
var nsx,nsy,nstemp

function walkImages(){
re = /^img/;
if (document.images){
for (a=0;a<document.images.length;a++){
if (re.test(document.images[a].name)) resizeImage(document.images[a]);
}
}
}

function doimage(imgObj,event){
if (document.images) enlargeimg(imgObj,event);
}

//Thumbnail image viewer-
//© Dynamic Drive (www.dynamicdrive.com)

function resizeImage(thisimage) {
if (resizeType == 0) fixedWidth = parseInt(screen.width/dynamicDivisor);
if (thisimage.width > fixedWidth) {
thisimage.width = fixedWidth;
thisimage.style.cursor='pointer';
thisimage.title='Click the image to enlarge';
}
}

function enlargeimg(which,e){
if (resizeType == 0) fixedWidth = parseInt(screen.width/dynamicDivisor);
if (which.width < fixedWidth) {return false;}
if (enlargeType == 0) {
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (crossobj.style.visibility=="hidden"){
crossobj.style.left = (ns6? pageXOffset : document.body.scrollLeft) + leftSpacing
crossobj.style.top = (ns6? pageYOffset : document.body.scrollTop) + topSpacing
alignRE = /^left$/i
crossobj.innerHTML= (alignRE.test(alignClose))? '<div class=tvhead align=left id=drag> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> <span class=tvclose onClick=closepreview()>Close</span> </div><img src="'+which.src+'">' : '<div class=tvhead align=right id=drag> <span class=tvclose onClick=closepreview()>Close</span> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> </div><img src="'+which.src+'">';
crossobj.style.visibility="visible"
}
else
crossobj.style.visibility="hidden"
return false
}
else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which.src+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}
else
return true
}
else if (enlargeType == 1) {
eval('window.open("showpic.asp?pic=' + which.src + '","","width='+which.width+'px,height='+which.height+'px,resizable=1,scrollbars=0")')
}
}


function closepreview(){
crossobj.style.visibility="hidden"
}

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
document.onload=walkImages();

Golfman, she isn't trying to resize any images. She intends to create an image map (with clickable hyperlinked areas of the photo) and wanted a mouseover, popup effect for the different sections of the mapped photo.

ok

Oh wow! I can hardly wait to try this!
Thank you so much!