We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Solved
Jquery hide and show click function
Posted on 2012-03-23
Hello Experts,
I am using an image map with an "area" ID to work with jquery.
This script below is using "mouseenter" and "mouseleave" and i am trying my best to change it to "click". So when a user click the area on the image the hidden DIV shows up and when he clicks on another "area" it hides to show to relevant div ID.
basically each area in the image map suppose to show a hidden div with short text.
also if there is away to include all the area id's instead of writing one after the other i would be thankful as i have 26 rooms to include.
I am using an image map with an "area" ID to work with jquery.
This script below is using "mouseenter" and "mouseleave" and i am trying my best to change it to "click". So when a user click the area on the image the hidden DIV shows up and when he clicks on another "area" it hides to show to relevant div ID.
basically each area in the image map suppose to show a hidden div with short text.
also if there is away to include all the area id's instead of writing one after the other i would be thankful as i have 26 rooms to include.
$(document).ready(function() {
$('#room16').mouseenter(function() {
$('#room16_text').fadeIn('slow') ;
}).mouseleave(function() {
$('#room16_text').fadeOut('slow');
});
});
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
4
2
2- +1
10 Comments
Active today
you are not displaying at the click event in your code.
Make it
$(document).ready(function
$('#room16').click(functio
$('#room16_text').fadeIn('
});
$('#room16').mouseleave(fu
$('#room16_text').fadeOut(
});
});
Make it
$(document).ready(function
$('#room16').click(functio
$('#room16_text').fadeIn('
});
$('#room16').mouseleave(fu
$('#room16_text').fadeOut(
});
});
Active today
Hi gurvinder372 and Codebot
Maybe i did not explain the issue good enough...I will explain again.
i have a large image of a building. I am using an image map on that image (usemap="#Map") so that when a user mouse-over the a particular apartment number it shows the relevant text describing the apartment e.g. apartment-1, apartment-2 until apartment-20.
The script i posted above is a script that uses mouseover to show/hide the relevant content DIV.
What i am after is:
when the user mouse-over it should show the relevant DIV with the text. It should not hide when the user mouse-out but only when the user click on another area in the image (the building).
that's all. i added that it would be great if there is a way to shorten the code instead of writing it for each apartments.
hope that make sense? thank you so much guys!
Maybe i did not explain the issue good enough...I will explain again.
i have a large image of a building. I am using an image map on that image (usemap="#Map") so that when a user mouse-over the a particular apartment number it shows the relevant text describing the apartment e.g. apartment-1, apartment-2 until apartment-20.
The script i posted above is a script that uses mouseover to show/hide the relevant content DIV.
What i am after is:
when the user mouse-over it should show the relevant DIV with the text. It should not hide when the user mouse-out but only when the user click on another area in the image (the building).
that's all. i added that it would be great if there is a way to shorten the code instead of writing it for each apartments.
hope that make sense? thank you so much guys!
http://www.workwithchoicecuts.com/demo/html-image-map-revisted/index.htm#
In This replace mouseover with click
or
http://davidlynch.org/projects/maphilight/docs/demo_usa.html#
In This replace mouseover with click
or
http://davidlynch.org/projects/maphilight/docs/demo_usa.html#
Greetings Refael,
I think Codebot was just trying to be resourceful. Anyway, here's the script you are looking for: http://jsfiddle.net/TGeXh/
I added a little function (addArea) that you can use to add future Areas. In my script the message is displayed until you mouseOver other area.
Cheers!
-JJ
I think Codebot was just trying to be resourceful. Anyway, here's the script you are looking for: http://jsfiddle.net/TGeXh/
I added a little function (addArea) that you can use to add future Areas. In my script the message is displayed until you mouseOver other area.
Cheers!
-JJ
Active today
Hi jjperezaguinaga,
I am sure Codebot was trying to be helpful. If i sounded impatient i apologies.
i clicked the link and then on the photo but nothing is happening?
I am sure Codebot was trying to be helpful. If i sounded impatient i apologies.
i clicked the link and then on the photo but nothing is happening?
Active today
<<when the user mouse-over it should show the relevant DIV with the text. It should not hide when the user mouse-out but only when the user click on another area in the image (the building). >>
this much should suffice
$('#room16').click(functio
$("div[id$='_text']").hide
$('#room16_text').fadeIn('
});
this much should suffice
$('#room16').click(functio
$("div[id$='_text']").hide
$('#room16_text').fadeIn('
});
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month15 days, 8 hours left to enroll
649 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.