How can I use an image map to show/hide a particular div?

Question

I have an image map and would like to be able to show/hide a div based on which item in the image map I click?

html...

Answer 1

A similar answer was posted by someone else. I'm not sure why it was deleted. It appears to work:

$('[item="texas"]')

Here's an example:

 

You clicked the Republic of Texas!
You clicked Florida!

$('[item="texas"]').click(function(){
    $(".display").hide();
    $("#texas").show();
    return false;
});
$('[item="florida"]').click(function(){
    $(".display").hide();
    $("#florida").show();
    return false;
});

http://jsfiddle.net/xtKXL/5/

Edit:

To make things a little more dynamic, you can grab the "item" from the over which you're hovering and use that value to display the appropriate

:

$('[item]').click(function(){
    var item=$(this).attr('item');
    $(".display").hide();
    $("#"+item).show();
    return false;
});

http://jsfiddle.net/xtKXL/6/

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...