View Full Version : Define 'Hit' area on image

04-27-2008, 07:03 PM
Hi All...

Just wondering... I've seen some buttons in CSS where the button rollover image is much larger than the image itself... But the larger image only has the 'hit' area of the small button (am I making sense?... sorry for flash speak..)

Any ideas.... ?

Wait there. i'l find an example... *runs..*


04-27-2008, 07:09 PM
Here we go...
Like the "Home" "About" "Archives" sections on here...

Death Dream
04-28-2008, 03:37 AM
Look at the background image on that site: http://www.webdesignerwall.com/wp-content/themes/wdw/images/main-bg.jpg

Everything is just text laying on top of the background.

~Death Dream~

04-28-2008, 07:21 AM
Chers Dream... I got that far but I can't figure how the "Got to Home" when you roll over over "Home" is done...

(Also see: "Check us out" on about + "browse Archives" on Archives)

Do you get me ?

Cheers tho... ;)

Death Dream
04-28-2008, 01:57 PM
Yeah I see what you mean, I don't know how that got coded into CSS because all I would say is that is a rollover image.

~Death Dream~

04-28-2008, 02:00 PM
Again look at the source, all the code is available for you :)
There is a span inside the <a> tags as well, which is absolutely positioned with negative top, so it goes above the link. Then the stylesheet shows/hides this span:
#nav span {
#nav a:hover span {

04-28-2008, 09:00 PM
Fanks... that's a great little trick tho isn't it ?

I find myself gettin glost in the code sometimes... I have Firebug now so that is making life easier... I didn't realise you could select a section (word, image, whatever) and view code for this area... what a great toy!

Cheers Dom...

04-29-2008, 01:00 PM
Cheers Rob, the more you use Firebug, the more you will love it!