Solved

Using image maps in forms

Posted on 1998-06-23
8
154 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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
 

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website,  magazine or online news has one on their site, and even some e-commerce sites have one. Today you can use sliders with Joomla, WordPress or …
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 the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to dynamically set the form action using jQuery.

733 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