Question: CSS image mapping?

[Cello]

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]

Looking through the BBcode list, this is the closest thing I can find.



The code:

[cimg="border: 1px solid black; padding: 1px; background-color: white;"]https://img.skitch.com/20090810-cy5h8syy26pyc3g653tk9eixd9.png[/cimg]

 

[Cello]

Looking through the BBcode list, this is the closest thing I can find.



The code:

[cimg="border: 1px solid black; padding: 1px; background-color: white;"]https://img.skitch.com/20090810-cy5h8syy26pyc3g653tk9eixd9.png[/cimg]

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]

That can be done by slicing the images...

 

[Cello]

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.

 

[ruby]

If I'm right on what you're describing then this is perfectly possible, here's a demonstration:

LNK​

hyerperlink

hyperlink

hyperlink

Normal text

Normal text

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

[SIZE=6][URL="https://#"][COLOR=red]hyperlink[/COLOR][/URL][/SIZE]

[SIZE=3][URL="https://#"][COLOR=White]hyperlink[/COLOR][/URL][/SIZE][/div]
Normal text

[COLOR=White]Normal text[/COLOR][/div][/div][/PLAIN]

 

[Cello]

If I'm right on what you're describing then this is perfectly possible, here's a demonstration:

LNK​

hyerperlink

hyperlink

hyperlink

Normal text

Normal text

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

[SIZE=6][URL="https://#"][COLOR=red]hyperlink[/COLOR][/URL][/SIZE]

[SIZE=3][URL="https://#"][COLOR=White]hyperlink[/COLOR][/URL][/SIZE][/div]
Normal text

[COLOR=White]Normal text[/COLOR][/div][/div][/PLAIN]

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]

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]

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.

 

[ruby]

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

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