Further on image mapping... now with JS code!

[amethyst42]

Hokay, I had a friend help me with some code for my image map project. For each area of the mining claim map, I want to have an info box pop-up onClick. The friend suggested using a floating box that becomes visible/invisible when you click, rather than a pop-up window, which I think is a great idea, what with pop-up blockers.. He's away right now, and I seem to be having a few problems getting it right.

Here's some of the convo:
[quote]Cakkafracle: i'd use javascript to make a floating box visible/invisibile, rather than a new window
Amethyst42ok: Ok, how do I do that?
Cakkafracle: ever use CSS to hide a block?
Cakkafracle: display: none;
Cakkafracle: then use in javascript <object>.style.value = 'block' to make it visible, 'none' to make it invisibke[/quote]

this is the code he gave me:
[code]function menuOn(id){
  var x = document.getElementById(id);
  if(x) x.style.display = 'block';
  var y = document.getElementById(oldID);
  if(y && oldID!=id) y.style.display = 'none';

Here is my div:
[code][/code]
 
  oldID = id;
 
}
function menuOff(id){
  var y = document.getElementById(id);
  if(y) y.style.display = 'none';
  oldID=0;
}[/code]

[quote]Cakkafracle: copy this into your javascript file
Cakkafracle: this will give you two functions
Cakkafracle: menuOn and menuOff
Amethyst42ok: Ok!
Cakkafracle: on click you call menuOn('blockname')
Cakkafracle: where blockname refers to a <div id="blockname">content</div>
Cakkafracle: you can use #blockname in your CSS to style the box
Cakkafracle: name 'blockname' be whatever you like
Cakkafracle: this div block is of course not inside the link block
Cakkafracle: you can stick the div anywhere in your html[/quote]

Here is my div:
[code]<div class="popper" id="popper" >This is the bit with the info for the company.<br /> <a href="http://www.webaddress.com" target="_blank">This is the company's website.</a></div>[/code]

here's a sample are on the map:
[code]<area shape="poly" coords="492,81,495,88,493,106,497,130,574,124,570,78" alt="marum2" onclick="menuOn('popper')"></map>[/code]

here's my css regarding the div:
[code]#popper { background-color: #69f; border-color: #333; font: 12px arial;
width: 200px; height: 100px; display: none;}[/code]

I know I am missing some crucial piece of info here.. .possibly several. I could really use some pointers here!

[fenway]

And what currently happens?

[amethyst42]

[quote]And what currently happens?[/quote]

I guess that's a crucial piece of information, eh?

Well, it wasn't popping up. I finally figured out it was my path to my javascript file that was wrong.

My new problem is how to position the div box... I will start that in a seperate topic though.