Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Using image maps in forms

Posted on 1998-06-23
8
Medium Priority
?
157 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 30 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

I hope you'll find this tutorial useful and interesting. So let's try to extend Tcl with a new package.  For anyone more deeply interested please check out the book "Practical Programming in Tcl and Tk". It's really one of the best written books abo…
This article will show, step by step, how to integrate R code into a R Sweave document
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

636 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