PDA

View Full Version : Image Area Map links with HTML pages

splash1950
08-06-2002, 07:28 PM
My question is this, how can I control the size and other variables of a html page link from within the confines of the <AREA tag?

I have is an image of a list of songs, like from a CD or album cover. The area maps have all been built allowing for the links. They all work fine. All I want is for the new windows each to be of a particular size and without the browser controls. The window will have only a simple graphic and the songs lyrics and credits. I would want to avoid FORMS or FRAMES if I can.

I've found some neat JavaScripts, here and elsewhere, that deal with this as an <ONLOAD feature (Not what I want) and also as an independent <A HREF link (Close but not exactly...).
The <A tag used from within the <AREA tag doesn't work, or at least it doesn't appear to. And if I use a JavaScript FUNCTION, one that creates a window without menus, scrolls, sized to the linked HTML page contents, it seemed to work at first but now returns only script error messages.

Sorry to appear dense, and I did search this out pretty well first, but is there an easy 'script free' method to control a linked HTML page window's parameters (Size, menu, scrolls, etc.)? One that would be able to 'fit' the params of the <AREA tag variables?

Anybody have a suggestion?
boxer_1
08-06-2002, 07:44 PM
You can go to the pop-up generator here and specify the attributes you want your pop-up to have and generate the code for a text link. Add the javascript function to the head of your page, but don't add the text link: http://javascriptkit.com/popwin/index.shtml

Then, call the function for the pop-up with the onClick event handler in your imaga map like this:

<area shape="rect" coords="210,3,398,219" href="#" onClick="openpopup();"

Get the idea?
splash1950
08-06-2002, 08:03 PM
Yes I do, but I need is to have different HTMLs load with each Area click. So isn't this line a problem....

var popurl="thankyou.htm"

???
boxer_1
08-06-2002, 09:45 PM
Could you post a link to the page where you're trying to accomplish this or some code from the page if it's not uploaded yet? Seeing exactly what your working with will make it easier for us to help you ;).
splash1950
08-06-2002, 11:12 PM
Thanks... the attached text file is what I have so far.
Like I said, the map works OK and it will call up any of the HTML pages I create, but when I push that envelope to use the JavaScript, I get this error...

Line: 1
Char:12
Error: Expected ']'
Code: 0
URL: (1st Page 2000's Temp file of my original)

I've 'credited' the source of the JavaScript so you can see where I got it from. Like I said it works fine as documented, at least the first few test I ran, but when I try to incorporate it into the <Area> tag... kaboom!!

My bonehead guess is it wants that <a href> tag and <area> doesn't.

I was thinking, I could use the script you guys pointed me to, and just duplicate the darn thing for each popup. (????) Different params for each like make an openpop1, openpoup2, etc. I guess that would work, I just don't know if JavaScript should be used that way. But then again what do I know... that's why I'm here <G>.

Larry
boxer_1
08-07-2002, 04:27 AM
Have a look through the example code below.

<html>
<head>
<title>Imagemap Example</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="ff0000" vlink="#800080">
<img src="img_for_map.gif" usemap="#img_for_map.gif" border="0">
<map name="img_for_map.gif">
<area shape="rect" coords="5,4,207,219" href="whatever1" onClick="window.open('your0.html','myWin','scrollbars=yes,width=400,height=500');">
<area shape="rect" coords="210,3,398,219" href="whatever2.html" onClick="window.open('your1.html','myWin','scrollbars=yes,width=400,height=500');">
<area shape="rect" coords="4,223,209,394" href="whatever3.html" onClick="window.open('your2.html','myWin','scrollbars=yes,width=400,height=500');">
<area shape="rect" coords="214,226,393,393" href="whatever4.html" onClick="window.open('your3.html','myWin','scrollbars=yes,width=400,height=500');">
</map>
</body>
</html>

The code is only to show you how you can define different pop-ups for each area. The URLs, coords, window attributes will have to be adjusted to suit yourself. As shown, you can simply open a pop-up with the onClick event handler and window.open. You can call a different page into each pop-up.

Does this help you more?

PS: For some reason the ');"> gets moved off the line it's supposed to be on and down one. You would want it on the same line in your actual code. There's also a space added in yourx.html that was not intended to be there.
splash1950
08-07-2002, 06:04 AM
Thanx Boxer...
I'll give it a whirl and let you know... hopefully to close out the thread.

Larry
splash1950
08-07-2002, 06:38 PM
OK it's getting there!
What I've had to do to make it work (kind of) is change the variable height/width params in the script to fixed sizes. Without that the OnClick params handled the width variable OK but did not recognize(?) the height variable. So I can put scrolling in, though ideally I wanted a 'clean' window with just the content. You can't have everything I guess <G>.

But the big problem now is I get two windows. The initial href=myHTML in the <area> tag still calls up it's window, and href=myHTML can't be removed because then the tag think's there is no link and OnClick is ignored.

This would be so much easier if there was a way to simply restrict the size of any HTML page upon opening, regardless of browser min/max setting or user screen resolution. If there is, I sure haven't been able to find a reference anywhere in help files or things such as WebMonkey, etc.

I'd also like to try it with 'your' POPUP window script, it's so much cleaner and compact, but I need this...
var popurl="thankyou.htm" ... to be a variable HTML selection for each of the links.

I've attached what I've got so far, and if I can stop the double page opening I'll put it to bed <G>. Thanks for all the help.

Larry
boxer_1
08-08-2002, 03:17 PM
Ok, if all you want to happen when you click on a certain area of your imagemap is for a pop-up to open and not to go to another page as well...you could do it this way:

<area shape="rect" coords="214,226,393,393" href="javascript:;" onClick="window.open('first.html','myWin','width=400,height=500');">

Notice that the href has been given the value of "javascript:;, some people just use "#", but that can cause problems. Now, the onClick event handler will still fire when you click on the region and your pop-up will still open (containing first.html in the above example). You just change "first.html" to the page you want to load into your pop-up. Do the same for each region of the imagemap and pop-up. The pop-up is defined within the onClick="window.open.....". BTW - I removed the scrollbar attribute in the above example.
splash1950
08-09-2002, 01:15 AM
You da man (gender assumption<G>)...
It took a little bit of tweaking as that script was very, VERY, fussy about the order of the params in the string. A little trial and error and some dumb luck and EUREKA! I even got the ALT statements working.
Of course, I wasn't thinking far enough ahead to realize that all my fine tuning of the 'clean' perfectly sized HTML windows would be for naught. The client, a buddy thank the lord, uses Angelfire FREE, and I didn't think about the fact that those darn Advertisements would figure into these popups (Duhhh). So on his site is a version with the plain old new target windows to a full screen with all the browser BS included. Too bad!
But, and there's always a but, I have a premium ($$) host for my site and I've put the results of your kind help up there for a quick look, if your so inclined. Don't worry about the ALT statement on the little star... it will take you to the right stuff!
http://www.artatwork.org is where to go.
I've also attached a text file of just the meat-and-potatoes of the param strings for your edification.
Boxer you have been a super help!!! I wish there was more to do to thank you. ~LjM~
boxer_1
08-09-2002, 01:49 AM
You're welcome :thumbsup: ! Just glad you got it working right ;).