[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 690
  • Last Modified:

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.

$(document).ready(function() {

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

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

Open in new window

0
Refael
Asked:
Refael
  • 4
  • 2
  • 2
  • +1
3 Solutions
 
Gurvinder Pal SinghCommented:
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
 
CodebotCommented:
Hi

Its v simple

Check it here as a demo

http://jsfiddle.net/musarrataziz/mQw5j/
0
 
RefaelAuthor Commented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
RefaelAuthor Commented:
Hi Codebot

does this look like what i am trying to achieve?
0
 
jjperezaguinagaCommented:
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
 
RefaelAuthor Commented:
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
 
jjperezaguinagaCommented:
No problem. Did you hover over the picture?
0
 
Gurvinder Pal SinghCommented:
<<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
 
RefaelAuthor Commented:
Thank you Guys!
0

Featured Post

What does it mean to be "Always On"?

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.

  • 4
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now