Solved

Jquery hide and show click function

Posted on 2012-03-23
10
649 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now