• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 461
  • Last Modified:

Replacing imagemap with show/hide jquery??

Good Morning,

Where is the idea.

A map of the US which shows a state flag when you hover over a particular state.
I also want to be able to click the state and go to a page about the state.

So I'm thinking I would use Jquery library for this.

My question is really about best practice.

1) Would it be better to use the US map as a background image of a div and then create divs for the flags of each state?

or

2) Put the US map in a div as an image and then show other divs on top?

Is there a conflict with showing/hiding and clicking?

Thanks for eedback!!
0
johnson_sf
Asked:
johnson_sf
  • 2
1 Solution
 
TechHelpr08210Commented:
Due to the issues of using image maps, image maps in general aren't considered the best idea anymore. The image maps can slow down a page and are not accessible.

http://www.helium.com/items/261950-web-design-tips-image-maps-best-practices

Alternatively, the current mindset is that instead designers should use a combination of positioned CSS, DIV and A tags to instead of image maps (no javascript needed).

A Link to an simple example of the technique: http://jsfiddle.net/DBvAY/1/

Also, a couple points for best practices:

1 - Javascript is not really needed unless you want some sort of transition effect for the flags. Otherwise everything you described could be accomplished only using HTML and CSS.

2 - The main map image should NOT be a background image because background images do not support accessibility properties, may not print correctly for users, and are not read as content by Search engines.

Alternatively, you should use your second idea and position the DIVs as floating layers above the main image, just not use image maps to trigger the flags.
0
 
ProculopsisCommented:
You could try something like this jsfiddle.

var map = [
  { title: "Football",            coords: "12,5,70,63" },
  { title: "Volleyball",        coords: "79,5,137,63" },
  { title: "Pommel horse",        coords: "146,5,204,63" },
  { title: "Skiing",            coords: "213,5,271,63" },
  { title: "Curling",            coords: "280,5,338,63" },
  { title: "Badminton",            coords: "347,5,405,63" },
  { title: "Archery",            coords: "414,5,472,63" },
  { title: "Softball",            coords: "481,5,539,63" },
  { title: "Swimming",            coords: "548,5,606,63" },
  { title: "Ice hockey",        coords: "615,5,673,63" },
  { title: "Freestyle Wrestling",    coords: "12,85,70,143" },
  { title: "Basketball",        coords: "79,85,137,143" },
  { title: "Boxing",            coords: "146,85,204,143" },
  { title: "Dressage",            coords: "213,85,271,143" },
  { title: "Water polo",        coords: "280,85,338,143" },
  { title: "Handball",            coords: "347,85,405,143" },
  { title: "Figure skating",        coords: "414,85,472,143" },
  { title: "Athletics",            coords: "481,85,539,143" },
  { title: "Running",            coords: "548,85,606,143" },
  { title: "Tennis",            coords: "615,85,673,143" },
  { title: "Biathlon",            coords: "12,165,70,223" },
  { title: "Sailing",            coords: "79,165,137,223" },
  { title: "Baseball",            coords: "146,165,204,223" },
  { title: "Shotgun",            coords: "213,165,271,223" },
  { title: "Squash",            coords: "280,165,338,223" },
  { title: "Racketball",        coords: "347,165,405,223" },
  { title: "Gymnastics",        coords: "414,165,472,223" },
  { title: "Floor exercises",        coords: "481,165,539,223" },
  { title: "Taekwondo",            coords: "548,165,606,223" },
  { title: "Kick boxing",        coords: "615,165,673,223" },
  { title: "Rowing",            coords: "12,245,70,303" },
  { title: "Diving",            coords: "79,245,137,303" },
  { title: "Bobsleigh",            coords: "146,245,204,303" },
  { title: "Luge",            coords: "213,245,271,303" },
  { title: "Speed skating",        coords: "280,245,338,303" },
  { title: "Judo",            coords: "347,245,405,303" },
  { title: "Weightlifting",        coords: "414,245,472,303" },
  { title: "Synchronized swimming",    coords: "481,245,539,303" },
  { title: "Snooker",            coords: "548,245,606,303" },
  { title: "Pool",            coords: "615,245,673,303" },
  { title: "Triathlon",            coords: "12,325,70,383" },
  { title: "Field hockey",        coords: "79,325,137,383" },
  { title: "Track cycling",        coords: "146,325,204,383" },
  { title: "Parallel bars",        coords: "213,325,271,383" },
  { title: "Modern pentathlon",        coords: "280,325,338,383" },
  { title: "Shooting",            coords: "347,325,405,383" },
  { title: "Greco-Roman Wrestling",    coords: "414,325,472,383" },
  { title: "Canoeing",            coords: "481,325,539,383" },
  { title: "Table tennis",        coords: "548,325,606,383" },
  { title: "Kung fu",            coords: "615,325,673,383" }
];

jQuery(document).ready(function() {

    $(map).each(function() {
        $("#icon-map").append(
        $("<area/>")
            .attr({
            title: this.title,
            coords: this.coords,
            shape: "rect",
            href: "#"
        }));
    });
    
    $.getScript( "http://jquery.bassistance.de/tooltip/jquery.tooltip.js", function() {
        var flag = 0;
        $("#icon-map area").tooltip({
            showURL: false,
            bodyHandler: function() { 
                return $("#flags img").get(flag++); 
            }
        });
    });
    
});

Open in new window

0
 
ProculopsisCommented:
This version is a bit closer.
0
 
johnson_sfAuthor Commented:
To make sure I am following.  Example 2 & 3 that Proculopsis shared are based on image maps....


Yes?

Thanks!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now