Solved

Using image maps in forms

Posted on 1998-06-23
8
151 Views
Last Modified: 2013-12-25
OK, here's the deal. I would ideally like to use a client-side image map in combination with standard form elements to pass data to a CGI script (Perl).  I.e. the user selects various options using drop-down lists, check boxes etc, and then instead of a submit button, the user clicks on an image map, and according to the options selected with the rest of the form AND the location on the map, the appropriate information is passed to a script.  Now, I know you can use an image as an input and the co-ordinates of the click are passed to the script using the <INPUT TYPE=IMAGE> tag, but that doesn't help if you already have an image map set up, and you don't want to have to interpret the co-ordinates a complex map on the server side or within the script.  Any suggestions?

J W
0
Comment
Question by:jasonwebb
  • 5
  • 3
8 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 10 total points
ID: 1829915
<HTML>
<HEAD>
<TITLE>Form and ImageMap</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function callCgi(imagemaphref) {
   var Loc = 'http://myserver/cgi-bin/mycgi.pl?';
   for (i=0,n=document.forms[0].elements.length;i<n;i++) {
      Loc += document.forms[0].elements[i].name + '=';
      Loc += document.forms[0].elements[i].value + '&';
   }
   Loc += 'imagehref=' + imagemaphref;
   self.location = Loc; // this will do a GET. to do POST use a hidden form
}
<FORM>
<INPUT TYPE="TEXT" NAME="TXT_FIELD1">
<INPUT TYPE="TEXT" NAME="TXT_FIELD2">
</FORM>
<IMG SRC="imagemap.gif" .... USEMAP....>
<MAP NAME="mymap">
<AREA ... HREF="callCgi('mapclickA');">
<AREA ... HREF="callCgi('mapclickB');">
</MAP>

Enjoy
Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1829916
I must be tired

Please put a </SCRIPT></HEAD><BODY>
between
}
and
<FORM>
Michel

Also add </BODY></HTML> to the end
0
 

Author Comment

by:jasonwebb
ID: 1829917
Thanks for the solution - however, it excludes anyone without a javascript enabled browser - any server-side solutions?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1829918
What do you expect for a measly 1 point?

This is on the house: If the browser supports input type=image it supports JavaScript

There is no way with server side except grepping the html file, reading the map coordinates and find the image coordiantes in the map coordinates...

Michel

PS Next time be a little more generous, please
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:jasonwebb
ID: 1829919
Sorry about the points - I'm new to this and didn't know how the system works - it seems that if I give good points it pleases the experts, but then other that want to gain the information lose a lot of points finding out - a bit unfair really.  There ought to be one set of points to be awarded to the experts and another set for others seeking the information.  That way everybody benefits and nobody is left out in the cold like all us non-experts that need the help.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1829920
'Scuse me?

1. You get 200 points for nothing - that is 4 easy, two middle or one difficult
2. You get 5 points per day for nothing - that is 150 per month
3. You get to refine and reask and whatever until you are happy with the answer (or unhappy if the answer is that you cannot - but that is beside the point)

You ask a question and somebody spends their own time answering it! I have answered several hundred question and got a couple of t-shirts and the recognition to show for it - no money!

Sorry I do not follow your reasoning...

If you wish to give me some more points, open a new question for mplungjan, I will answer it and you can accept the answer and give the points...

Michel
0
 

Author Comment

by:jasonwebb
ID: 1829921
I don't want to offend, so please don't take this the wrong way.  I have not received 5 points a day.  There is no need to get shirty about this - all I did was to explain that I didn't understand the system, now please accept that and I would obviously be more generous next time, but NOT if I get flamed!  Anyway, this will be my last post to this thread.  Like I said before, I'm most grateful for the answer, but I think I might go back to the newsgroups and mailing lists where people give help and don't expect anything in return or complain if they don't get anything.  Greed is one sin I can do without dealing with.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1829922
I was not flaming you, I pointed out the way things work on EE - the reason I might have been terse is that you in so many words said that you found it unfair...

Usenet is fine - I can live without the spam and adverts though... And here you can get answers within minutes of posting

I am obviously also not being greedy since all I get is some points that might in the future give me another t-shirt

Sorry if you felt flamed and welcome back with another question

Michel
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this tutorial I will focus on how to use WhizBase as a tool for sending ICQ messages to ICQ. Here I will use a new technology in WhizBase, published in WhizBase 5.1 version. In this tutorial I will use 3 files, pager.wbsp for the processing, e…
In this tutorial I will show you how to provide a dynamic RTF document on your website generated with data from your database. For this tutorial you will need Microsoft Word or WordPad, WhizBase and Microsoft Access. In this tutorial I will show …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now