Monday, November 29, 2010

Create Rollover Image in CSS

I made two buttons for this tutorial, save it if you want to work with them.



Open Notepad and type the next code:
 1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Create Rollover Image in CSS</title>
<style type="text/css">
a.w3school {
display: block;
background-image: url(http://travelvacationguides.co.cc/w3school.jpg);
background-repeat: no-repeat;
width: 400px;
height: 400px;
}
a.w3school:hover {
background-image: url(http://travelvacationguides.co.cc/w3school-hover.jpg);
}
</style>
</head>

<body>
<p style="text-align:center"><a class="w3school" href="http://w3schoolss.blogspot.com">Create Rollover Image in CSS</a> </p>
</body>
</html>

2.Click on File > Save as and save like HTML

This results in

No comments:

Post a Comment