navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
FrontPage Alternative
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

How is this done?

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> How is this done?
Page: [1]
 
Brandon

 

Posts: 431
Joined: 7/13/2004
From: Indiana, US
Status: offline

 
How is this done? - 4/12/2006 13:25:23   
if you goto http://www.kutztown.edu/acad/commdes/ you will see how the main menu changes color when you run your mouse over it. But the gif that the menu uses has two images saved as one. How does that work? :)


Here is the gif i'm talking about.


_____________________________

~ Brandon
Tailslide

 

Posts: 6290
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: How is this done? - 4/12/2006 13:31:57   
At a guess the image contains both the "on" and "off" images - one above the other - usually you can only see the "off" version. When you hover the menu item it shifts the image up slightly so you can see the "on" version rather than the "off" version.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to Brandon)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
RE: How is this done? - 4/12/2006 14:15:21   
There's a good example of it here. If you download one of/all of the menus, there's just one image with the "on", "off" and "hover" states all in one image. There's a html page in the download that has all the css with the positioning worked out for you.

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to Tailslide)
Brandon

 

Posts: 431
Joined: 7/13/2004
From: Indiana, US
Status: offline

 
RE: How is this done? - 4/12/2006 14:51:15   
Thanks guys.....Do you know if there is a benefit to doing this "on" and "off" thing?

_____________________________

~ Brandon

(in reply to womble)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
RE: How is this done? - 4/12/2006 15:30:15   
AFAIK it's the only way to do a javascript-like rollover effect with images using pure css.

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to Brandon)
Tailslide

 

Posts: 6290
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: How is this done? - 4/12/2006 17:20:45   
You don't have to have a single image to do it - you can do it with 2 separate images too - for some reason that tends to be the way I do it (you get into a habit of doing stuff one way!).

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to womble)
womble

 

Posts: 5702
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
RE: How is this done? - 4/12/2006 17:23:42   
I'm just mean when it comes to using pics tho. :)

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
:)

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> How is this done?
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts