Solved

Popup image when mouseover text -New2Javascript-

Posted on 2009-04-06
11
853 Views
Last Modified: 2012-05-06
I have some text on an htm page. It is inside a table and when I mouseover the text I would like a floating box to display the image.
I tried  
<head>
<script type="text/javascript">
<!--
function show(id)
{
      document.getElementById(id).style.display="";
}
function hide(id)
{
      document.getElementById(id).style.display="none";
}
//-->
</script>
</head>

<body>
<img style="display:none" id="425" src="425SlopeRating.jpg" alt="">
with
<div onmouseover="show('425')" onmouseout="hide('425')">>

The problem I am having is that the image is 350x55 and the text is one word so it throws the table out of proportion.
Can someone help me pop up a 350x55 picture when I mouseover a word? I really don't care where it is as long as it floats in front the page, BUT would like it if possible to the right of the mouse position.
0
Comment
Question by:Mswetsky
  • 6
  • 5
11 Comments
 
LVL 15

Expert Comment

by:fsze88
ID: 24083432
0
 
LVL 1

Author Comment

by:Mswetsky
ID: 24086177
Wow, that is just what I was thinking except there is an image in the popup and text on the page.
Yes I was looking for a popup like the one on the link which is in floating and to the right of mouse pointer.  I've attached a current sample of the image but it may change size as I progress.
To clarify, take a look at this site http://saturdaygolfassoc.org/
I want the attached image to pop up when mouseover the word Handicap. Each row will have a different jpg

425SlopeRating.jpg
0
 
LVL 15

Expert Comment

by:fsze88
ID: 24086639
yes, you can try to change the content of div tag, after that create function to specify which image that you want to be in the layer popup...
setvisible("Mouse wheel to enlarge or shrink")
try to add function setImage("/images/image1.gif")  .....
<div id="cursor" style="position:absolute; visibility:hidden; width: 161;">
<table border="0" cellspacing="0" cellpadding="0" id="cursor_table" width: 161>
<tr>
<td colspan=3><img src="http://www.kennam.com/images/popup/bubble_top.gif" 
 
width="161" height="14" border=0></td>
</tr>
 
<tr>
 <td background="http://www.kennam.com/images/popup/bubble_l.gif"><img 
 
src="http://www.kennam.com/images/popup/white.gif" width="6" height="1" border=0></td>
 
 <td width=149 bgcolor='ECFFF7'>
 <table border="0" cellspacing="0" cellpadding="2">
 <tr>
  <td id='cursorvalue' class=f8 bgcolor=ECFFF7>&nbsp;</td>
 </tr>
 </table>
 </td>
 
 <td background="http://www.kennam.com/images/popup/bubble_r.gif"><img 
 
src="http://www.kennam.com/images/popup/white.gif" width="6" height="1" border=0></td>
 
</tr>
<tr>
 <td colspan=3><img src="http://www.kennam.com/images/popup/bubble_btm.gif" 
 
width="161" height="5" border=0></td>
</tr>
</table>
</div>

Open in new window

0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 1

Author Comment

by:Mswetsky
ID: 24086756
I am not very good with javascript. I know basic HTML code and can type most from scratch.
I don't understand where the sample you posted is supposed to go or what elements to change.
Could you elaborate on your solution a bit more please?
0
 
LVL 15

Expert Comment

by:fsze88
ID: 24088814
yes. please have a look page source, there a function setvisible('something') is change the text of td tag
<td id='cursorvalue' class=f8 bgcolor=ECFFF7> </td> which id is cursorvalue when mouseovering
you can try to add a function setImage('/images/image1.gif') is change the source of img tag (you create it) with specified id like imgsource and change it by each times when mouseovering

In that div tag is the source of popup layer that you can edit/change anythings you like
an easier way is try to view the page source, copy it into .html file and open it by your browsers.
first step try to change parameter of function setvisible(). you should know what I means
second step, place a img tag into div tag with id=imgsource , create a function setImage('/images/image1.gif') and try change the img src when mouseovering.... by javascript statement document.getElementById('imgsource ').src = '/images/image1.gif';
0
 
LVL 1

Author Comment

by:Mswetsky
ID: 24092405
I am sorry but I am confused. I tried to add the function below but not correctly.

Could you look at the source of my page? http://saturdaygolfassoc.org/
Where does this go, does it need to be in the head of page?
 <script language="JavaScript" type="text/javascript">
<!--
    var........
-->
</script>

Can you please add function where it is needed then add 1 mouseover example so I can understand better?

Adding image in popup over text is not the same as your example with linked Image with pop text.
<html>
 
<head>
<script language="JavaScript" type="text/javascript">
<!--
    var ie = document.all;
		var nn6 = document.getElementById &&! document.all;
		var x_axis, y_axis;
    var visibility=false;
    var vMessage;		
    
function setvisible(value){
//alert('value : ' + value);
    visibility = true;
    vMessage = value;
//  	document.getElementById('cursor').style.visibility='visible';
//  	document.getElementById('cursorvalue').innerHTML=value;
 
}
function setinvisible(){
  visibility = false;
//	document.getElementById('cursor').style.visibility='hidden';
}
 
function traceMouseOver(evnt) {
		x_axis =0;
		y_axis = 0;
 
//	if (document.getElementById('cursor').style.visibility=='visible'){
	if (visibility){
 
		 if (nn6) { 
				x_axis = evnt.pageX;
				y_axis = evnt.pageY;
		 }
		 if (ie){
				x_axis=(event.clientX + document.body.scrollLeft); 
				y_axis=(event.clientY + document.body.scrollTop); 
			
		 }
		document.getElementById('cursor').style.left=x_axis+10;
		document.getElementById('cursor').style.top=y_axis+15;
  	document.getElementById('cursorvalue').innerHTML=vMessage;
		document.getElementById('cursor').style.visibility='visible';
 
	}else{
		
		document.getElementById('cursor').style.left=0;
		document.getElementById('cursor').style.top=0;
  	document.getElementById('cursor').style.visibility='hidden';
  }
}
 
 
 
document.onmousemove = traceMouseOver; 
 
-->
</script>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Saturday Golf Association</title>
</head>
 
<body>
 
 
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="92%">
  <tr> 
    <td colspan="4"><font SIZE="6"><font SIZE="5">&nbsp; <i> 
        <marquee behavior="scroll" width="984" scrollamount="10">&nbsp;&nbsp;&nbsp; SGA,&nbsp;&nbsp; The best traveling "Pay as you Go" league in town !</marquee>
        </i> </font></td>
  </tr>
  <tr> 
    <td width="40%" rowspan="6" valign="top" align="center"> <p align="center"><span
  lang=en-US style='font-size:14.3pt;line-height:113%;font-family:Georgia;
  language:en-US'><font color="#339900">2009 Course Schedule</font></span> - <a href="2009%20SGA%20Schedule_Course%20Information.pdf">pdf 
        version</a> 
 
      <div align="center">
      <table width="98%" border="0" id="table3" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="11%"><div align="left"><font size="1"><b><span lang=en-US style='font-family:"Bookman Old Style";
  color:#0033CC;language:en-US'>04/25</span></b></font></div></td>
          <td width="33%"><div align="Left"><font size="2"><b><span lang=en-US style='font-family:"Bookman Old Style";
  color:#0033CC;language:en-US'>Victor Hills [South]</span></b></font></div></td>
          <td><div align="center"><font color="#999999"><em><font size="2">Tee 
              Times </font></em></font></div></td>
          <td align="center"><em><font color="#999999" size="1"><div onmouseover='setvisible("<img src="516SlopeRating.jpg" alt=""> ")' onmouseout='setinvisible()'">Handicap index</div>
</font></em></td>
          <td><div align="center"><font color="#999999" size="2"><em>Results</em></font></div></td>
        </tr>

Open in new window

0
 
LVL 15

Expert Comment

by:fsze88
ID: 24093254
okey, example
<html>
 
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Saturday Golf Association</title>
 
</head>
 
 
 
<script language="JavaScript" type="text/javascript">
<!--
    var ie = document.all;
    var nn6 = document.getElementById &&! document.all;
    var x_axis, y_axis;
    var visibility=false;
    var vMessage;
    var vImgSource;               
    
function setvisible(value){
    visibility = true;
    vMessage = value;
 
}
function setinvisible(){
  visibility = false;
}
function setImage(imgsource){
  vImgSource = imgsource;
  visibility = true;
}
 
function traceMouseOver(evnt) {
  x_axis =0;
  y_axis = 0;
 
  if (visibility){
 
           if (nn6) { 
                          x_axis = evnt.pageX;
                          y_axis = evnt.pageY;
           }
           if (ie){
                          x_axis=(event.clientX + document.body.scrollLeft); 
                          y_axis=(event.clientY + document.body.scrollTop); 
                  
           }
          document.getElementById('cursor').style.left=x_axis+10;
          document.getElementById('cursor').style.top=y_axis+15;
//          document.getElementById('cursorvalue').innerHTML=vMessage;
          document.getElementById('imgsource').src = vImgSource;
          document.getElementById('cursor').style.visibility='visible';
 
  }else{
          
          document.getElementById('cursor').style.left=0;
          document.getElementById('cursor').style.top=0;
  document.getElementById('cursor').style.visibility='hidden';
  }
}
 
 
 
document.onmousemove = traceMouseOver; 
 
-->
</script>
 
<body>
 
 
 
<div onmouseover='setImage("http://saturdaygolfassoc.org/Logo2w.jpg")' onmouseout='setinvisible()'">Handicap index</div>
 
<div id="cursor" style="position:absolute; visibility:hidden; width: 161;">
<img src="" id="imgsource" border=0/>
</div>
 
</body>
 
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Mswetsky
ID: 24096053
Thank you very much for your patience.
Why doesn't the code following work?
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>testpops</title>
</head>
 
<script language="JavaScript" type="text/javascript">
<!--
    var ie = document.all;
    var nn6 = document.getElementById &amp;&amp;! document.all;
    var x_axis, y_axis;
    var visibility=false;
    var vMessage;
    var vImgSource;               
    
function setvisible(value){
    visibility = true;
    vMessage = value;
 
}
function setinvisible(){
  visibility = false;
}
function setImage(imgsource){
  vImgSource = imgsource;
  visibility = true;
}
 
function traceMouseOver(evnt) {
  x_axis =0;
  y_axis = 0;
 
  if (visibility){
 
           if (nn6) { 
                          x_axis = evnt.pageX;
                          y_axis = evnt.pageY;
           }
           if (ie){
                          x_axis=(event.clientX + document.body.scrollLeft); 
                          y_axis=(event.clientY + document.body.scrollTop); 
                  
           }
          document.getElementById('cursor').style.left=x_axis+10;
          document.getElementById('cursor').style.top=y_axis+15;
//          document.getElementById('cursorvalue').innerHTML=vMessage;
          document.getElementById('imgsource').src = vImgSource;
          document.getElementById('cursor').style.visibility='visible';
 
  }else{
          
          document.getElementById('cursor').style.left=0;
          document.getElementById('cursor').style.top=0;
  document.getElementById('cursor').style.visibility='hidden';
  }
}
document.onmousemove = traceMouseOver; 
-->
</script>
 
<body>
 
<div onmouseover='setImage("Logo2w.jpg")' onmouseout='setinvisible()'">Handicap</div>
 
<div id="cursor" style="position:absolute; visibility:hidden; width: 350;">
<img src="" id="imgsource" border=0/>
</div>
 
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Mswetsky
ID: 24096104
Do I need to change the size?  My mouse over image is 350x55
How do I recall the function with a different img? Do I just change the image or does the ID need to be different?
0
 
LVL 15

Accepted Solution

by:
fsze88 earned 500 total points
ID: 24096747
   var nn6 = document.getElementById &&! document.all;
not
    var nn6 = document.getElementById &amp;&amp;! document.all;
Do I need to change the size?  My mouse over image is 350x55
<img src="" id="imgsource" border=0 width=350 height=55/>
How do I recall the function with a different img?
pass different parameter from different
<div onmouseover='setImage("http://saturdaygolfassoc.org/abc.jpg")' onmouseout='setinvisible()'">abc</div>
<div onmouseover='setImage("http://saturdaygolfassoc.org/def.jpg")' onmouseout='setinvisible()'">def</div>
Do I just change the image or does the ID need to be different? No, same id(imgsource) is ok, that img tag is containing by <div id="cursor">....</div>
0
 
LVL 1

Author Closing Comment

by:Mswetsky
ID: 31567263
Thanks again, for your patience.
I understand how to use your solution and I am sure it will work well.
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

Suggested Solutions

Title # Comments Views Activity
Asp response.write to clients 6 34
Getting selected value using Jquery 3 23
How do I post more than 1 item to php backend 24 32
Can anyone help me find this preloader? 51 46
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

730 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