• Locked
No replies
Wed, 2012-09-12 07:02
boguz
boguz's picture
Offline
newbie
Last seen: 9 years 14 weeks ago
Timezone: GMT+1
Joined: 2012-09-12
Posts: 3
Points: 5

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!
=)

Top
Tags: