Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
COURSE of the MONTH
8 days, 21 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
Active 5 days ago
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?
Active 5 days ago
<<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
Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.
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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 Month8 days, 21 hours left to enroll
764 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.