View Full Version : html tabs problem

04-03-2009, 06:10 AM
hi ,

My owner wants me to design the follwing tabs



I have treid by making e,g the whole home tab as one link with bas bar as well and similarly the all other tabs using photoshop
then by using zindex i overlapped them

But problem the images are not clickable as whole box is clickable and user does not know where he is clicking.

Is there way to get these tabs working

04-03-2009, 10:26 AM
Is there way to get these tabs working
Could you post a link to your page?

04-04-2009, 11:11 AM
I have made the tabs and using jquery i finally got them working for sometime. But i have one probelm.

I am dynamically changing the z-index so that image comes on the top by setting the clicked tab z-index to 100 but problem when other link is pressed

i don't know how to reset the z-index of previous clciked tab to original state.

04-04-2009, 01:24 PM
i don't know how to reset the z-index of previous clciked tab to original state. Sorry, we can't either (guess and solve your issue).

04-04-2009, 02:30 PM

<img src="" id="tab1">
<img src="" id="tab2">
<img src="" id="tab3">
I have absolutely positioned them so that they overlap each other for few pixels










Tab1 initially has highest z-index , so comes on the top of all as default.

If i click on other tab , then by jquery i change its z-index to 100 and it comes on the top of other tab (means the corner portions comes on top to see the full tab)

Now problem is when i click on any other tab , i don't know which z-index to give so that it has more z-index than any other tab , because previous tab which was clicked will have z-index of 100.

I want some way that , the tab which was clicked get back to z-index = 5 so that
system goes to the default state with only one tab active

I hope you got some idea by now :D

04-04-2009, 02:47 PM
Perhaps this will be better addressed in the JavaScript subforum? :)

Anyway, off the top of my head, you'll have to get the id and z-index of the clicked item and temporarily save the values into JavaScript; so that when another item is clicked, the old z-index will be reapplied to the said item with the said id.

04-04-2009, 02:51 PM
One way is to call the style inside the img tag and using javascript change the style to the needed zindex. I think the image having zindex as the highest value will be got highlighted.

You can use the onlick event of the js and create a function which reset the zindex of the desired image by changing the style. But I hope for this the style has to be inline instead of using a css file.

04-04-2009, 02:52 PM
I hope you got some idea by now Nothing useful to provide(if possible) some helpful information to you.