?
Solved

Popup image when mouseover text -New2Javascript-

Posted on 2009-04-06
11
Medium Priority
?
856 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

 
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 2000 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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

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-…
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 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…
Suggested Courses

762 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