Hello guys.
This is my first post here in the forum and, to be honest, i am REALLY new to the forum! A week ago i still didn't know what CSS was!
I have been trying to learn a little bit about webdesign, mostly to make a couple of website to some project i have.
I have been trying to learn about, and i speacially like the CSS "concept", so i have been reading from the net and tried to follow the "tutorials" at http://www.w3schools.com/ .
I actually think things are going ok, but now i got into a little problem i don't seem to solve! =/
Let me explain.
I have a website with a Banner with a logo and 3 buttons (MenuSpry from Dreamweaver).
I have a Image inside a content div.
i would like the image ( #content) to change according to each button we hover.
How could i achieve this?
Let me post the code for you:
HTML:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>E.S.T.</title> <link href="_css/layout.css" rel="stylesheet" type="text/css"> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> </head> <body> <div id="container"> <div id="banner"> <div id="logo">E.S.T.</div> <div id="menu"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li id="button1"><a href="#">Biography</a></li> <li id="button2"><a href="#">Albums</a></li> <li id="button3"><a href="#">Links</a></li> </ul> </div> </div> <div id="content"> <img src="_img/background.jpg" alt="e.s.t." width="850" height="539"> </div> </div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body> </html>
CSS:
@charset "UTF-8"; @import url("../_fonts/Days/fontstylesheet.css"); /* CSS Document */ body { background-color:#CCC; font-family:Days; font-size:100%; } #container { width:850px; max-height: 650px; margin: 0 auto; padding-left: 10px; padding-right: 10px; overflow: hidden; font-family: Days; } #logo { position:relative; font-size: 4em; color:white; float:left; } #menu { float:right; margin-top:40px; } #button1:hover { background-color:;} }
Thank you for your help!
=)