Solved

Popup image when mouseover text -New2Javascript-

Posted on 2009-04-06
11
849 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now