ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.
One of a set of tools we're offering as a way to say thank you for being a part of the community.
Jquery hide and show click function
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');
});
});
Asked:
-
4
2
2- +1
3 Solutions
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
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?
<<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('
});
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Join & Write a Comment Already a member? Login.
Featured Post
The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.
One of a set of tools we're offering as a way of saying thank you for being a part of the community.
Tackle projects and never again get stuck behind a technical roadblock.
Join Now
Make it
$(document).ready(function
$('#room16').click(functio
$('#room16_text').fadeIn('
});
$('#room16').mouseleave(fu
$('#room16_text').fadeOut(
});
});