Solved

Jquery hide and show click function

Posted on 2012-03-23
10
658 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
  • 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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…

770 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