Can I draw shapes with CSS?

[Chris Jacks]

Hi there,

I would like to be able to draw irregular shaped polygons over the top of a standard GIF or JPG image.

Can anyone tell me if it is possible to do any of the following:

1) Draw an irregular polygon?
2) Draw an irregular polygon without SVG (eg: using HTML/JS/CSS)?
3) Make the irregular polygon filled with a semi-transparent colour?
4) Use something (CSS layers/position?) to place the irregular polygon over the top of an image (standard GIF or JPG)?
5) Draw an irregular shaped-filled-semitransparent polygon over the top of an image using image coordinates to determine the shape of the polygon (as you might with image hotspots on an imagemap). I think I'm pushing it here!

Any info is very much appreciated! Thanks!

Chris

[NogDog]

4) might be the simplest to do. In fact, you could make the main image be the background for the polygon image (which would be a GIF or PNG with transparent background), then size the polygon image to be the same as the main image:

<img src='polygon.gif' width='300' height='400'
style='background-image: url(/images/main_image.jpg);' alt='example'>

[WebJoel]

Stu Nicholls has done some kewl stuff sans-images..

http://www.cssplay.co.uk/menu/banner.html
http://www.cssplay.co.uk/menu/index.html

[Chris Jacks]

Hi Nogdog and WebJoel,

Thanks for the replies lads!

WebJoel, funnily enough I had already trolled through these forums and seen your links to Stu Nicholls sites in another post to someone else! Pretty cool stuff but not q-u-i-t-e what I'm after. Thanks all the same!

NogDog, yep this is pretty much what I'm after although I do not want to have a polygon GIF image. I want to replace the GIF image with something drawn entirely by code (thus the previous reference to SVG).

Note: If CSS can draw the polygon, I guess I'd rather use that than SVG. Of course, I don't even know if you can combine SVG and HTML/CSS!

Again, any further help/suggestions is much appreciated!

Cheers!

Chris

[s.b37]

u can combine svg and html but many browsers (*cough* ie) dont support it wothout plugins, and neway, i think it throws some problems due to svg being xml

u can not create nething other than a rectangle in normal html/css/javascript without using tricks or other magical techniques

ur best off looking into the wonders of svg

[Chris Jacks]

Hi s.b37,

Thanks for that. From what I've seen, SVG on it's own is strictly shape drawing. It doesn't perform any other functions like hyperlinking.

Have you seen any examples where SVG and HTML have been combined? Or do you how I would go about drawing an SVG shape in a HTML file?

Cheers again for the replies!

Chris

[Chris Jacks]

Well folks, after MUCH searching I found a solution that works great for me! I used this brilliant script developed by Walter Zorn at:

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Using this script I was able to grab the coordinates from my <area> tags, split them into X and Y coordinates and draw polygons of the same shape in a div with my image as the background.

NOTE: to make the div shapes semi-transparent I modified WZ's script at line 137 to look like this:
'$1;left:$2;top:$3;width:$4;height:$5;filter:alpha(opacity=25); -moz-opacity:.25; opacity:.25;"></div>\n');

Then I put another image on top of that with the imagemap (hotspots) set and set the image itself to be transparent with a bit of CSS.

Sounds trickier than it is.

- Chris