Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.
Course Of The Month
2 days, 2 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
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
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(
});
});
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('
});
Featured Post
Make Your Microsoft Dynamics Investment Count & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Introduction
HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
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 Month2 days, 2 hours left to enroll
Earn Certification
Certified Web Development Professional
$335.99
717 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.