Dynamic content: jscript and divs problems in

[Mad Griffith]

Hi folks, I'm building a menu + dynamic content like you see in <removed> (see <removed> to understand which objects I'm talking about exactly). I already did this:

Put this jscript code in an external file (swap.js):

function swap(name){
var gi=0
var gdivs=new Array("usciterecenti","oldworks","demosmini","reportages", "interviste")
for(i=0;i<=3;i++){
document.getElementById(gdivs[i]).style.display="none"
document.getElementById(gdivs[i]+"link").style.fontWeight="normal"}
document.getElementById(name).style.display="block"
var gname2=name+"link"
document.getElementById(gname2).style.fontWeight="bold"}

Put the hoverable links this way (it is just an example and I'm using hotspots since links are on an image):

<map name="Map">
<area shape="rect" coords="10,1,51,24" href="http://www.example.com/forums/forumdisplay.php?f=29" onmouseover="swap('usciterecenti');" alt="Uscite Recenti">
<area shape="rect" coords="52,-1,93,24" href="http://www.example.com/forums/forumdisplay.php?f=30" onmouseover="swap('oldworks');" alt="Old Works">
<area shape="rect" coords="94,0,137,24" href="http://www.example.com/forums/forumdisplay.php?f=32" onmouseover="swap('demosmini');" alt="Demos - Mini CDs">
<area shape="rect" coords="138,1,181,24" href="http://www.example.com/forums/forumdisplay.php?f=42" onmouseover="swap('reportages');" alt="Live Reports">
<area shape="rect" coords="182,1,229,24" href="http://www.example.com/forums/forumdisplay.php?f=35" onmouseover="swap('interviste');" alt="Interviste">
</map>

But hey, if you go to <removed> and you hover with your mouse on the small button "Old Works" (but the others show the same error too), there is a jscript error (I'm testing with IE) :(. And it is very likely I made some mistakes setting the divs which contents will be displayed in.

Can you help please? This is vital...

[edited by: jatar_k at 1:24 am (utc) on Mar. 8, 2006]
[edit reason] no urls thanks [/edit]

[whoisgregg]

What's the javascript error? Which line of code does it correspond to?

Added: Where's my manners? sheesh....

Welcome to WebmasterWorld, Mad Griffith! Just a heads up, linking is generally against the TOS [webmasterworld.com]. Thankfully you've included plenty of code for us to work from, even after mods come by and remove the links.

[Mad Griffith]

hi whoisgregg, thanks for your kindness... quite unusual nowadays :D

Well, I decided to turn to AJAX, but I've got other errors... here is what I've done so far. I've followed this tutorial [dynamicdrive.com] and strangely, when I hover on the little buttons in my page, it keeps telling (excuse me... I've got to translate from my mother language):

Row: 31
'document.getElementById(...)' is null or not an object

I don't really know what to do since all I did is follow the tutorial (I just recalled the jscript from an external file instead of including it directly in the mother page and added an onmouseover event to each hotspot I talked about in the other post).

Can you help please?

Thank you very much...

[whoisgregg]

Are you implementing this script on your actual home page or on a simplified test page?

It can be a pain to get something working when there is the possibility of buggy interaction with existing code. From that tutorial, line 31 of the javascript is the call to the AJAX page loading function. The second argument, "containerid" should be the id of the target <div> for the content. Is that set properly?

[Mad Griffith]

Hi, well I decided to go with jscript (at least, someone advices me not to use ajax). Well, I've tried to make something, but it doesn't work (note: there is no jscript returning error)...

Here is the actual content of my swap.js:

function swap(name) {
var gi = 0;
var gdivs = [
"usciterecenti",
"oldworks",
"demosmini",
"reportages",
"interviste"
];
for (var i = 0; i < gdivs.length; i++) {
document.getElementById(gdivs[i]).style.display = "none";
}
document.getElementById(name).style.display = "block";
var gname2 = name + "link";
}

Here is how I recall it in the mother page:

<script type="text/javascript" src='http://www.unprogged.com/swap.js'></script>

This the code of the buttons (hotspots) on the mother page, instead:

<map name="unprogged_r20_c7Map">
<area shape="rect" coords="492,2,653,24" href="http://www.unprogged.com/forums/forumdisplay.php?f=7" alt="Lista Forum Ufficiali »">
</map>
<map name="Map">
<area shape="rect" coords="10,1,51,24" href="http://www.unprogged.com/forums/forumdisplay.php?f=29" onmouseover="swap('usciterecenti');" alt="Uscite Recenti">
<area shape="rect" coords="52,-1,93,24" href="http://www.unprogged.com/forums/forumdisplay.php?f=30" onmouseover="swap('oldworks');" alt="Old Works">
<area shape="rect" coords="94,0,137,24" href="http://www.unprogged.com/forums/forumdisplay.php?f=32" onmouseover="swap('demosmini');" alt="Demos - Mini CDs">
<area shape="rect" coords="138,1,181,24" href="http://www.unprogged.com/forums/forumdisplay.php?f=42" onmouseover="swap('reportages');" alt="Live Reports">
<area shape="rect" coords="182,1,229,24" href="http://www.unprogged.com/forums/forumdisplay.php?f=35" onmouseover="swap('interviste');" alt="Interviste">
</map></body>

I can't tell where the problem is...