DD Hovertabs Modification

[EliteSeraphim]

I have a question about the following script

http://dynamicdrive.com/dynamicindex1/ddtabmenu2.htm

I think it is a great idea but I was wondering if it could be modified so that the content expands with an onclick command instead of an onmouse over command. In fact, thats exactly what I did. I went into the actual HTML and changed the function from "onmouseover" to "onclick", the problem is though, the image rollover effect doesn't occur until you actually click on the tab. Without any type of rollover effect when the user scrolls over the tab, they won't know it is clickable. Is there any way to modify this code so that it expands the content with "onclick" yet it still features an "onmouseover" rollover effect and your mouse changes into a hand?

[jscheuer1]

Using the example with just these modifications to the links:

<div id="ddimagetabs">
<a href="http://url/" onclick="expandcontent('sc1', this);return false;">Home</a> <a href="http://url/" onclick="expandcontent('sc2', this);return false;;return false;">New</a> <a href="http://url/" onclick="expandcontent('sc3', this);return false;;return false;">Revised</a><a href="http://url/" onclick="expandcontent('sc4', this);return false;;return false;">Submit</a>
</div>

" . . .it expands the content with "onclick" yet it still features an "onmouseover" rollover effect and your mouse changes into a hand."

Note: I made NO other modifications to the basic installation instructions.

[EliteSeraphim]

Thanks John, thats works nicely. At the same time though, there is a small problem that I don't know how to fix since I am relatively new to HTML and I just started learning it.

Offline the page works fine, but once the page is uploaded to the web, when the user clicks on any of the tabs the content indeed comes up on onclick. However, since the url of the tab is "http://url/" a few seconds after the user clicks on the tab, he gets a "page cannot be found" error. I tried removing the href from the tag so it doesn't link anywhere, but that prevents the tabs from working correctly. I disabled linking in the original Javascript code, but that seems to prevent the tabs from working as well. So, what can I place inside that "href" so the browser bypasses it and doesn't tried to a load a page when the user clicks on a tab?

[jscheuer1]

Are you sure you used return false in the onclick events as I did? I just put up a live version of the demo at:

Clickable Tabs Demo

Try it out, works fine here.

[EliteSeraphim]

Yes, I used the ;return fase; and double checked I hadn't altered anything else. Here is where things get interesting through. I saved the source of your test page and uploaded it to geocities and it doesn't work. I won't be using geocities as the host for my site, but it is weird that the code works perfectly for you, yet when I saved the source and uploaded to geocities, it experiences the same problem.

http://www.geocities.com/eliteseraphim/test.html

[jscheuer1]

Geocities hi-jacks the variables i and j, crippling or completely disabling many scripts. There are work arounds but, if you are not planning on using it on Geocities, I wouldn't bother as they also do other weird things so that fixing one problem can reveal another.

[EliteSeraphim]

Yeah, I figured it was something like that since I have been seeing all these little script errors when uploading my test pages to geocities. Anyhow, thanks for the help! I really appreciate it!