3701 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 Volunteer 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 6 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.

3701 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 Volunteer 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.

by
by
by
by
by
by