Image Rollover Solar System
The working code:
Information from: www.nasa.gov
-
1. Mecury
43.4 million miles from sun -
2. Venus
67.2 million miles from sun -
3. Earth
93 million miles from sun -
4. Mars
154.8 million miles from sun -
5. Jupiter
483.7 million miles from sun -
6. Saturn
941 million miles from sun -
7. Uranus
1.7 billion miles from sun -
8. Neptune
2.79 billion miles from sun -
9. Pluto
3.64 billion miles from sun
Author: Free CSS Menus: www.freecssmenus.co.uk
Description: This example of css uses one main image for the whole solar system and then 9 separate rollover images for each planet. The separate images are carefully positioned using the background-position command. This technique is very simple to do using css, just maybe a little time consuming to adjust every image into position. Some of the images, due to the size of the planet and proximity to the next, needs to use the z-index attribute to overlap or share space. Remember only use z-index on a div which uses the position:absolute attribute.
Category: Image Rollover
Tested Browsers: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7
Comments:
More CSS related to this script:
Multi Colour Buttons. Have fun using these multi coloured css buttons in your website. Dont forget that our free css button creator utility will be up and running soon!
Green Css Button. This green css button has been refined to contain only one image. Other rollover buttons of this nature would normally contain two images. Here we use the: background-postion command to display the image in four different positions. Why four? Well the normal state (no hover)has both left and right edges which are needed so that the button can stretch with more text. Apon the hover state the button uses another two edges.
Green Push Button. This green push button shows a little more movement than other CSS buttons. The dimentions may have to be tweaked a little when altering the button text but just have a play with the CSS and see what you can come up with yourself. There are more Cascading Style Sheets on this website for you to view and use on your websites... just take a look.
CSS World Map Rollover. I made the UK rollover map last year and thought that it was about time the internet had a descent CSS rollover world map... well here it is.
Before I start getting emails, I know that this map is geologically inaccurate but it was the best map that I could find to use for this example. It is impossible to use the sliding doors technique with this example. To avoid slow down upon rollover you could use javascript to preload the images in the HEAD section of the code.
Blue Tabbed Horizontal Navigation. This horizontal menu only uses one image. For best results, use this css example on a dark background. Have a look at our other tabbed menus to see which more suits your web page.
Latest CSS:
•
Bright Yellow Vertical Menu
If your website is bright and sunny then add this vertical menu to give it a spl ...
Added: Tuesday 15 Jun, 2010
•
Transparent Vertical Menu
This vertical golf menu uses a simple PNG image to give some transparency so tha ...
Added: Saturday 17 Apr, 2010
•
css3 Border Radius
CSS Border radius achievable with CSS3.
I do love the idea of creating corner ...
Added: Tuesday 06 Apr, 2010
•
Animated navigation menu
Great animated vertical menu. Our first submission by one of our visitors. Top M ...
Added: Monday 15 Feb, 2010
•
CSS vertical numeric keypad
Stylish CSS vertical numeric keypad. ...
Added: Sunday 03 Jan, 2010
Top Rated:
Css rollover uk map
Free rollover map of the Unite ...
4.2 / 5 - 44 Ratings
Green blue rating
Ever wondered how to replicate ...
4.2 / 5 - 18 Ratings
Transparent Vertical M ...
This vertical golf menu uses a ...
5 / 5 - 10 Ratings
Free Tabbed Navigation ...
Tabbed navigation menus improv ...
4.4 / 5 - 9 Ratings
Image Rollover Solar S ...
This example of css uses one m ...
4.9 / 5 - 7 Ratings
CSS Tags:
Text Grey Colour Positioning Orange Button Hypertext Depth Sliding Doors Vertical Display Chrome Flash Block Cyan Templates Transparency Script Icon Dark Font Cascading Style Sheets Centering Blog Url Style Red Tutorials Css Solar System Border-radius Menu Light Texture Watermark Rollover Metal Animation Gold Website Template Yellow Design Corner Png Color Opacity Green Background Hover Text-decoration Alignment Image Forms Width Blue Css3 3d Rounded Navigation Pink Photo Gallery Border Menu Drop Down Purple Z-index List Expandable Float Rating Horizontal Tabbed Css
