where do I change these steps at in the coding ?
Change the background color of the dashboard to black with an opacity of 0.6.
Change the opacity of the images in the dashboard to 0.5 before the dashboard slides out.
Change the opacity of the dashboard images to 1.0 when each image is moused over.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A Slide In Dashboard</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
#dashboard {
width: 70px;
opacity:0.6;
background-color: rgb(110,138,195);
padding: 20px 20px 0 20px;
position: absolute;
left: -92px;
z-index: 100;
}
#dashboard img {
margin-bottom: 20px;
order: 1px solid rgb(0,0,0);
}
</style>
<script src="/_js/jquery-1.7.2.min.js">
</script>
<script src="_js/jquery-1.6.3.min.js"></script>
<script src="_js/jquery.easing.1.3.js"></script>
<script src="_js/jquery.color.js"></script>
<script>
$(document).ready(function()
{
$('#dashboard').hover(
function(){
$(this).stop().animate({ opacity:1.0}, 800);
{
left: '0' ,
backgroundColor: 'rgb(255,255,255)'
}
500,
'easeInSine'
); // end animate
},
function() {
$(this).stop().animate({ opacity:0.3 }, 800;
{
left: '-92px'
backgroundColor: 'rgb(110,138,195)'
},
1500,
'easeOutBounce'
); // end animate
}
); // end hover
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
</div>
<div id="dashboard">
<img src="../_images/small/blue_h.jpg" width="70" height="70" alt="blue">
<img src="../_images/small/green_h.jpg" width="70" height="70" alt="green">
<img src="../_images/small/orange_h.jpg" width="70" height="70" alt="orange">
<img src="../_images/small/purple_h.jpg" width="70" height="70" alt="purple">
<img src="../_images/small/red_h.jpg" width="70" height="70" alt="red">
<img src="../_images/small/yellow_h.jpg" width="70" height="70" alt="yellow">
</div>
<div class="content">
<div class="main">
<h1>Slide in Dashboard</h1>
<p>Mouse over the blue stripe on the left edge of this page</p>
</div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</div>
</div>
</body>
</html>