Popup image when mouseover text -New2Javascript-

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.
LVL 1
Mitch SwetskyBusiness AnalystAsked:
Who is Participating?
 
fsze88Connect With a Mentor Commented:
   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
 
fsze88Commented:
0
 
Mitch SwetskyBusiness AnalystAuthor Commented:
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
fsze88Commented:
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
 
Mitch SwetskyBusiness AnalystAuthor Commented:
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
 
fsze88Commented:
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
 
Mitch SwetskyBusiness AnalystAuthor Commented:
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
 
fsze88Commented:
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
 
Mitch SwetskyBusiness AnalystAuthor Commented:
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
 
Mitch SwetskyBusiness AnalystAuthor Commented:
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
 
Mitch SwetskyBusiness AnalystAuthor Commented:
Thanks again, for your patience.
I understand how to use your solution and I am sure it will work well.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.