Tab images

[William Summers]

Here is a crazy question. Is there an easy way to place an image inside the tab box? I looked at the ID and class but cannot seem to figure it out. Essentially, I want to still show the tabs but it have a background image. I searched through the forums but did not find a thread on it. Thanks!

[Alexander Bautz]

This is easier then you think – just add an <img> tag in the “Tab name” field instead of just the tab label.

Alexander

[William Summers]

Of course this worked…. I cant believe I didn’t try it. One last question on the topic. Keith and I were trying to figure out a way to use an image in place of the tabs which worked. Searching through the forums we were then trying to figure out how to use that image as a link.

Essentially, when you click on a standard tab in the form it does not require the page to be reloaded. If I use an image for each tab, I lose this ability. If I add a hyperlink it refreshes the page of course. My thought was to draw an image map over the clickable area but this will cause the page to reload as well.

Any ideas how one might use an image in each tab and still keep the navigation functionality that will not cause the page to reload upon clicking it?

As always, many thanks

[William Summers]

I realized the above is gibberish…. Trying again.

I am using three images, one for each tab. I would like to know if I can use an image map around one of the words to navigate between tabs without the page refreshing.

• This reply was modified 4 years, 7 months ago by William Summers.

Attachments:

1. 

   Picture1.png
   

2. 

   Picture2.png
   

3. 

   Picture3.png
   

[Alexander Bautz]

I think this is better solved by splitting each “tab” in is own image – all in blue (and keep all tabs visible at all times) – and then applying this Custom CSS:

li.tabBase{
    padding:0!important;
}
#tabWrapper .tabBase a{
    border:none!important;
    margin-right:-10px;
}
#tabWrapper li.tabSelected a{
    background-color:transparent!important;
}
#tabWrapper .tabBase img{
    opacity:0.5;
}
#tabWrapper li.tabSelected img{
    opacity:1;
}
#tabWrapper .tabBase + .tabBase img{
    margin-left:-37px;
}

Alexander

[Author]

Posts