lordsofvine
New Member
- Messages
- 41
- Reaction score
- 0
- Points
- 0
what should be the code?
how about image hyperlink using css
- Thread starter lordsofvine
- Start date
lordsofvine
New Member
- Messages
- 41
- Reaction score
- 0
- Points
- 0
image hover with hyperlink using css codes
lordsofvine
New Member
- Messages
- 41
- Reaction score
- 0
- Points
- 0
EliteACE hey about css code
curt15
New Member
- Messages
- 96
- Reaction score
- 0
- Points
- 0
Code:
body {
background: #000;
color:#fff;
}
ul, li { /* list use for the menu */
list-style-type: none; /* suppression of list markers */
margin:0;
padding:0;
}
ul {
position: absolute; /* positionning for IE5 and IE5.5 */
top: 20%;
left: 33%;
background: transparent url(link to image) top left no-repeat; /* general menu background */
width: 375px;
text-align: center;
}
li {float: left;}
li a { /* buttons dimensions and definitions */
display: block; /* <a> placed in block to give it dimensions */
height: 420px;
width: 125px;
color: #fff;
font-size: 14px;
line-height: 50px; /* line height to avoid paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;
}
li a:hover {
background: transparent url(link ti image) top left no-repeat;
}
a#menu1:hover {
background-position: -375px 0%; /* background place offset for each button */
}
a#menu2:hover {
background-position: -500px 0%;
}
a#menu3:hover {
background-position: -625px 0%;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Your Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<P>
<P>
<body>
<center>
<ul>
<li><a id="menu1" title="Link One Title" accesskey="1" href="link.ext"></a></li>
<li><a id="menu2" title="Link Two Title" accesskey="2" href="link.ext"</a</li>
<li><a id="menu3" title="Link Three Title" accesskey="3" href="link.ext"></a></li>
</ul>
Text Here :)
</Center>
</body>
</html>That will let you use an image, and when you hover over it it will change, it can also be used as one massive menu background that changes on hover. You will have to change the numbers to what you require though.