Joseph C R Posted February 14, 2014 Share Posted February 14, 2014 (edited) <head><title>SPACEUPHORIA</title><link rel="shortcut icon" href="favicon.ico" /><meta name="description" content="Welcome to SPACEUPHORIA. The website where everything is possible! Suitable for all-ages. Get ready to jump in the universe and travel much faster than the slow speed of light!" /><meta name="keywords" content="Science,Imagination,Inspiration,Wonder,Dreams,Aliens,Poetry,Concept Wonders,3D Images,2D Images" /><style>body {}.font1{color: #00ffff;font-family: georgia;font-size: 13pt;text-align: justify;}.font2{color: #00ffff;font-family: georgia;font-size: 14pt;text-align: justify;}.font3{color: #00ffff;font-family: georgia;font-size: 18pt;text-align: right;}</style><style type="text/css">p.int1{text-indent:10px;margin-top: 1;margin-bottom: 0}p.int2{text-indent:10px;margin-top: 1;margin-bottom: 0}p.int3{text-indent:0px;margin-top: 0;margin-bottom: 0}p.int4{text-indent:5px;margin-top: 0;margin-bottom: 0}p.int5{text-indent:5px;margin-top: 0;margin-bottom: 1}p.int6{text-indent:0px;margin-top: 0;margin-bottom: 0}p.int7{text-indent:0px;margin-top: 0;margin-bottom: 0}p.int8{text-indent:20px;margin-top: 0;margin-bottom: 0}p.int9{text-indent:20px;margin-top: 0;margin-bottom: 0}p.int10{text-indent:20px;margin-top: 0;margin-bottom: 0}p.int11{text-indent:10px;margin-top: 1;margin-bottom: 0}.class1 a:link {color:#00ffff;text-decoration: none}.class1 a:visited {text-decoration: none}.class1 a:visited {color:#00ffff;}.class1 a:hover {color:#ff00ff;}.class1 a:hover {text-decoration: underline}.class1 a:active {color:#ffffff;}.class2 a:link {color:#ff0000;text-decoration: none}.class2 a:visited {text-decoration: none}.class2 a:visited {color:#ff0000;}.class2 a:hover {color:#FF9900;}.class2 a:hover {text-decoration: underline}.class2 a:active {color:#FFFF00;}.class3 a:hover {color:#ffffff;}</style><script>button1up = new Image; button1up.src = "images/Hover%20Buttons/Home-2.gif";button1down = new Image; button1down.src = "images/Hover%20Buttons/Home-3.gif";button2up = new Image; button2up.src = "images/Hover%20Buttons/Website-Guidelines-2.gif";button2down = new Image; button2down.src = "images/Hover%20Buttons/Website-Guidelines-3.gif";button3up = new Image; button3up.src = "images/Hover%20Buttons/WEBMASTER-2.gif";button3down = new Image; button3down.src = "images/Hover%20Buttons/WEBMASTER-3.gif";button4up = new Image; button4up.src = "images/Hover%20Buttons/About-JCR-2.gif";button4down = new Image; button4down.src = "images/Hover%20Buttons/About-JCR-3.gif";button5up = new Image; button5up.src = "images/Hover%20Buttons/Joeys-Documentary-2.gif";button5down = new Image; button5down.src = "images/Hover%20Buttons/Joeys-Documentary-3.gif";button6up = new Image; button6up.src = "images/Hover%20Buttons/INTERSTELLAR-ONE-2.gif";button6down = new Image; button6down.src = "images/Hover%20Buttons/INTERSTELLAR-ONE-3.gif";button7up = new Image; button7up.src = "images/Website%20images/Logo.gif";button7down = new Image; button7down.src = "images/Website%20images/Logo-Dance.gif";function MouseOverRoutine(ButtonName){if (ButtonName=="button1"){document.button1.src = button1down.src;}if (ButtonName=="button2"){document.button2.src = button2down.src;}if (ButtonName=="button3"){document.button3.src = button3down.src;}if (ButtonName=="button4"){document.button4.src = button4down.src;}if (ButtonName=="button5"){document.button5.src = button5down.src;}if (ButtonName=="button6"){document.button6.src = button6down.src;}if (ButtonName=="button7"){document.button7.src = button7down.src;}}function MouseOutRoutine(ButtonName){if (ButtonName=="button1"){document.button1.src = button1up.src;}if (ButtonName=="button2"){document.button2.src = button2up.src;}if (ButtonName=="button3"){document.button3.src = button3up.src;}if (ButtonName=="button4"){document.button4.src = button4up.src;}if (ButtonName=="button5"){document.button5.src = button5up.src;}if (ButtonName=="button6"){document.button6.src = button6up.src;}if (ButtonName=="button7"){document.button7.src = button7up.src;}}</script></head>New web page example, using the scrollbar colour codes inside the head tag.<head><title>"RED WARNING SIGN"</title><style type="text/css">body {scrollbar-arrow-color: #ff0000;scrollbar-face-color: #ff0000;scrollbar-track-color: #000000;}</style><style type="text/css">p.int1{text-indent:10px;margin-top: 0;margin-bottom: 0}p.int2{text-indent:10px;margin-bottom: 0}p.int3{text-indent:10px;}p.int4{text-indent:10px;margin-top: 0}p.int5{text-indent:0px;margin-top: 0;margin-bottom: 0}p.int6{text-indent:0px;}p.int7{text-indent:0px;margin-top: 10;margin-bottom: 0}.class1 a:link {color:#00ffff;text-decoration: none}.class1 a:visited {text-decoration: none}.class1 a:visited {color:#00ffff;}.class1 a:hover {color:#ff00ff;}.class1 a:hover {text-decoration: underline}.class1 a:active {color:#ffffff;}.class2 a:link {color:#ff0000;text-decoration: underline}.class2 a:visited {text-decoration: underline}.class2 a:visited {color:#ff0000;}.class2 a:hover {color:#FF9900;}.class2 a:hover {text-decoration: underline}.class2 a:active {color:#FFFF00;}</style><script>button1up = new Image; button1up.src = "images/Website%20images/Spaceuphoria%20Turquiose.gif";button1down = new Image; button1down.src = "images/Website%20images/Spaceuphoria%20Pink.gif";function MouseOverRoutine(ButtonName){if (ButtonName=="button1"){document.button1.src = button1down.src;}}function MouseOutRoutine(ButtonName){if (ButtonName=="button1"){document.button1.src = button1up.src;}}</script></head> If anyone wants to make buttons and hover links in their websites, Here are some really neat commands I've learned from here. All the int functions work well. I just have some int commands over time, which set margins the same. But I also can use these extra ones just in case I need another int command somewhere else. I've also placed my brand new font codes in the head tag too. I call this the brain of my website, which pretty much controls my whole website's pages, from font command settings, to buttons and hover buttons to hover links. I have a scrollbar colour code command too, not shown here. I used an outer table in my website, so the scrollbar command would squish my pages and make them go all funny layouts. I do have this feature on my animal rights page, because I never used an outer table to hide a space background. So the commands work great there and nothing gets squished up. The scrollbar command does make the scrollbars just a few pixels fatter, but as long as you don't have an outer table, such as I do, then the commands work really neat. They are under this program example. Just place the code in the head section, and make sure you type <style type="text/css"> and always stop a style, before you use a new one like this </style>. If you don't use the closed style command, you won't be able to make all your styles work. You have to close one, before you can make another one work properly. As in my example, all my styles also get closed up, so I can make more of them and make them work all at once together. That much, I did learn out of this website. lol I hope this can help anyone down the road. I just learned bits and pieces and eventually did all this. You can simply rename the button images to whatever button image names you create. The commands appear to all work in my website. Some older browsers won't be able to do some of the new html 5 features. The scrollbar commands don't work on older browsers, and Netscape won't show a fixed space background, but a scrolling one instead. Some things here won't work in earlier browsers, or browsers, which won't support some of the new html features. So play with this code and see what you can make it do for you, Does anyone have any really cool code stuff, I could use? I am still very new to CSS and HTML and Java script too. So far, I love the features, and some features do work better with others. If one feature isn't what you want, but you like the way it works, then go with a combination of things to make your special features work. I've needed CSS to do superior font control, I've need java script actions to make buttons look like they click. But most important of all. I needed YOU to help me all the more................ Thank you............... Rome wasn't built in one day. My website won't be built in one day either. Good things take time to cook up. It's good people, who help shape such things into light, much quicker than meets the eye. Two people have greatly improved my website, and I felt hurt, but at the same time, I was headed for a font milestone. So, I'm not so hurt after all. I will build and get much stronger, because I always ask for intelligence, when at one time, I wasn't supposed to have any at all. People, animals. They've helped me out a lot. Even while getting hurt, sometimes beaten down. I get up, just to get kicked in the face again. Yet, I've rebuilt things in me, that others could see. Here I am!) Edited February 14, 2014 by Joseph C R Link to comment Share on other sites More sharing options...
Ingolme Posted February 14, 2014 Share Posted February 14, 2014 There's a more modern technique that's shorter and allows text to be used in buttons (ideal for search engines), it's called CSS sprites. Here's the tutorial page about it: http://www.w3schools.com/css/css_image_sprites.asp And here's a working example: http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now