Select parts of stacked images in html/jquery/javascript

Question

I have a map of the UK broken down into various geographic regions. I would like to make it so that when a user hovers over the section some text appears.

My question is, what is the best way to get the images to do this.

One way I have tried is to create a png file for each area in the correct location within a fixed sized canvas with a totally transparent backgroud. This works in terms of showing all the areas as one complete map. But does not allow me to add a handle onto each image section as they are stacked on top of each other so only the top one is available.

I have also attempted to put an 'area' over the top to try and define a hot spot. However this also didn't work as the shapes are too complex...

Here is the html/css markup

<script type="text/javascript">
$(document).ready(function() {
        $('#scot').hide();
        $('#wales').hide();

        $('#scotmap').click(function() {
            $('#scot').show();
        });
        $('#img2').click(function() {
            $('#wales').show();
        });
    });
</script>

<div id="wrapper">
    <div id="img1" class="mappiece">
        <img src="Images/map/scotland.png" alt="Scotland">
    </div>
    <div id="img2" class="mappiece">
        <img src="Images/map/nw.png" alt="Scotland">
    </div>
    <div id="img3" class="mappiece">
        <img src="Images/map/se.png" alt="Scotland">
    </div>
    <div id="img4" class="mappiece">
        <img src="Images/map/wales.png" alt="Scotland">
    </div>
    <div id="img5" class="mappiece">
        <img src="Images/map/ireland.png" alt="Scotland">
    </div>
    <div id="img6" class="mappiece">
        <img src="Images/map/yarmouth.png" alt="Scotland">
    </div>
    <div id="img7" class="mappiece">
        <img src="Images/map/york.png" alt="Scotland">
    </div>
    <div id="map" class="mappiece">
        <area id="scotmap" shape="poly" coords="76,9,76,50,87,50,87,92,96,92,96,101,105,101,105,132,120,132,120,122,132,124,137,120,151,124,154,128,160,127,163,129,171,125,173,119,164,92,147,76,164,37,144,7" nohref alt="Scotland Map" />
</div>
</div>
<div id="text">
    <div id="scot">
        <p>Hello Scotland</p>
    </div>
    <div id="wales">
        <p>Hello Wales</p>
    </div>
</div>


body{background-color:#fff;}

#wrapper{
width:237px;
height:258px; 
position: relative;
}

.mappiece {
position: absolute;
width:237px;
height:258px; 
top:0;
left:0;
}

#img1 {
z-index:80;
}
#img2 {
z-index:20;
}
#img3 {
z-index:30;
}
#img4 {
z-index:40;
}
#img5 {
z-index:50;
}
#img6 {
z-index:60;
}
#img7 {
z-index:70;
}

Any points in the right direction will be greatly appreciated. In terms of the mouse over /mouseout/click jquery events, I am ok with these. It is just the image manipulation that I am struggling with.

Kind Regards

have a look at http://stackoverflow.com/questions/4546275/selecting-regions-of-an-image-in-a-jquery-wizard/4546453#4546453 — Gabriele Petrioli, Jun 18 '12 at 15:52

score 0 · Answer 1 · answered Jun 18 '12 at 15:47

what do u mean with

However this also didn't work as the shapes are too complex...

if you mean that they are too complex to code, you can use a tool like this:

http://www.image-maps.com/

that will allow you to create polygonal areas and get the generated html, by just clicking to create the shapes you need.

you can then have listeners associated to those events (click, over etc) to handle the text display

score 0 · Accepted Answer · answered Jun 18 '12 at 15:54

0

I think you can use html < area > coords attribute here. You can refer to the link http://www.w3schools.com/TAGS/att_area_coords.asp for more details.

answered Jun 18 '12 at 15:54

sushil

2,641
3
18
24

Thanks Sushil, i have tried to do an area from this exact article, however as you can see in the code above, there are a lot of coordinates, so I either have too many coordinates, or I have an error in the CSS. Unfortunately I am not sure which. – Stevo_300 Jun 18 '12 at 15:58
I see your code quite different than the link I have provided. In the link I have provided one single map is used in which coordinates are defined for each of the geographical region, clicking on which will open enlarged image for that region. Similarly, here you can use single map in which you can specify the coordinates for all the regions instead of trying to combine each geographical regions. – sushil Jun 18 '12 at 16:10
Thanks for the advice, the problem was with my html code and using the area tag worked perfectly. – Stevo_300 Jun 19 '12 at 09:08

Select parts of stacked images in html/jquery/javascript

2 Answers2