CODEWITHSUNDEEP
javascripthtmlcsswebhyperlink
user1828928
user1828928

Reputation: 483

How to place link-tags on a map

I would like to create a interactive map feature via HTML,CSS and Javascript. Therefore I need to place Link-Tags(or similar) on a map. The following image illustrates what I am trying to achieve: enter image description here

The Red crosses should be clickable links (not necessarily only the red crosses - it would be ok if a transparent rectangle is clickable).

So far I came across the (image-)map tag with which I could place rectangles on the corresponding positions on the map. I wonder if this is the best method or if there is another more comfortable method or a best practice to do such things.

Upvotes: 2

Views: 519

Answers (2)

user1183682
user1183682

Reputation:

Here is a demo using qTip2 at http://qtip2.com/demos.

HTML:

<div id="demo-imagemap">
 <h3>ClICK TO TOGGLE X to see </h3>

<img border="0" usemap="#myMap" alt="map" src="http://4.bp.blogspot.com/-Y6tP6TqJbfA/UX_vggdXEQI/AAAAAAAAAt4/ZfoonzP4Bxs/s1600/ih2LH.jpg">
<map id="myMap" name="myMap">
    <area alt="place 1" shape="rect" coords="192,103,216,119" href="#">
    <area alt="place 2" shape="rect" coords="128,269,156,293" href="#">
    <area alt="place 3" shape="rect" coords="162,311,186,327" href="#">
    <area alt="place 4" shape="rect" coords="172,207,200,235" href="#">
    <area alt="place 5" shape="rect" coords="270,225,312,259" href="#">
</map>

CSS:

 /* Add some nice box-shadow-ness to the modal tooltip */
 #ui-tooltip-modal {
    max-width: 420px;
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
}
#ui-tooltip-modal .ui-tooltip-content {
    padding: 10px;
}

jQuery:

    // Create the tooltips only when document ready
$(document).ready(function () {
    // We'll target all AREA elements with alt tags (Don't target the map element!!!)
    $('area[alt]').qtip({
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content

        },
        show: 'click',
        hide: 'click',

        style: {
            classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
        }
    });
});

Demo using your map, try centre located X, and a few on the left side:- http://jsfiddle.net/x5baU/11/

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

You could either use an html image map:

http://en.wikipedia.org/wiki/Image_map

Or simply place your links on top of the map image using absolute positioning.

I'd probably go with the absolute positioning method then you can just place custom styled anchor tags where you need them and have your red X as an image within the anchor or as background images on the anchors.

Upvotes: 3

Related Questions