1

I use maphilight jquery plugin with hover and onclick features. Which works fine.

Is there a way to draw a rectangle by default on the areamap image at a predefined position and size? So without to hover or click on it, just draw a rectangle right after the page is loaded.

I would like to use this solution with PHP+mySQL search. So when someone searches and finds the desired objec on a page (as a part on an areamap, and I know the position of it), clicking on the result link, I would like to load the page that has this shape and would like to be highlighted or drawn around with a rectangle as long as the person click/hover on another area on the same page. Or if this is not possible, then just drawing the rectangle on the desired position.

Is there a way to accomplish this?

The searching and lauching mechanism is not an issue now... I'll do it somehow. I just need the solution to draw the rectangle on areamap.

I tried using CSS "z-index", canvas and even SVG but the rectangle was always drawn after the area map, so at the bottom of my page and not on the areamap :(

Can anyone help me? Thank you.

TimSPQR
  • 2,964
  • 3
  • 20
  • 29
bonolac
  • 13
  • 2

1 Answers1

0

your rectangle also needs to have position:absolute css style, e.g.,

$('div.map').append('<div style="position:absolute;left:100px;top:100px;
height:10px;width:10px;background-color:#f00;z-index:1;"></div>');
webb
  • 4,180
  • 1
  • 17
  • 26
  • OK, I managed to draw a rectangle. But now I have another problem. Is there a way to make empty (fill none) this rectangle? I would like to be clickable through of it. I would like to use this solution as a marker (a hit of a search). But I can't click or hover through it. The trick I use now to make this new rectangle smaller, so hovering outside of it can highlight the area beneath this rectagle. So is there a way to make it click-through? – bonolac Sep 01 '14 at 07:49
  • 1
    I found it: `pointer-events:none` is the solution. [link](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements). Thanks. – bonolac Sep 01 '14 at 08:00