Hi guys

 

On my Website I have created the gfx layout from exported image layers in photoshop and saved as PNG to have the shadow of each graphic.

 

the problem is these turned out too big .. is there was that i can have them images .. but control the "click area" of the iamge ? i.e. make it so that you can't click on the shadow .. but only on the actual button itself ?

 

I'd greatly appreciate any help with this.

 

Thank you.

Hi guys

 

On my Website I have created the gfx layout from exported image layers in photoshop and saved as PNG to have the shadow of each graphic.

 

the problem is these turned out too big .. is there was that i can have them images .. but control the "click area" of the iamge ? i.e. make it so that you can't click on the shadow .. but only on the actual button itself ?

 

I'd greatly appreciate any help with this.

 

Thank you.

 

You need to split the image up and have one part of it with a hyperlink and the others without.

is that the only way ?

 

It sounds like too much work

You can make the tab be a background image of the li, and not the a, and then apply some artificial padding to the a tag to encompass the past of the tab you want clickable. You'll then need to use javascript to control the hover action for the background change. jquery would be easiest.

 

Something like:

 

$(document).ready(function() {
var $link = $('#header li a');
var $list = $('#header li');

$link.hover(function(){
$list.addClass('newBackground');
}, function(){
$list.removeClass('newBackground');
});
});

 

My jQuery might be a little crude, but it should work.

Just apply the background image to the css class .newBackground (or what ever you want to call it.

 

Its a bit of a pain, but it should work.

 

Another option would be to have the shadow in in the graphic of the header background. That would be easiest, but not very flexible if you need to change something.