Previous Message
Next Message

polygon in CSS

Sent by Rella Abernathy on 23 March 2006 14:02


Thanks for the links and ideas.

I'm sorry I wasn't more clear. I'll paste in an example of my code  
and restate my question. The technique is documented at this link:  
http://www.frankmanno.com/ideas/css-imagemap/

To create the image map, a definition list is used. As you hover over  
the image, a little transparent "window" shows the active region for  
the hover area and then a description pops up at the same time. The  
active area for the hover is defined in the first two lines below,  
where the position and height and width produce the active area for  
the hover.

My question is, can you define a polygon shape in the CSS  
definition?  Can the active area for a hover be any other shape than  
a rectangle in CSS?

dd#slidersDef{top:0px; left:4px;}
dd#slidersDef a{position:absolute; width:112px; height:64px; text- 
decoration:none; border:none; background:transparent;}
dd#slidersDef a span{display: none;}
dd#slidersDef a:hover{background:transparent url(graphics/ 
graypix.png) repeat; border:1px solid #d2d2d2;}
dd#slidersDef a:hover span{
	display:block;
	text-indent:0;
	vertical-align:top;
	color:#3a92de;
	background-image:url(graphics/blackpix.png);
     background-repeat:repeat;
	font-weight:normal;
	position:absolute;
	border:none;
	top:100%;
	left:-8%
	margin:0px;
	padding:5px;
	width:287%;
}


Here's the matching html that goes with this CSS:

		<dt id="sliders">1.</dt>
		<dd id="slidersDef"><a href="#"><span>Description goes here.</ 
span></a></dd>




On Mar 22, 2006, at 8:19 PM, Christian Heilmann wrote:

>>> Hello Everyone,
>>>
>>> I'm new and I hope you don't mind me jumping right in and asking a
>>> question.
>>>
>>> I've adapted this slick image map method.
>>>
>>> http://www.frankmanno.com/ideas/css-imagemap/
>>
>>> ... Is there any way to define the
>>> area for a polygon in CSS?
>
>> Tantek Celik has done some work on polygons.
>> <http://tantek.com/CSS/Examples/polygons.html>
>
> Slants are a different thing than image maps though...
>
> http://www.alistapart.com/articles/sprites has some examples in the
> "irregular shapes" section.
>
>
> --
> Chris Heilmann
> Blog: http://www.wait-till-i.com
> Writing: http://icant.co.uk/
> Binaries: http://www.onlinetools.org/
>
>

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: