How to use Spry Tabbed Panels?

[jcafaro10]

Hello, I made spry tabbed panels but I'd like them to work on a rollover or
mouseover instead of a click. Here's what I tried but it didn't actually do
anything. Do I have to edit the .js file?


<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(this);">Our Program</li>
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(this);">Our Home</li>
</ul>

[danilocelic AdobeCommunityExpert]

jcafaro10 wrote:

> Hello, I made spry tabbed panels but I'd like them to work on a rollover or
> mouseover instead of a click. Here's what I tried but it didn't actually do
> anything. Do I have to edit the .js file?

I believe that you do have to edit the .js file to accomplish what you're looking for. I think that a couple of folks have already done this and have posted a thread/response in the Spry forum, so I'd suggest searching that forum for mouseover or related terms:
[url]http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602[/url]


--
Danilo Celic
| [url]http://blog.extensioneering.com/[/url]
| WebAssist Extensioneer
| Adobe Community Expert

[winthrup7]

Wanted to do the same. Came looking for this answer sort of. My "hack was to
just do JS mouseover's. I didn't edit the Spry tabbed panels .js. Rather
included them in the code ( which I was trying to avoid seeing as I had a nice
pretty CSS to do my hovers. So I have messy Javascript code that isn't pretty.
But it works! Let me know if you find a "cleaner solution". But until then,
this worked for me. Below is an example that allowed me to create my own tabbed
panels. Hope that helps.

<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><div id="box1"><img
src="Image1.jpg" alt="" name="Image1" width="268" height="138" id="Image1"
onMouseOver="MM_swapImage('Image1','','RolloverIma ge.jpg',1)"
onMouseOut="MM_swapImgRestore()"></div>
</li>