link on a picture

Wasnt it easy?

Something like



Like if you had a Sig and when you put your mouse on the picture, click and it takes you to the site? Yeah is that what you mean?

Coz i would like to no if thats right aswell i need to no too =P
 
It's easy, you just do it the same way you do it with letters, you just have to put the image code between the link code, like this:

<a href="www.computerforums.org"><img src"http://www58.hattrick.org/common/images/banners/fh_banner_468_1.gif"></a>
 
On an image? You need to use either tables...or div tags with css...which is another language you will need to know before you go onto php.
 
the two links in the banner (home and forums) are just simple text links that are positioned in the center of the page, under the header picture, they have nothing to do with the picture. other than being under it.
 
I probably would've known that...but I can't view .tk websites for some reason :( So I had to go what they were describing it as...and it sounded like text over an image.
 
Yeah, it's basically all done with CSS.

Code:
<style type="text/css">

.whitetext12{visibility:hidden;}
.lightbluetext8{visibility:hidden;}


body{background-color:000000;}
table,tr,td{background-color:transparent;border:0px;}
a img{border:0px;}
font{visibility:hidden;}
font a.navbar{visibility:visible;}
body div table table{position:absolute;
left:50%;
top:0px;
margin-left:-400px;
z-index:4;}
.back{position:absolute;
background-color:000000;
background-image:url(http://photobucket.com/albums/a191/vennomrk/v2/Ryan.jpg);
background-attachment:scroll;
background-position:center center;
background-repeat:no-repeat;
top:120px;
left:50%;
margin-left:-400px;
width:800px;
height:556px;
z-index:2;}
.topleft{position:absolute;
top:260px;
left:50%;
margin-left:-315px;
width:150px;
height:130px;
z-index:3;
border:0px red solid;}
.bottomleft1{position:absolute;
top:520px;
left:50%;
margin-left:-335px;
width:80px;
height:130px;
z-index:3;
border:0px red solid;}
.bottomleft2{position:absolute;
top:520px;
left:50%;
margin-left:-235px;
width:80px;
height:130px;
z-index:3;
border:0px red solid;}
.topright{position:absolute;
top:260px;
left:50%;
margin-left:162px;
width:150px;
height:130px;
z-index:3;
border:0px red solid;}
.bottomright{position:absolute;
top:530px;
left:50%;
margin-left:162px;
width:80px;
height:130px;
z-index:3;
border:0px red solid;}

a.navbar,
a.navbar:link,
a.navbar:visited,
a.navbar:active,
a.navbar:hover{color:ffffff;}
a:link,
a:visited,
a:active{color: 000000;font-family:arial, verdana, tahoma, sans-serif;font-size:10px;text-decoration:none;}
a span{display:none;}
a:hover span {display: block;
position: absolute; top: -186px; left: 167px; width: 225px;
padding: 5px; margin: 10px; z-index: 5;
color: white; background-color:transparent;filter:none;
font-size: 10px;font-family: arial, verdana, tahoma, sans-serif; text-align: center;text-decoration:none;} 
a.new:link,
a.new:visited,
a.new:active{color: 000000;font-family:arial, verdana, tahoma, sans-serif;font-size:10px;text-decoration:none;}
a.new span{display:none;}
a.new:hover span {display: block;
position: absolute; top: -186px; left: 67px; width: 225px;
padding: 5px; margin: 10px; z-index: 5;
color: white; background-color:transparent;filter:none;
font-size: 10px;font-family: arial, verdana, tahoma, sans-serif; text-align: center;text-decoration:none;} 

* html a:hover span {display: block;
position: absolute; top: -187px; left: 165px; width: 225px;
padding: 5px; margin: 10px; z-index: 5;
color: white; background-color:transparent;filter:none;
font-size: 10px;font-family: arial, verdana, tahoma, sans-serif; text-align: center;text-decoration:none;} 

* html a.new:hover span {display: block;
position: absolute; top: -187px; left: 65px; width: 225px;
padding: 5px; margin: 10px; z-index: 5;
color: white; background-color:transparent;filter:none;
font-size: 10px;font-family: arial, verdana, tahoma, sans-serif; text-align: center;text-decoration:none;} 
</style>
PS. Myspace isn't the best place to learn about all this stuff. Try regular design sites.
 
you can get text on top of a picture by positioning the text using CSS.

like so
Code:
<style>
#one {

}
#two {
position: relative;
left: 130px;
top: -50px;
} 
</style>

<div id="one">
<img src="http://www.google.co.uk/images/hp0.gif">
<img src="http://www.google.co.uk/images/hp1.gif">
<img src="http://www.google.co.uk/images/hp2.gif">
</div>
<div id="two"><A href="test.html"><strong>test sentance or link</A></strong></div>

King of kings, I was going to reply to your PM, but I accidentally deleted it and have since forgotten what you said, anychance you could re-send it?
 
Back
Top Bottom