Solved

Popup image when mouseover text -New2Javascript-

Posted on 2009-04-06
11
852 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript Case Expression 7 29
jquery to restrict certain words from input in form 11 34
Google map not loading in Bootstrap 3 modal 7 30
Checking data with javascript 3 19
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

776 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