3788 posts Community Moderator
  • Helps us moderate the forums
  • Contributed a tutorial on Tuts+
  • Located in Netherlands
  • Made it to the Authors' Hall of Fame
+9 more
Joost Moderator says

Hey ThemeForest,

Since you guys are generally HTML and CSS geniuses, I figured I’d ask here.

I’m running into an issue with a project I’m creating. I will have to apply several complex polygonal areas on a map I’m creating, but debugging this is extremely difficult without being able to see what you are doing (i.e. seeing the area tag visually).

I’ve tried adding a border to the area element, but it doesn’t seem to support this (style=’border:1px solid black;’), and that pretty much ended my list of solutions..

Now my question to you guys is: do you know a way to visualize the element, so I can actually see the polygon? :o

EDIT : I see my title got messed up: it was supposed to say visible element

688 posts
  • Has been part of the Envato Community for over 7 years
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rg_ says

I guess the area tag doesn’t follow the same rules as other inline or block elements when it comes to styling.

But the area shape is used just to click an area for an image, right? Why you can´t use some a tags with absolute positioning over the image and get what you need? Then you can style that divs with a border or background and see them.

In fact, if you use a container div, inside the image and all the acting as area maps, you will get same effect, isn´t?

Something like this:


<div style="position:relative;">

</div>

   

and the css part:


.maps{position:absolute; border:1px solid #ff0; } // the border is for testing only

.map1{top:25px; left:132px; width:120px; height:30px;}

.map2{top:45px; left:25px; width:120px; height:30px;}

// width and height, top and left, are just some values i put here for example, but should be the same ones as the area tags coords you are using.

Hope this help you.

3788 posts Community Moderator
  • Helps us moderate the forums
  • Contributed a tutorial on Tuts+
  • Located in Netherlands
  • Made it to the Authors' Hall of Fame
+9 more
Joost Moderator says

Great suggestion, arriba. Thanks for the elaborate response! Only problem is, though, that I’m using polygons rather than rectangles or squares ;) That’s where the difficulty kicks in ;)

I’ve found a way to make the area’s somewhat viewable though: Inspect Element in the Firebug plugin for Firefox is able to select them :) This isn’t ideal yet, though, as the guy I develop this with isn’t familiar with the plugin and all (can teach him though), and that it requires quite a few extra clicks.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by