homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Image map Pop up window
mklaro

10+ Year Member



 
Msg#: 3030885 posted 1:25 am on Aug 2, 2006 (gmt 0)

Im having much trouble trying to get a Pop-up window with an
image-map, heres the catch though I dont want to pop up another html file but just an image.

I have about 18 images on a page that are all image mapped. they each need to pop open a larger version of that image which are of different sizes then each other.

I have found posts regaridng image map and webpages but not of just images. This is really holding me up and im stumped. Any help would be very much appreciated. Thanks in Advance!

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3030885 posted 12:44 am on Aug 3, 2006 (gmt 0)

Well, this will work, but example two is far better. You will have to create the five simple images:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ImageMap Popup</title>
<script type="text/javascript">
function newWin(img,w,h) {
if (! img) { return; }
var day= new Date();
var id = day.getTime();
var ww = w+20;
var wh = h+20;
var params = 'width='+ww+',height='+wh+',scrollbars,resizable';
var win = open(img,id,params);
}
</script>
</head>
<body>
<p>Below is a map with magenta, green, blue, and yellow in each of it's four quadrants, accompanied by 4 images of the same.</p>
<img usemap="#somemap" src="map.gif" width="200" height="100" border="0" alt="imagemap">
<map name="somemap" id="somemap">
<area shape="rect" coords="0,0 100,50" href="magenta.gif" onClick="newWin('magenta.gif',100,50); return false;" alt="Magenta Image">
<area shape="rect" coords="50,0 200,50" href="blue.gif" onClick="newWin('blue.gif',100,50); return false;" alt="Blue Image">
<area shape="rect" coords="0,50 100,100" href="yellow.gif" onClick="newWin('yellow.gif',100,50); return false;" alt="Yellow Image">
<area shape="rect" coords="100,50 200,100" href="green.gif" onClick="newWin('green.gif',100,50); return false;" alt="Green Image">
</map>
</body>
</html>

But let's pass along a title and add a close button as well, no reason not to dress it up a bit:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ImageMap Popup</title>
<script type="text/javascript">
function newWin(img,title,w,h) {
if (! img) { return; }
var day= new Date();
var id = day.getTime();
var ww = w+75;
var wh = h+125;
var params = 'width='+ww+',height='+wh+',scrollbars,resizable';
var msg='<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN" "http:\/\/www.w3.org/TR\/html4\/loose.dtd">\n'+
'<meta http-equiv="Content-Type" content="text\/html; charset=iso-8859-1">\n'+
'<html><head><title>'+title+'<\/title><\/head>'+
'<style type="text\/css">\n'+
' html,body { font-family: Arial,Helvetica,Sans-Serif; }\n'+
'h3 { text-align: center; }\n'+
'p,form { text-align: center; }\n'+
'<\/style><body>\n'+
'<h3>'+title+'<\/h3>\n <p><img src="'+img+'" width="'+w+'" height="'+h+'" border="0" alt="'+title+'"></p>\n'+
'<p><hr width="100%" size="1"><form><input type="button" onClick="javascript:window.close();" value="Close Window">\n'+
'<hr width="100%" size="1"><\/form><\/p><\/body><\/html>\n';
var win = open('',id,params);
win.document.write(msg);
win.document.close();
}
</script>
</head>
<body>
<p>Below is a map with magenta, green, blue, and yellow in each of it's four quadrants, accompanied by 4 images of the same.</p>
<img usemap="#somemap" src="map.gif" width="200" height="100" border="0" alt="imagemap">
<map name="somemap" id="somemap">
<area shape="rect" coords="0,0 100,50" href="magenta.gif" onClick="newWin('magenta.gif','Magenta Rules!',100,50); return false;" alt="Magenta Image">
<area shape="rect" coords="50,0 200,50" href="blue.gif" onClick="newWin('blue.gif','Blue is Cool',100,50); return false;" alt="Blue Image">
<area shape="rect" coords="0,50 100,100" href="yellow.gif" onClick="newWin('yellow.gif','Yellow is Cowardly',100,50); return false;" alt="Yellow Image">
<area shape="rect" coords="100,50 200,100" href="green.gif" onClick="newWin('green.gif','Green is Envious',100,50); return false;" alt="Green Image">
</map>
</body>
</html>

What is happening:
- In both examples, we call newWin with the onClick event, but leave the href to the image in case Javascript is disabled. This allows users with Javascript disabled to still see your content. If Javascript is enabled, return false prevents the page from going to the picture specified in href.

- We pass image name, width, and height to newWin so it knows how big to make the window, note we add on a litle bit to the image size. Never make a window unsizable or without scrollbars,, you never really know if your users' environment will be able to see the whole image as you do.

- Also in both examples, we use the Date() and getTime() methods to create a unique id and name for each window. If we did not do this, instead of opening a new window it would put the new content in the same window each time we click the imagemap.

- In example 1, we simply provide the image as a URL, just like a link it displays without html. In example two, we additionally pass a title value, and use the document.write method to create a mini-html document, which allows us to add the heading, style for formatting, and the close window form and button.

- After performing a document.write, you must flush the buffer with document.close() or all you'll get is a white window.

Check please! :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved