Imagemap hotspot to populate a pulldown menu

[NagsHead]

Hello,

I am using a form with a double category pulldown menu as follows:
Pulldown 1 = Regions
Pulldown 2 = Cities

Selecting a region in pulldown 1 will display the corresponding cities for pulldown 2. This now is working perfectly.

I also have an imagemap of Oahu on the left side of the page with hotspots on the regions. Right now if you click on a region the whole page reloads and a variable is fed to the javascript to update the pulldown (it works). What I would like is for the imagemap to use javascript to update the pulldown. Is this possible?

Here is a short sample of the javascript I am using for the form:

<SCRIPT LANGUAGE="JavaScript">
<!--
var supported = (window.Option) ? 1 : 0;
if (supported) {
var active;
var ar = new Array();
//
ar[0] = new Array();
ar[0][1] = new makeOption("CENTRAL OAHU (All Neighborhoods)", "central");
ar[0][2] = new makeOption("HONOLULU - Kapalama", "Honolulu!KAPALAMA");

// etc...

}
function makeOption(text, url) {
this.text = text;
this.url = url;
}
function relate(form) {
if (!supported) {
load(form, "regions");
return;
}
var options = form.city.options;
for (var i = options.length - 1; i > 0; i--) {
options = null;
}
var curAr = ar[form.regions.selectedIndex];
for (var j = 0; j < curAr.length; j++) {
options[j] = new Option(curAr[j].text, curAr[j].url);
}
options[0].selected = true;
}

// -->
</SCRIPT>

Here is the first pulldown (regions):

<SELECT NAME="regions" onChange="relate(this.form)" class="formtext">
<option value="" selected>All Regions
<option value="central">Central Oahu
<option value="diamondhd">Diamond Head
(etc...)
</select>

Here is the second pulldown (cities):
<select name="city" class="formtext">
(gets populated when the first pulldown is clicked)
</select>

Any help would be appreciated.

 

[BillyRayPreachersSon]

It should be possible to call JS functions from image map HREF attributes, yes.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[NagsHead]

Well, yes that would be great.
I am a master tweaker of javascript, however I don't write it myself. Which HREF attributes would I need to call the functions? Could you provide me with an example using the javascript in my first post?

Thanks again.

 

[Mach321]

href="javascript:functioncall();"

Hope this is what your looking for?

 

[BillyRayPreachersSon]

Could you provide me with an example using the javascript in my first post?

No - because it is incomplete - many of the function and variable declarations are missing. The HTML for the image map is also missing, but I would assume that to be using standard image map elements and attributes.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[NagsHead]

Yes, I think this is what I need but I'm not sure how to use it in this case.

Sorry if I appear ignorant here - but how can I pass arguments to the function and make it appear as though it was coming from the form? I believe that the function is looking for a selection from the "regions" field in the form.

So, if the HREF looks like this:
<a href="javascript:functioncall(relate(this.form));">
I get the error: 'city' is null or not an object.

Taking my example in my original post, let's say I wanted to simulate clicking on the region 'Central' (which would populate the 'city' pulldown with all cities in the Central region). What arguments do I have to pass in the HREF to do this, and what syntax would I use to pass them?

Or- should I make a new function to do this?
Thanks.

 

[NagsHead]

Maybe better yet - is it possible to use javascript in the imagemap href that would simulate selecting a region from the region pulldown menu? If so, how would I do this?

 

[stormbind]

Anything is possible.

Depending on the size of the regions in your image map, 1) use multiple image maps, 2) query the x/y offset.

1. is rather tricky if you don't have a tool to make the image maps for you.

2. is rather tricky aswell. It has been a while since I used DOM but if I remember right, you would need to get the position of the cursor in the window, and the position of the image in the window, and from that deduce the precise coordinates of where the user clicked on the image. Use that data to select a value in the menu.

----------
Memoria mihi benigna erit qui eam perscribam

 

[NagsHead]

No, I think you misunderstood my question.

I already have the image map I need with all the regions as hotspots. It is currently set up so that clicking on a region within the imagemap will reload the entire page with a parameter that will update the cities field. This is the result I am looking for and works fine. However I am trying to avoid reloading the entire page, so I'm looking for a javascript solution to update the city field from the imagemap HREF.

The imagemap is not the problem, any link would do. I simply do not know what to put in the href to accomplish this.

 

[BillyRayPreachersSon]

I've already told you that an [accurate] answer would not be possible, and why (many of the function and variable declarations are missing, so knowing what to code is going to be tricky).

Give us the real code (or at very least, the "relate" function and all related functions). Also, can you wrap your code in "code" tags (see the "Process TGML" box below where you type your post).

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[stormbind]

Oh, sorry. Take two! Lets see if I understand this time, lol

If you use the href="javascript:" and the visitor has JS disabled, then your site won't work at all.

Perhaps onclick="" should be added for the JS solution and leave reload option for non-JS visitors.

<a href="" onclick="shortcut('region')">...</a>

The following script does not work. It is an idea/thought with no basis in reality.

<script>
function shortcut(regionClicked){

var obj = document.getElementsByName('regions')[0];
var dat = obj.children;

for (c=0;c!=dat.length;c++){
obj.children[c].defaultSelected=false;
if (dat[c].value==regionClicked){
obj.children[c].defaultSelected=true;
}
}
forms[0].reset(); // not sure about this?
return false;
}
</script>



----------
Memoria mihi benigna erit qui eam perscribam

 

[NagsHead]

Give us the real code (or at very least, the "relate" function and all related functions). Also, can you wrap your code in "code" tags (see the "Process TGML" box below where you type your post).

All code and functions are posted in my original question. But here it is again:

<SCRIPT LANGUAGE="JavaScript">
<!--
var supported = (window.Option) ? 1 : 0;
if (supported) {
  var active;
  var ar = new Array();

  ar[0] = new Array();  
  ar[0][1] = new makeOption("CENTRAL OAHU (All Neighborhoods)", "central"); 
  ar[0][2] = new makeOption("HONOLULU - Kapalama", "Honolulu!KAPALAMA"); 

// there are hundreds more but you get the
// idea from this example.
  
}
function makeOption(text, url) {
  this.text = text;
  this.url = url;
}
[highlight]function relate(form)[/highlight] {
  if (!supported) {
    load(form, "regions");
    return;
  }
  var options = form.city.options;
  for (var i = options.length - 1; i > 0; i--) {
    options[i] = null;
  }
  var curAr = ar[form.regions.selectedIndex];
  for (var j = 0; j < curAr.length; j++) {
    options[j] = new Option(curAr[j].text, curAr[j].url);
  }
  options[0].selected = true;
}

// -->
</SCRIPT>

And here is the html:

<SELECT NAME="regions" onChange="relate(this.form)" class="formtext">

  <option value="" selected>All Regions
  <option value="central">Central Oahu
  <option value="diamondhd">Diamond Head
  <-- (etc...) -->

</select>
                
<select name="city" class="formtext"></select>

<-- Although I do put in original options for city, no options are necessary as they are populated after clicking a region -->

Is this what you need? Thanks again.

 

[NagsHead]

Just to clarify something...

The function makeOption implies that I'm passing a url to the value field, but I am not, I am simply passing the value of the field.

 

[NagsHead]

I'm not sure why but the code in my previous quote wouldn't work when I ran it. This code works:

<SCRIPT LANGUAGE="JavaScript">
<!--
var supported = (window.Option) ? 1 : 0;
if (supported) {
  var active;
  var ar = new Array();

  ar[0] = new Array();  
  ar[0][0] = new makeOption("No Preference", ""); 
  
  ar[1] = new Array(); 
  ar[1][0] = new makeOption("CENTRAL OAHU (All Neighborhoods)", "central"); 
  ar[1][1] = new makeOption("  - HONOLULU - Kapalama", "Honolulu!KAPALAMA"); 
  
  ar[2] = new Array(); 
  ar[2][0] = new makeOption("DIAMOND HEAD (All Neighborhoods)", "diamondhd"); 
  ar[2][1] = new makeOption("  - HONOLULU - Aina Haina Area", "Honolulu!AINA HAINA AREA"); 
  
// there are hundreds more but you get the
// idea from this example.
  
}
function makeOption(text, url) {
  this.text = text;
  this.url = url;
}
function relate(form) {
  if (!supported) {
    load(form, "regions");
    return;
  }
  var options = form.city.options;
  for (var i = options.length - 1; i > 0; i--) {
    options[i] = null;
  }
  var curAr = ar[form.regions.selectedIndex];
  for (var j = 0; j < curAr.length; j++) {
    options[j] = new Option(curAr[j].text, curAr[j].url);
  }
  options[0].selected = true;
}

// -->
</SCRIPT>

<!-- HTML -->

<form>
<SELECT NAME="regions" onChange="relate(this.form)" class="formtext">
	<option value="" selected>All Regions
	<option value="central">Central Oahu
	<option value="diamondhd">Diamond Head
</select>
                
<select name="city" class="formtext">
	<option value="" selected>No Preference
</select>
</form>

 

[stormbind]

I am prompting you to see if you considered my posted suggestion. I feel that if it does not work, it may still lead to inspiration

----------
Memoria mihi benigna erit qui eam perscribam

 

[NagsHead]

I appreciate your response but I do not know enough about javascript to get your suggestion to work. Given the code I included above maybe you can implement something? Thanks.

 

[BillyRayPreachersSon]

Apologies, Nagshead...

I looked back at your original post twice, and must have totally fluffed the search I did, because I just couldn't find the relate function. I must need a new set of eyes.

Dan




[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[BillyRayPreachersSon]

From your original code, I would change this:

function relate(form) {

to this:

function relate(form, cityCode) {

then change this:

var curAr = ar[form.regions.selectedIndex];

to this:

var curAr = ar[form.regions.selectedIndex];
if (cityCode) curAr = ar[cityCode];

Now in your "href" attributes of the image map, you should be able to call:

javascript:relate(document.forms['yourFormNameHere'], regionNumber);

yourFormNameHere is the name of your form, and regionNumber is the index of the region you want to "choose" in the select box (starting at 0).

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[NagsHead]

Yes! That did the trick!

I added to it so that the regions field would also be highlighted with the correct region. Here is the entire href:

HREF="javascript:;" onclick="relate(document.forms['GetActiveData'], 7);document.GetActiveData.regions.options[7].selected=true;"

Works like a charm, thanks so much.
Karen

 

[Mach321]

<a href="javascript:functioncall(relate(this.form));">

You mis-understood my example above:

href="javascript:functioncall();"

In your case it would read:

href="javascript:relate(this.form);"

Anyways glad to see it is working now.