how about image hyperlink using css

LHVWB

New Member
Messages
1,308
Reaction score
0
Points
0
Hmm, could you please explain what you want with a bit more detail?
 

EliteACE

New Member
Messages
9
Reaction score
0
Points
0
Code:
<a href="http://forums.x10hosting.com/programming-help/page.html"><img src="http://forums.x10hosting.com/programming-help/image.jpg"></img></a>
 

Hazirak

New Member
Messages
197
Reaction score
0
Points
0
The best you could do is to set an image as the background for an element. As far as I know though, there's no way to add hyperlinks through CSS.
 

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%;
}
call that style1.css

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.
 
Top