Spry Tabbed Panels are basically JavaScript. It doesn’t seem there is an easy way to hook a custom JavaScript call into the script to allow an outside element—like the logo—to trigger a tab being displayed. So I would recommend a quick & simple solution. Wrap the logo image in a link that will reload the page completely. So this:
<img src="images/logo.jpg" width="100" height="100">
Turns into this:
<a href="/" target="_top"><img src="images/logo.jpg" width="100" height="100"></a>
Or maybe this if you do not mind the index.html
showing:
<a href="index.html" target="_top"><img src="images/logo.jpg" width="100" height="100"></a>
EDIT/CLEANER SOLUTION: Okay, I just found this official Adobe documentation so it seems an external JavaScript call can be done. Specifically refer to "Using Links to open tabs". So you can do this:
<a href="#" onclick="TabbedPanels1.showPanel(0); return false;"><img src="images/logo.jpg" width="100" height="100"></a>
Or do this:
<a href="#" onclick="TabbedPanels6.showPanel('first'); return false;"><img src="images/logo.jpg" width="100" height="100"></a>
But I find those recommended ways of adding an <a href>
tag clunky so I would try these instead. The image itself can be clicked without additional code but just a simple JavaScript onclick
event:
<img src="images/logo.jpg" width="100" height="100" onclick="TabbedPanels1.showPanel(0); return false;">
<img src="images/logo.jpg" width="100" height="100" onclick="TabbedPanels6.showPanel('first'); return false;">
Hope this helps!