IN HTML:
-----------------------------
IN CSS:
body {
background-color: #ccf5f5;
}
#gameholder {
width: 600px;
margin-left: auto;
margin-right: auto;
}
#title {
width: 600px;
height: 150px;
background-image:url('Images/penguin_title.png');
}
-----------------------------
IN CSS:
.penguin1 {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
.penguin2 {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
.penguin3 {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
.penguin4 {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
.penguin5 {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
.penguin6 {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
.penguin7 {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
.penguin8 {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
.yeti {
width: 200px;
height: 200px;
float: left;
background-image:url('Images/mound_1.png');
}
-----------------------------
IN CSS: (Above .penguin1 class)
.penguin1:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.penguin1:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.penguin2:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.penguin3:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.penguin4:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.penguin5:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.penguin6:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.penguin7:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.penguin8:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
.yeti:hover {
background-image:url('Images/mound_1_hover.png');
cursor: pointer;
}
-----------------------------
IN CSS: (After/under :hover)
.penguin1:active {
background-image:url('Images/penguin_1.png');
}
.penguin1:active {
background-image:url('Images/penguin_1.png');
}
.penguin2:active {
background-image:url('Images/penguin_1.png');
}
.penguin3:active {
background-image:url('Images/penguin_1.png');
}
.penguin4:active {
background-image:url('Images/penguin_1.png');
}
.penguin5:active {
background-image:url('Images/penguin_1.png');
}
.penguin6:active {
background-image:url('Images/penguin_1.png');
}
.penguin7:active {
background-image:url('Images/penguin_1.png');
}
.penguin8:active {
background-image:url('Images/penguin_1.png');
}
.yeti:active {
background-image:url('Images/penguin_1.png');
}
--------------------------
Check out this link below and add an alert box if the player clicks on the yeti:
http://www.cssportal.com/blog/css-notification-boxes/