Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 05-28-2006, 12:43 PM   #1
BSOD
 
King of Kings's Avatar
 
Join Date: Mar 2006
Posts: 1,072
Default link on a picture

How do I get a link on a picture?
__________________

__________________
King of Kings is offline   Reply With Quote
Old 05-28-2006, 12:57 PM   #2
Daemon Poster
 
geek_gal's Avatar
 
Join Date: Jun 2005
Posts: 1,245
Send a message via MSN to geek_gal Send a message via Yahoo to geek_gal
Default Re: link on a picture

Wasnt it easy?

Something like

[IMG] then put the URL here ?? [/IMG]

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
__________________

__________________
Am2 AMD 64 X2 3600+, 1G Ram DDR,
[[*Need a new Gfx Card & 1 more Ram stick// 1GB*]]
Sony Avatar's!
geek_gal is offline   Reply With Quote
Old 05-28-2006, 01:03 PM   #3
In Runtime
 
Luiz396's Avatar
 
Join Date: Jul 2005
Posts: 239
Send a message via MSN to Luiz396
Default Re: link on a picture

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>
__________________
Don't go where the path may lead. Go instead where there is no path and leave a trail.

Soy Dominicano!!
Luiz396 is offline   Reply With Quote
Old 05-28-2006, 01:17 PM   #4
BSOD
 
King of Kings's Avatar
 
Join Date: Mar 2006
Posts: 1,072
Default Re: link on a picture

No you guys dont get what im saying.
http://geekers.tk/
^^look at the site header. It has two links on it. Thats what im wondering how to do
__________________
King of Kings is offline   Reply With Quote
Old 05-28-2006, 01:20 PM   #5
BSOD
 
MSFanBoy's Avatar
 
Join Date: May 2006
Posts: 190
Default Re: link on a picture

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.
__________________
MSFanBoy is offline   Reply With Quote
Old 05-28-2006, 01:24 PM   #6
BSOD
 
King of Kings's Avatar
 
Join Date: Mar 2006
Posts: 1,072
Default Re: link on a picture

uugggggggggggggggggggggggggg
__________________
King of Kings is offline   Reply With Quote
Old 05-29-2006, 04:08 AM   #7
Site Team
 
root's Avatar
 
Join Date: Mar 2004
Posts: 8,107
Default Re: link on a picture

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 didn’t fight my way to the top of the food chain to be a vegetarian…
Im sick of people saying 'dont waste paper'. If trees wanted to live, they'd all carry guns.
"The inherent vice of capitalism is the unequal sharing of blessings; The inherent vice of socialism is the equal sharing of miseries."
root is offline   Reply With Quote
Old 05-29-2006, 05:07 AM   #8
BSOD
 
MSFanBoy's Avatar
 
Join Date: May 2006
Posts: 190
Default Re: link on a picture

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.
__________________
MSFanBoy is offline   Reply With Quote
Old 05-30-2006, 03:56 PM   #9
Baseband Member
 
itturnstoashes's Avatar
 
Join Date: May 2006
Posts: 39
Send a message via MSN to itturnstoashes
Default Re: link on a picture

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.
__________________
itturnstoashes is offline   Reply With Quote
Old 05-31-2006, 09:38 AM   #10
Site Team
 
root's Avatar
 
Join Date: Mar 2004
Posts: 8,107
Default Re: link on a picture

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?
__________________
I didn’t fight my way to the top of the food chain to be a vegetarian…
Im sick of people saying 'dont waste paper'. If trees wanted to live, they'd all carry guns.
"The inherent vice of capitalism is the unequal sharing of blessings; The inherent vice of socialism is the equal sharing of miseries."
root is offline   Reply With Quote
Old 05-31-2006, 02:47 PM   #11
BSOD
 
King of Kings's Avatar
 
Join Date: Mar 2006
Posts: 1,072
Default Re: link on a picture

ahh it was a old question about html that I solved myself, thanks anyways
__________________
King of Kings is offline   Reply With Quote
Old 05-31-2006, 02:50 PM   #12
Baseband Member
 
itturnstoashes's Avatar
 
Join Date: May 2006
Posts: 39
Send a message via MSN to itturnstoashes
Default Re: link on a picture

Good job kings.
But this thread MUST go on, so others found out what you solved.
So show us

Root, your code is flawed, in two places.
# should actually be a "." (period)
and id should be class.

Correct me if i'm wrong.
__________________
itturnstoashes is offline   Reply With Quote
Old 05-31-2006, 09:22 PM   #13
BSOD
 
King of Kings's Avatar
 
Join Date: Mar 2006
Posts: 1,072
Default Re: link on a picture

I figured it out using div tags to aligh links wherever u want, not sure if thats how they did it infact its probaly not but thats the best I could find, also for some reason on that site the source is blocked so I cant freaking look !!!! that angers me. I love sources
__________________
King of Kings is offline   Reply With Quote
Old 06-01-2006, 05:15 AM   #14
Site Team
 
root's Avatar
 
Join Date: Mar 2004
Posts: 8,107
Default Re: link on a picture

Quote:
Originally Posted by itturnstoashes
Good job kings.
But this thread MUST go on, so others found out what you solved.
So show us

Root, your code is flawed, in two places.
# should actually be a "." (period)
and id should be class.

Correct me if i'm wrong.
OK... I'll correct you. (but you're not wrong)

http://www.w3.org/TR/REC-CSS1
section 1.5 ID as a selector.

the standard is pretty much open to interperatation as to whether you use object classes to style page element or an ID assigned to the element.
neither is given any kind of preference.

So the code I gave was right, however you are also right in that #element can be replaces by .class and id=element can be replaced by class=class
__________________
I didn’t fight my way to the top of the food chain to be a vegetarian…
Im sick of people saying 'dont waste paper'. If trees wanted to live, they'd all carry guns.
"The inherent vice of capitalism is the unequal sharing of blessings; The inherent vice of socialism is the equal sharing of miseries."
root is offline   Reply With Quote
Old 06-01-2006, 10:31 AM   #15
Baseband Member
 
itturnstoashes's Avatar
 
Join Date: May 2006
Posts: 39
Send a message via MSN to itturnstoashes
Default Re: link on a picture

Good. I was hoping I wasn't 100% right. Always room to learn.
I've seen that before, but it's never worked for me. :S
Only my way did, even though i copied your code exaclty, and only changed the two agents i said needed chagning.
But why is css so versatile, it's kind of anoying. Is there REALLY any theory behind it, or do they just ilke to make it so, if they make a mistake, everything will work anyways :P (That was a joke(Because internet jokes are hard to catch))
__________________
itturnstoashes is offline   Reply With Quote
Old 06-01-2006, 03:41 PM   #16
Site Team
 
root's Avatar
 
Join Date: Mar 2004
Posts: 8,107
Default Re: link on a picture

no, it's to do with the way that the standard were made..

first there was HTML
it's a markup language based on the same principals that you would use if you were setting type face for plate printing,

everything that is H1 would use the large heading plates
H2 would use the smaller

etc... etc...

but then as IE nd netscape (the then big boys of the browser world) developed they added in more tags until with html 4.01 pretty much everything to do with the entier page and the layou was in pure html

eg
<font colour="red" size="12" align=left>test</font>

(the font tag was one of the ones introduced after the standard was made).

so to iron out the differences between content and layout the w3c people invented style sheets, in this way a style could be applied to an element usenig either classes (which had just been introduced in HTML4 or ids (again introduced in HTML4)

classes are (or should) be used to assign style (or layout) properties that are used again and again (eg, imag float to right of screen and wrap text around image box, or dotted borders around paragraphs etc...

id's are (or should be) unique, so the styles applied in an ID should only be applied to a single element.
(in the example ID was probably more accurate since there was only one text link div and in the larger document there would still only be one text link over the main logo - but in that simple and reduced example it's difficult to say for sure)...

so that's the theory behind it...

the code that I gave works either way, (either using IDs or classes)


the only time you'll ever really notice the difference between the two is when working with javascrit when you can have...
<div id="test" class="testnormal" onmousover="this.style='testmouseover';" onclick="function()">

so the on mouse over event can change the style and the onclick even could change perhaps the content of the div, but the div is identified using the ID (snice the ID should be unique...


-----

to answer a question from a different thread.
in older revisions of HTML not all tags had to be closed.
but in the xhtml standard all tags have to be closed

hence <br> is html compliant and fine, but since the tag never close it's not xhtml compliant.

hence <br />

also hence things like
<input name="test" > should be <input name="test" />

also tags should be closed in the same order they were opned.
<b><i>hello</b></i> is wrong and should be
<b><i>hello</i></b>

but that's all symantics... IMO if it works don't worry!
(hope that all made sense).
__________________
I didn’t fight my way to the top of the food chain to be a vegetarian…
Im sick of people saying 'dont waste paper'. If trees wanted to live, they'd all carry guns.
"The inherent vice of capitalism is the unequal sharing of blessings; The inherent vice of socialism is the equal sharing of miseries."
root is offline   Reply With Quote
Old 06-01-2006, 04:29 PM   #17
BSOD
 
King of Kings's Avatar
 
Join Date: Mar 2006
Posts: 1,072
Default Re: link on a picture

lol root you really know your stuff. your sig says middleaged mod, are you really middle aged? ahh that just means youv enjoyed more of life so far. also, how do you upload your own avatar? do you have to have a certain number of post? Anyways thanks for all the html help, iv ben asking alot of questions lately
__________________
King of Kings is offline   Reply With Quote
Old 06-02-2006, 06:44 AM   #18
Site Team
 
root's Avatar
 
Join Date: Mar 2004
Posts: 8,107
Default Re: link on a picture

asking questions is a great way to learn, so keep asking...

midle aged, well I'm not really middle aged, (like 40 or wahtever), but I am old enough to have done with school colledge and uni and have a real job house car etc...

uploading avatars, it's a moderator only privellage I'm afraid, so sorry I can't really help you there. you could go start a thread on it in the suggestions section, (or resurect any of the many threads on avatars), but i really don't see the point being as the admins view on personalised avatars isn't going to change.
__________________

__________________
I didn’t fight my way to the top of the food chain to be a vegetarian…
Im sick of people saying 'dont waste paper'. If trees wanted to live, they'd all carry guns.
"The inherent vice of capitalism is the unequal sharing of blessings; The inherent vice of socialism is the equal sharing of miseries."
root is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 11:03 AM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2020, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0
×