View Full Version : Links in pictures

May 7th, 2011, 10:50 AM
/How do you put links in pictures? Like You have a plain ol' banner, then you put a link inside the picture? Is it programming/css related>

May 7th, 2011, 10:52 AM
what do you mean, a picture that by itself is a link, or a sentence link that appears on top of a picture ?

May 7th, 2011, 10:53 AM
Yup, it's CSS. You can find all things about CSS in this thread, so go check it out :D


May 7th, 2011, 10:57 AM
It's not necessarily CSS, unless I misunderstand you. You might be referring to people that have text on top of images, which yes, in that case it is CSS, but you might also be referring to someone who just links an image to somewhere, for example:

http://www.serebii.net/blackwhite/pokemon/637.png (http://www.pokecommunity.com/)

If that's what you're looking for, this is what you'd do:


May 7th, 2011, 11:03 AM
Yeah I was referring to the text on top of images.


May 7th, 2011, 11:08 AM
Well to speed up the process, just put this in your sig:
[*css-div=" background-image:url('link here');"]text here [/css-div]

of course you might want to organize the text, use the center and what not feature to do that, and if you want to specify and certain width and length for the image (it will start from the top left corner and take the width and length from there on), use:

[*css-div=" background-image:url('link here'); width: ...px; height: ...px;"]text here [/css-div]

instead of the ... put the width and height you need, if you still don't understand, you should check the tutorial Charizard★ mentioned.

oh and remove the *s from the codes.

May 7th, 2011, 12:37 PM
Thanks. ;D

Is it possible to get one url for the entire image though? For instance, could I theoretically get your Pokemon Legend banner as one url without the coding?

May 7th, 2011, 6:21 PM
If you mean with text on banner to get one url, then go with this (terrible placement, but still):

[css-div=width:292px;height:324px;][css-div=background-image: url('http://archives.bulbagarden.net/media/upload/4/49/507Herdier_Dream.png');width:292px;height:324px;][css-div=padding-top:180px;]text on image which is a url[/css-div][/css-div] (www.pokecommunity.com)[/css-div]

[css-div=width:292px;height:324px;][css-div=background-image: url('http://archives.bulbagarden.net/media/upload/4/49/507Herdier_Dream.png');width:292px;height:324px;][css-div=padding-top:180px;]text on image which is a url[/css-div][/css-div] (www.pokecommunity.com)[/css-div]

If you mean without text, then you'd be going for Toujours example. :) (Even so, the above would still be handy for you to know!) Either way you're gunna need coding to go for any of the examples posted here, though the best way to learn is just by trying what works for you and then soon you'll have the entire css codes memorised.

May 8th, 2011, 8:41 AM
Thanks for all your help.

I'm trying to get this to work on a different forum which doesn't support css. So is there not a way where I could just "copy image url" say of the Herdier example and then paste it on a different forum w/o the coding?

May 8th, 2011, 8:44 AM
If you want text on it, no you can't, (you could then put text on in an image editing program) but if you don't want text on it, then yeah that doesn't need css and it'll work on the other forum. :)

May 8th, 2011, 8:52 AM
Alright thanks that's all I needed to know.

A bummer, but, oh well.

May 8th, 2011, 11:37 AM
another forum eh ?? try this, in the post box (i have no idea what you call it), check if there is an HTML tag (BBcode), if yes, you'll need to learn simple HTML (just the basics), and try it. php might work too. You don't have to be webmaster level to get this to work.