The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Controlling size of popups from html image map
ACS6
post Mar 7 2008, 04:07 AM
Post #1





Group: Members
Posts: 5
Joined: 7-March 08
Member No.: 5,135
Hi Guys,

I need major help here. Just managed to figure out how to create image maps using html, I know it's a no-brainer for most, but now I need to control the size of the new window that pops up when a certain spot on the map is clicked. At the moment, I get a full window with all the toolbar options and huge white background space, when all I need is a small 400X400 pixel frame to display a jpeg.

How can I achieve that? I'm using MS Frontpage...it's the only program I am comfortable using coz I really know nuts about programming.

Thanks in advance!

ACS6
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 7 2008, 04:43 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
See the FAQ entry How do I create a link that opens a new window of a specific size?.

You also might want to take a look at CSSplay's Image map for detailed information, which is a fancy way in CSS, without opening new windows.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ACS6
post Mar 17 2008, 10:09 PM
Post #3





Group: Members
Posts: 5
Joined: 7-March 08
Member No.: 5,135
Thanks for the feedback. Below is the html script for my image map.

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>My Image Map</title>
<base target="_blank">
</head>

<body bgcolor="#402000" leftmargin="0">

<p align="left"><map name="FPMap0">
<area href="chips/8/PG8_1.jpg" target="_blank" shape="rect" coords="64, 239, 107, 281">
<area href="chips/8/PG8_2.jpg" target="_blank" shape="rect" coords="128, 237, 170, 279">
<area href="chips/8/PG8_3.jpg" target="_blank" shape="rect" coords="193, 240, 237, 281">
<area href="chips/8/PG8_4.jpg" target="_blank" shape="rect" coords="258, 238, 300, 279">
</body>
</html>

The target points to a "_blank". So how can I adjust the sizing of the new window, eliminate address bar, scroll bar etc.? I've checked out the links and they make absolute sense using Java script (which I'm also a dumbo in, only know how to cut and paste codes). But how do I, in my case of using basic rectangular image mapping shapes on a JPEG base image (via Frontpage 4.0), define the size and the resulting new window?

Thanks in advance!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 17 2008, 10:23 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Please see the FAQ entry How do I create a link that opens a new window of a specific size?

In your case, you'll put the onclick attribute in the area element, rather than in the a (link) element.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ACS6
post Mar 17 2008, 11:23 PM
Post #5





Group: Members
Posts: 5
Joined: 7-March 08
Member No.: 5,135
Thanks Darin, but I'm really struggling with this. Could you do an example with the html code I pasted above? Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 18 2008, 01:00 AM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
This is untested. I just copy-pasted from the FAQ entry and from your posted markup.
CODE
<area href="chips/8/PG8_1.jpg" target="_blank" shape="rect" coords="64, 239, 107, 281" onclick="window.open('chips/8/PG8_1.jpg', '_blank', 'width=300,height=150'); return false">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ACS6
post Mar 18 2008, 02:29 AM
Post #7





Group: Members
Posts: 5
Joined: 7-March 08
Member No.: 5,135
Darin! you're a bloody lifesaver!!!! Thanks mate. It worked wonders!!!! One more question, if I want to add a page title to it, where do I put in the code for title?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ACS6
post Mar 19 2008, 08:52 PM
Post #8





Group: Members
Posts: 5
Joined: 7-March 08
Member No.: 5,135
Hi Darin,

Please help. How do I add text to the page title for the pop up windows using your script above?

Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 20 2008, 12:20 AM
Post #9


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
You can link to an HTML document, rather than to the image. The HTML document displays the image inline, but can also include a title element, headings, captions, links, etc.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 04:34 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC