PDA

View Full Version : Question: CSS image mapping?


Cello
September 7th, 2009, 09:55 AM
Hello,

I'm well accustomed to HTML by now, and now I'm trying to get the hang of CSS for the sake of posting flashy threads around here.

Is there perhaps a way to image map with CSS on PC? :>
I know some forums have it and some don't.

For those who don't know what image mapping is, it's basically setting links across images based on height/width pixel locations that are set. I did a bad job of describing it, I know.

If not, could I suggest the addition of CSS image mapping?
(Without sounding pushy like I just did :( )

Serene Grace
September 7th, 2009, 09:58 AM
Looking through the BBcode list, this is the closest thing I can find.

http://img.skitch.com/20090810-cy5h8syy26pyc3g653tk9eixd9.png

The code:
http://img.skitch.com/20090810-cy5h8syy26pyc3g653tk9eixd9.png

Cello
September 7th, 2009, 10:02 AM
Looking through the BBcode list, this is the closest thing I can find.

http://img.skitch.com/20090810-cy5h8syy26pyc3g653tk9eixd9.png

The code:
http://img.skitch.com/20090810-cy5h8syy26pyc3g653tk9eixd9.png

Thank you for your help, but i'm affraid that wasn't what I was looking for...
However I didn't know that button existed. :o

An example of what I mean;
Say in the image you posted above I wanted that highlighted button to be a link you can click on, but the rest of the image can't be clicked.
That's what I mean by image mapping.

THIRTY-SIX
September 7th, 2009, 10:03 AM
That can be done by slicing the images...

Cello
September 7th, 2009, 10:05 AM
That can be done by slicing the images...

Ah, I was trying my best not to resort to doing that.

Oh well.
Thanks anyways I suppose.

Josephine
September 8th, 2009, 08:14 AM
If I'm right on what you're describing then this is perfectly possible, here's a demonstration:

[css-div="background-image: url('http://i73.photobucket.com/albums/i226/icbim/sigbanner.png'); height: 298px; width: 500px;"][css-div="padding: 100px; padding-right: 50px; float: right;"][css-div="height: 20px; width: 50px;background-color: green;"]LNK
[/css-div] (http://#)[/css-div][css-div="float: left;padding-top: 10px; padding-left: 10px;"][css-div="color: pink;"]hyerperlink (http://#)

hyperlink (http://#)

hyperlink (http://#)[/css-div]
Normal text

Normal text[/css-div][/css-div]

[css-div="background-image: url('http://i73.photobucket.com/albums/i226/icbim/sigbanner.png'); height: 298px; width: 500px;"][css-div="padding: 100px; padding-right: 50px; float: right;"][css-div="height: 20px; width: 50px;background-color: green;"]LNK
[/css-div] (http://#)[/css-div][css-div="float: left;padding-top: 10px; padding-left: 10px;"][css-div="color: pink;"]hyerperlink (http://#)

hyperlink (http://#)

hyperlink (http://#)[/css-div]
Normal text

Normal text[/css-div][/css-div]

Cello
September 8th, 2009, 11:38 AM
If I'm right on what you're describing then this is perfectly possible, here's a demonstration:

[css-div="background-image: url('http://i73.photobucket.com/albums/i226/icbim/sigbanner.png'); height: 298px; width: 500px;"][css-div="padding: 100px; padding-right: 50px; float: right;"][css-div="height: 20px; width: 50px;background-color: green;"]LNK
[/css-div] (http://#)[/css-div][css-div="float: left;padding-top: 10px; padding-left: 10px;"][css-div="color: pink;"]hyerperlink (http://#)

hyperlink (http://#)

hyperlink (http://#)[/css-div]
Normal text

Normal text[/css-div][/css-div]

[css-div="background-image: url('http://i73.photobucket.com/albums/i226/icbim/sigbanner.png'); height: 298px; width: 500px;"][css-div="padding: 100px; padding-right: 50px; float: right;"][css-div="height: 20px; width: 50px;background-color: green;"]LNK
[/css-div] (http://#)[/css-div][css-div="float: left;padding-top: 10px; padding-left: 10px;"][css-div="color: pink;"]hyerperlink (http://#)

hyperlink (http://#)

hyperlink (http://#)[/css-div]
Normal text

Normal text[/css-div][/css-div]


Oh, thank you very much. Not exactly what I had in mind since with image mapping you can set the height and width of the link, but I can work with this.

Thanks for taking the time to respond/throw that together. :)

Rukario
September 8th, 2009, 11:43 AM
normally image mapping is a function of the html.. since we don't allow html you won't be able to do this on the forum.. I've not seen any way yet to do this in css or any other way (aside from slicing and linking slices - which is pretty complex)

Cello
September 8th, 2009, 11:58 AM
normally image mapping is a function of the html.. since we don't allow html you won't be able to do this on the forum.. I've not seen any way yet to do this in css or any other way (aside from slicing and linking slices - which is pretty complex)

Before creating this thread I had actually searched google thoroughly for a how-to on image mapping in CSS.
While I didn't find a guide or anything of the sort, I did come across somebody saying that "some forums that allow CSS posting have image mapping capabilities" which led to me asking. I'm familiar with both BB Code and HTML but not with CSS so I don't know if it's really possible myself....

Perhaps the result google shot me was just pulling my leg. ;(

I guess I'll just keep to slicing up my images.

Josephine
September 9th, 2009, 01:38 AM
...Not exactly what I had in mind since with image mapping you can set the height and width of the link...Just use the hovering green box in my example and not set a background color? Should work flawlessly.

beauty. proletariat
September 9th, 2009, 02:04 AM
I would suggest using counterfeit's idea if you dont like setting width and heights in css as small screens or fixed-width forum styles will mess up cutting up the images