Menu
Community /Pin to ProfileBookmark
The image:
[IMG]http://i261.photobucket.com/albums/ii64/playa4real1/Escapes.png [/IMG]
Also, by accident I left out the end quote, here it is fixed:
CSS Rollover Image not working
The image I created (110px x 166px) that I want the top half 110×83 showing and on hover, have the bottom half of the image showing. For some reason, I cannot get this to work and i’m sure its just something very simple that i’m missing. Any help is appreciated.
CSS
[CODE]@charset “utf-8”;
/* CSS Document */
#escapes
{
height:83px;
width:110px;
background: url(Board_Images/Escapes.png);
}
#escapes:hover
{
background-position: 0px -83px;
background:url(Board_Images/Escapes.png);
}
and the HTML
[CODE]<!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=utf-8″ />
<title>Untitled Document</title>
<link href=”common.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
@import(“file:///C|/Users/Desktop/ACE Board 2/common.css”);
</style>
</head>
<a id=”escapes” style=”position: absolute; left: 610px; top: 80px; href=”http://www.google.com”></a>
<body>
</body>
</html>
Goal: Create an image that when the mouse rolls over, it changes so that the user knows they can click on it to a specified link.
Sign in
to post a comment2 Comments(s) ↴
0
@playa4real1Feb 21.2010 — #Sure. The image:
[IMG]Also, by accident I left out the end quote, here it is fixed:
[CODE]<a id="escapes" style="position: absolute; left: 610px; top: 80px;" href="http://www.google.com"></a>
[/CODE]