Mar 10

How To Do A Simple CSS Rollover Using Images

SEO , ,

Sometimes text rollovers are not the only buttons requested for web pages. Rollover buttons with images for onmouseover and onmouseout states have been coded for some time. Dreamweaver is very useful for simple ‘point and click’ functionality here as it quickly sets up image rollovers. However, clean code needs minimum JavaScript and more xhtml compliancy; in other words, use CSS.

CSS solves many issues when it comes to creating rollover states and is quite straightforward if you have basic CSS skills. I shall show you step by step how to create image rollovers using CSS only.

Let’s create a button for a shopping cart. Your button will have the text ‘BUY NOW’ on it, and when the mouse hovers over the button, an image showing your logo next to the text ‘BUY NOW’ appears. Create the simple image in Photoshop or use other types of images. For this to work, ensure that the button has space for the text. Let’s call them image1 and image2. Save them as GIF files. Image1 can be just a blank image or with a background color of your choice; Image2 will differ by having the logo on it.

Create your two images for the mouse over and out states. Next, we shall create a CSS tag that will control the rollover transition between images. As I show the code, feel free to change the font type, color and other parameters as needed for your web page.

<html>
<head>
<style>
.cssrollover
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(image2.gif) no-repeat;
white-space: nowrap;
display: block;
width: 220px;
height: 45px;
margin: 0;
padding: 0;
}

We use position: relative to position the image relative to its assigned position when the mouse rolls over it. We need the image to not repeat across the space so ensure the no-repeat is added to the url tag line. To prevent text wraps we add white-space: nowrap. We are going to separate the text from the image so that this code can be customized for other uses, other types of rollover buttons. Only the text will appear against the button background when the mouse is not hovering over the button.

Next, we need to code the anchor. First we want the image space parameters set:

.cssrollover a
{
display: block;
color: #000000;
font-size: 11px;
width: 220px;
height: 45px;
display: block;
float: left;
color: black;
text-decoration: none;
}

Now for the image parameters on the img tag:

.cssrollover img
{
width: 220px;
height: 45px;
border: 0
}

We need visibility when the mouse rolls over the image:

* html a:hover
{
visibility:visible
}

.cssrollover a:hover img
{
visibility:hidden
}

Now finally some positioning on the text for the button:

.cssrollover span
{
position: absolute;
left: 40px;
top: 20px;
margin: 0px;
padding: 0px;
cursor: pointer;
}
</style>

Now, some basic HTML for the display:

<title>e-Commerce Cart Button</title>
</head>

<body>
<div class=”cssrollover”>
<a href=http://www.devwebpro.com/how-to-do-a-simple-css-rollover-using-images/”<YOUR PRODUCT LINK HERE>”><img src=”image1.gif” alt=”buy now” /><span>BUY NOW</span></a>
</div>
</body>
</html>

These simple image rollovers in CSS can be useful in keeping code clean and crisp. Plus, as its CSS, you can apply the styles to any number of buttons on the web pages.

Related posts:

  1. How to Auto Caption Images Using MooTools
  2. Finding PNG Images Larger Than x Pixels Through the Linux Shell
  3. Create a Very Simple Portfolio Web Layout with Photoshop
  4. Create a Social Media Sharing Menu Using CSS and jQuery
  5. PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout
  6. Make an Elegant and Simple Blog Web Layout Using Photoshop
  7. Using SIPS to Resize Images in OS X

Comments are closed.