Image Rollover Solar System
CSS code in acion:
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
Post a comment!
More CSS related to this script:
Curved white css borders. Creating curved corners for your containers can be a tricky business, especially when you want them to expand and collapse for different volumes of content. This code does the job, the only problem is the top right and top left images can become overlapped when the container is at its smallest.
Free CSS Photo Gallery. Free CSS Effects: For Quality Css Menus, buttons and image animations. CSS Photo Gallery script. This simple css effect simply displays the image and a discription upon the hover state.
Diagonal Horizontal Green Menu. This horizontal menu took quite a few hours to perfect but hopefully, the result is quite effective. The only way to create this effect (and I tried all of them)was to change the width, background-image and z-index apon the hover state. If there are any other ways of acheiving this effect with CSS please let me know.
Orange CSS Rollover Button. This orange 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.
Vertical Blog Menu. This vertical menu is a great idea for blogs. Users will find it much easier to hover over a large amounts of information rather than trying to find and click on a smaller button. Interactive multimedia is about making your user/visitor experience as stress free as possible. Bigger rollover areas are not just helpful to users with poor motor skills or little vision, they can actually speed up and enhance everybodys surfing experience.
CSS Navigation:
Latest CSS:
•
Css3 Iphone Menu Pad
Creating an iphone app? how about this funky dark purple menu made in css3. Look ...
Added: Friday 24 Jun, 2011
•
Huge Expandable Horizontal Menu
You may be thinking that this menu was made with CSS3. Not the case! This menu w ...
Added: Monday 13 Jun, 2011
•
Matt Cardle Vertical Menu
2010 Xfactors Matt Cardle Menu. This vertical menu shows how a png image can be ...
Added: Saturday 16 Oct, 2010
•
Sleek Drop-down Menu
A great example of what css can be used to create. This free download from PSDGR ...
Added: Friday 13 Aug, 2010
•
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
Top Rated:
Css rollover uk map te ...
Free rollover map of the Unite ...
4.3 / 5 - 53 Ratings
CSS World Map Rollover
I made the UK rollover map las ...
4.4 / 5 - 43 Ratings
Huge Expandable Horizo ...
You may be thinking that this ...
4.9 / 5 - 19 Ratings
Free Tabbed Navigation ...
Tabbed navigation menus improv ...
4.5 / 5 - 15 Ratings
Transparent Vertical M ...
This vertical golf menu uses a ...
4.4 / 5 - 14 Ratings
CSS Tags:
