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

1 comment:

  1. Because of this, you can easily save money with the IRAs and get tax relief in the process. Your money will grow into cash and you will not have to pay taxes until you withdraw it. Get more interesting details about gold ira guide check out this site.

    ReplyDelete