Faking a Graphical Link

By: Chris Beasley, Published: 2003-05-05, Parent Categories: Search Engine Optimization, CSS

Then you need to work on your CSS. You need to change the display of your anchor tags to block for this trick to work in Mozilla. Otherwise I think the CSS is pretty straight forward: 

	  a.menu{
		color:#ffffff;
		font-family:verdana;
		font-size:11px; 
		font-weight:bold;
		text-decoration:none;
		line-height: 30px;
		width:120px;
		height:30px;
		position:absolute;
		background-image: url("up.jpg");
		background-repeat: no-repeat;
		text-align: center;
                display: block;
	}
	a.menu:hover {
		color:#000000;
		background-image: url("down.jpg");

	}

Nothing too complicated there. You need to set the width and height to the dimensions of the image you are using as a background.

You can view (in an iframe) a working example below:

Method 2»
« Method 1