Solved

Jquery hide and show click function

Posted on 2012-03-23
10
663 Views
Last Modified: 2012-04-08
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.

$(document).ready(function() {

  $('#room16').mouseenter(function() {
	$('#room16_text').fadeIn('slow') ;

	}).mouseleave(function() {
    $('#room16_text').fadeOut('slow');
});	
});

Open in new window

0
Comment
Question by:Refael
[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
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 334 total points
ID: 37756363
you are not  displaying at the click event in your code.
Make it

$(document).ready(function() {
$('#room16').click(function() {
      $('#room16_text').fadeIn('slow') ;
});
$('#room16').mouseleave(function() {
    $('#room16_text').fadeOut('slow');
});      
});
0
 
LVL 6

Expert Comment

by:Codebot
ID: 37756412
Hi

Its v simple

Check it here as a demo

http://jsfiddle.net/musarrataziz/mQw5j/
0
 

Author Comment

by:Refael
ID: 37757122
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!
0
Industry Leaders: We Want Your Opinion!

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!

 
LVL 6

Expert Comment

by:Codebot
ID: 37757721
0
 

Author Comment

by:Refael
ID: 37758758
Hi Codebot

does this look like what i am trying to achieve?
0
 
LVL 6

Assisted Solution

by:jjperezaguinaga
jjperezaguinaga earned 166 total points
ID: 37767107
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
0
 

Author Comment

by:Refael
ID: 37772201
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?
0
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 37772234
No problem. Did you hover over the picture?
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 334 total points
ID: 37776515
<<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(function() {
       $("div[id$='_text']").hide();
      $('#room16_text').fadeIn('slow') ;
});
0
 

Author Closing Comment

by:Refael
ID: 37821881
Thank you Guys!
0

Featured Post

Industry Leaders: We Want Your Opinion!

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
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…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question