Onmouseover effects

[desrin]

Heres what I have:

A map of a province, with 7 different regions.

Onmouseover a region (image is a jpg sliced up into tables) a table below the image has to change accordingly with Events happening in that region.

For example:

Onmouseover Region 1, display region 1 events.

Region 1 events table is all html.

What is the code for something like this?

Do I name the cell and then have some code such as

psuedo <Onmouseover={This,document.table.region1.content="<p>Events for Region 1<br>Event 1 - blahblahblahblah</p"}

Any help is appreciated.

 

[generelz]

Perhaps the innerHTML attribute is what you're looking for?

 

[jrbryner]

You could put each of the events in a div tag and use position: absolute to position them on top of each other. Use display: none to turn them all off. In your Javascript change the display to block for the div tag you want to display. And of course change it back to none on mouseout.

 

[desrin]

im having issues with resolution changes, the position of the boxes look fine at 1024*768 but at any other resolution it isnt lining up.

 

[desrin]

NM figured it out by using a var in javascript to fill a <div> in the html doc.

Next problem :

The code looks like this:

var msg1='<p><b>blahblahlblhalhla</p></b>';

I need the html that is on that line to come from an external file.

something like :

var msg1='msg1.txt';

is this possible?

 

[jrbryner]

im having issues with resolution changes, the position of the boxes look fine at 1024*768 but at any other resolution it isnt lining up.

You need to contain the absolute boxes withing a relatively positioned (position: relative) container div. Otherwise the divs are going to get their coordinates from the browser window.

As far as reading in from an external file, just use some server side script (php, asp, etc) to read in the text.