In case you can't tell I'm learning JavaScript today.
Poor bastard.
My first thought was to use AJAX (because everyone else is using AJAX) but I thought it was overkill to have to reach back to the server everytime someone clicks a menu item. I don't expect this to happen too often, but it just doesn't make sense considering that I don't need any additional information from them so I should just send it with the initial request.
Quite.
There are many ways to skin that cat (ref to another thread in a completely different place wonder who'll pick up on THAT one
)
here are a couple:
for every menu item, simple make the menu item itself do the work. This is expedient but crappy for maintenance. Looks like this though:
<img src="agraphic.gif" onClick="document.getElementByID('targetID').innerHTML = 'New Text';">
note that people often forget that you can inline JS quite easily.
I don't like that though myself - shooting from the hip, I'd do something more like this:
<img src="agraphic.gif" id="graphic1" onClick="updateText(this)">
... then with accompanying JS...
function updateText(sender)
{
var targetID = sender.id;
var newMenu;
switch (targetID)
{
case 'graphic1':
newMsg = 'this is text 1';
break;
case 'graphic2':
newMsg = 'this is text 2';
break;
case 'graphic3':
newMsg = 'this is text 3';
break;
}
document.getElementById('targetDiv').innerHTML = newMsg;
}
Obviously, there are a whole bunch of things that you could and should do to this code to make it more robust and less brittle - as well as simply performing some error checking... but hopefully it'll get you going in the right direction. It's also a bit long winded (the compiler won't penalize you for that though) in an effort to be really readable...
/p
