View Full Version : Tabbed Panel Header Images

Mario Kinnikuman
08-17-2010, 03:31 AM
Hi, everyone. I've been using Dreamweaver for quite a while now, but I'm still rough around the edges on some parts.

Specifically, what I want is to insert different images per tab header; ones that change when the mouse hovers over them, and for the image to remain in the hovered state when the tab is actually clicked.

So far, I've been able to insert different images into each tab header, and they change when hovered over, but I've yet to have the images remain in the hovered state, when the tab is clicked. I still haven't been able to figure out this last tidbit.

I've assigned IDs to individual divs in the tab class. I've tried to changed the images to background-images, or even transparent .png files, but nothing seems to be working. Am I doing something wrong, or is this simply not possible?

Any help is appreciated.

Here's a link to the page if needed: http://mariokinnikuman.webs.com/YesterGames/yestergames/CCABTF.html

Codes for the Spry Tabbed Panel, IDs and HTML will be posted if needed, too.

08-17-2010, 04:36 AM
Which part of that page are you talking about?

Mario Kinnikuman
08-17-2010, 04:47 AM
I'm referring to the tab headers, or the sections that read "Screenshots," "Music," "Video."

When you hover the mouse pointer over the grayed image, it will turn invisible, showing a colored background-image behind to give an image rollover effect. However, if you move the mouse pointer away from the header after clicking, the grayed image reappears, which is the problem.

I had previously used the traditional image rollover effect, but I've been wanting to cut down on the sheer amount of code, wherever possible. Same problem occurred when trying to get the image to remain constant after clicking.

08-17-2010, 05:14 AM
If that is a Spry TabbedPanel:

Background of selected tab: .TabbedPanelsTabSelected

Background of panel tabs when the mouse pointer moves over them: .TabbedPanelsTabHover

See this page: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS48A27B01-5D59-409c-99B2-CB838B2985FCa.html

Mario Kinnikuman
08-17-2010, 05:35 AM
I'm aware of those two values. I've tested it once, changing the background-image declaration of .TabbedPanelsTabSelected to the image I wanted to show, but unfortunately it only means I can apply one image to all of the tabbed panel headers, not to each of them individually. I figured I could overcome this by assigning a unique ID to each tabbed header, but it doesn't seem to be working. I'm not sure if something is overriding the code, or I just can't select it that way.

Example: .TabbedPanelsTabSelected #music a

{background-image: url(../images/MusicTabActive.png);}

08-17-2010, 07:26 AM
When you use an image for the link, it appears in front of the background effectively hiding it. You need to make all your images background images. maybe this will help: CSS Image Rollovers (http://www.dwcourse.com/css-image-rollovers)

Mario Kinnikuman
08-17-2010, 09:47 AM
I followed the instructions methodically, but unfortunately it's the same outcome. Whenever the mouse leaved the image after clicking on it; it reverted to its former state.

Personally, I think that unless unique IDs can somehow be incorporated into the SpryTabbedPanels.css style sheet, or the SpryTabbedPanels.js javascript, the content won't react as precisely as I would like. :confused:

08-17-2010, 10:25 AM
Yep, that's basically how it works. The 'hover' and 'active' psuedo class rollover states are only shown as the mouse is over them or actually being clicked on. It's just the way CSS is I'm afraid.

I would have thought Spry would have an answer for this though. Maybe a 'current' class or something like that?

Mario Kinnikuman
08-17-2010, 11:04 AM
I would have thought Spry would have an answer for this though. Maybe a 'current' class or something like that?

I've no clue in the slightest, unfortunately. Everyone who wants to, is welcomed to try at their own discretion. I took a look at the javascript file, and see no other classes as to indicate such, besides this one, possibly. I doubt it is relevant. however.

this.tabFocusedClass = "TabbedPanelsTabFocused";However, I did find something intriguing, possibly a compromise. Check out the very bottom of the page, reading:

"Setting the Panels to open with onMouseOver"


08-17-2010, 11:08 AM
Hmmm. Not sure I'd open tabs on mouseover as that could get very annoying for the user. DWCourse may have a view on use of a current/open class.

Mario Kinnikuman
08-17-2010, 06:48 PM
I'd love it hear it, if possible. I looked around a bit more, and stumbled upon this article as well. Specifically, this section caught my interest.

Found in: http://labs.adobe.com/technologies/spry/articles/tabbed_panel/

Open panels programatically

Use JavaScript functions to programatically open specific panels. For example, you might have a button on your page that opens a particular tabbed panel when the user clicks the button.
Remember, Spry uses a zero-based counting system, so 0 indicates the first, leftmost tabbed panel. If the tabbed panel has an ID, you can also use the ID to refer to panels.

Use the following functions to open specific tabbed panels: <button onclick="TabbedPanels1.showPanel(0)" >open first panel</button>
<button onclick="TabbedPanels1.showPanel('tabID')">open panel</button>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

Mario Kinnikuman
08-20-2010, 01:24 AM
Good news!

I posted a similar topic on another forum, just in case. Thankfully, that was answered, and it produced what I expected. Examples below.

Thanks for your help, DWcourse, Corrosive.

CSS Code:
#firsttab.TabbedPanelsTabSelected {background-color: #F00;}

#secondtab.TabbedPanelsTabSelected {background-color: #30C;
color: #FFF;}HTML Code:
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li id="firsttab" class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li id="secondtab" class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");