PDA

View Full Version : Define 'Hit' area on image


Rob_Che
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..*

Rob

Rob_Che
04-27-2008, 07:09 PM
Here we go...
Like the "Home" "About" "Archives" sections on here...
http://www.webdesignerwall.com/

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~

Rob_Che
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... ;)
Rob

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~

domedia
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 {
display:none;
position:absolute;
}
#nav a:hover span {
display:block;
}

Rob_Che
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...

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