Solved

Replacing imagemap with show/hide jquery??

Posted on 2012-04-05
4
428 Views
Last Modified: 2012-05-02
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
Comment
Question by:johnson_sf
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
TechHelpr08210 earned 500 total points
ID: 37814879
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
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37815250
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
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37815406
This version is a bit closer.
0
 

Author Comment

by:johnson_sf
ID: 37837662
To make sure I am following.  Example 2 & 3 that Proculopsis shared are based on image maps....


Yes?

Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now