• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 424
  • Last Modified:

How to generate a pop up message box in JQuery to show value of a variable

Hello,

I have the below code and want to add a line in there, that on mouseover will pop up a message box and show the value of one of the variables. Can you help me with this, please?

Thank you,
Riverwalk
jQuery("#map-container AREA").mouseover(function(){
	var regionMap = '.'+$(this).attr('id')+'-map';
	var regionList = '.'+$(this).attr('id')+'-list';
	var regionList2 = '.'+$(this).attr('id')+'-list2';
	jQuery(regionMap).css('display', 'inline');

Open in new window

0
RiverWalk
Asked:
RiverWalk
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
Check this : http://jsfiddle.net/G4pLs/

jQuery(document).ready(function() {
    jQuery("#map-container AREA").mouseover(function(){

        var regionMap = '.'+$(this).attr('id')+'-map';
        var regionList = '.'+$(this).attr('id')+'-list';
        var regionList2 = '.'+$(this).attr('id')+'-list2';
        jQuery(regionMap).css('display', 'inline');

        jQuery("#dialog").html(regionMap)
        jQuery("#dialog").dialog();
    })

})

Open in new window


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#map-container" />

<map id="map-container" name="map-container">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" id="rectangle" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" id="circle1" />
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" id="circle2" />
</map>
<div id="dialog" title="Dialog Title"></div>

Open in new window

0
 
RiverWalkAuthor Commented:

Hmmm... I'm probably not doing something right. I have followed your link and see that you have provided a really neat example, but I am not seeing how to get it to work. I also plugged the new lines of code into my page and I'm not seeing a dialog. Any ideas?

Thank you very much!
Riverwalk
0
 
RiverWalkAuthor Commented:
Whew!  Ok, I do see the dialog coming up on your exmaple. Sorry. I'm a goonball... Now, I will continue to apply what you have show me here to my actual page.

I'll let you know if I can't figure it out.

Thank you!
Riverwalk
0
 
leakim971PluritechnicianCommented:

 <! DOCTYPE html>
 <html>
 <head>
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css"/>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </ script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </ script>
<script>
jQuery(document).ready(function() {
    jQuery("#map-container AREA").mouseover(function(){

        var regionMap = '.'+$(this).attr('id')+'-map';
        var regionList = '.'+$(this).attr('id')+'-list';
        var regionList2 = '.'+$(this).attr('id')+'-list2';
        jQuery(regionMap).css('display', 'inline');

        jQuery("#dialog").html(regionMap)
        jQuery("#dialog").dialog();
    })

})
</script>
</head>
<body>

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#map-container" />

<map id="map-container" name="map-container">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" id="rectangle" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" id="circle1" />
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" id="circle2" />
</map>
<div id="dialog" title="Dialog Title"></div>
</body>
</html>

Open in new window

0
 
RiverWalkAuthor Commented:
Well hey, you deserve the points. You given me a working example, I've just got to get it working on my page. If I can't get it I'll as a new question related to the code you've given me. A more specific question. I should be able to get this to work. I don't know what I'm doing wrong. My page is an aspx page and does not have a body tag, in which to place, this line, "<div id="dialog" title="Trouble Shooting Dialog"></div>" so I don't know if that's it or not. I've tried to stick the line several places now, to no avail. I'll keep poking at it.

Thank you!
Riverwalk
0

Featured Post

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.

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