Popup images not unique...problem with script??

perfectdesign · Sep 11, 2009

I've been working on a script to control popup images on the onMouseOver event. The script works as far as producing a popup but I'm have trouble making the popup images unique to the name that is suppose to produce the event. Right now, when the images popup they are all the same, regardless of how it is coded.

For referance:

http://www.huguenotbats.com/redesignfiles/team.php

(just mouse over the players last name for the popup).

This is the script:

Code:

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
var node = hoveritem;
var x = 175;
var y = -115;
while ( node !== null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}

// Set position of hover-over popup
hp.style.top = y + 'px';
hp.style.left = x + 'px';

//Set popup to visible
hp.style.visibility = "visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "hidden";
}
</script>

And this is the html:

Code:

<tr>
					<td width="49%" align="right">
					<a href="bio/amentbio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Ryan
					</a>
					</td>
					<td width="2%">&nbsp;</td>
					<td width="49%" align="left">
					<a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/amentbio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Ament
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute;"><img src="bio/amentthumb.png" alt="Ryan Ament popup"></div>
					</td>
				</tr>
				<tr>
					<td align="right">
					<a href="bio/atkinsonbio.php" target="_blank" onClick="window.open('bio/atkinsonbio.php','Steven Atkinson Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Steven
					</a>
					</td>
					<td>&nbsp;</td>
					<td align="left">
					<a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/atkinsonbio.php" target="_blank" onClick="window.open('bio/atkinsonbio.php','Steven Atkinson Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Atkinson
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/atkinsonthumb.png" alt="Steven Atkinson popup"></div>
					</td>
				</tr>

I've been working on this one page for days now and I just can't get it to work.

vacunita · Sep 11, 2009

Not quite sure i follow, but All your window.open popups addresses point to the same 2 bios. atkinsonbio.php and amentbio.php

You need to fix those, because even though the actual hrefs for the links are correct, the addresses being user are the ones inside he window.open javascript calls.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

perfectdesign · Sep 12, 2009

I'm not sure that I'm following what you are saying. As far as the code is concerned each row is individualized for the player.

Code:

<!-- player 1 -->
<tr>
					<td width="49%" align="right">
					<a href="bio/amentbio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Ryan
					</a>
					</td>
					<td width="2%">&nbsp;</td>
					<td width="49%" align="left">
					<a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/amentbio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Ament
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute;"><img src="bio/amentthumb.png" alt="Ryan Ament popup"></div>
					</td>
				</tr>
<!-- Player 2 -->
				<tr>
					<td align="right">
					<a href="bio/atkinsonbio.php" target="_blank" onClick="window.open('bio/atkinsonbio.php','Steven Atkinson Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Steven
					</a>
					</td>
					<td>&nbsp;</td>
					<td align="left">
					<a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/atkinsonbio.php" target="_blank" onClick="window.open('bio/atkinsonbio.php','Steven Atkinson Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Atkinson
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/atkinsonthumb.png" alt="Steven Atkinson popup"></div>
					</td>
				</tr>
<!-- Player 3 -->
				<tr>
					<td align="right">
					<a href="bio/barberbio.php" target="_blank" onClick="window.open('bio/barberbio.php','Josh Barber Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Josh
					</a>
					</td>
					<td>&nbsp;</td>
					<td align="left">
					<a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/barberbio.php" target="_blank" onClick="window.open('bio/barberbio.php','Josh Barber Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Barber
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/barberthumb.png" alt="Josh Barber popup"></div>
					</td>
				</tr>

The problem that I'm having is that regardless of what the image and link is set to for that player, only the image and link set in the first row is displayed all through the list.

Not knowing a lot about javascript I've come to two what I consider to be logical ways to fix this.

1. have a distinctive class and id designation for each row

or

2. set the script to stop after each row and start again at the next row

While these fixes make logical sense to me, I have no idea if they will actually work or even what changes I would have to make to try them.

vacunita · Sep 12, 2009

Looking at your link's (

http://www.huguenotbats.com/redesignfiles/team.php)

source code shows me that most of your window.open calls refer to the same bio.php page: amentbio.php

Notice the sections in red. They all point to the same place: amentbio.php

Code:

<td align="right">
					<a href="bio/franklinbio.php" target="_blank" onClick="window.open('[red]bio/amentbio.php[/red]','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">

					Matthew
					</a>
					</td>
					<td>&nbsp;</td>
					<td align="left">
					<a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/franklinbio.php" target="_blank" onClick="window.open('[red]bio/amentbio.php[/red]','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Franklin
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/franklinthumb.png" alt="Matthew Franklin popup"></div>
					</td>

				</tr>
				<tr>
					<td align="right">
					<a href="bio/maloneybio.php" target="_blank" onClick="window.open('[red]bio/amentbio.php[/red]','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Brian
					</a>
					</td>
					<td>&nbsp;</td>
					<td width="100%" align="left">

					<a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/maloneybio.php" target="_blank" onClick="window.open('[red]bio/amentbio.php[/red]','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Maloney
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/maloneythumb.png" alt="Brian Maloney popup"></div>
					</td>
				</tr>
				<tr>
					<td align="right">
					<a href="bio/pearsonbio.php" target="_blank" onClick="window.open('[red]bio/amentbio.php[/red]','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">

					Andrew
					</a>
					</td>
					<td>&nbsp;</td>
					<td width="100%" align="left">
					<a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();" href="bio/pearsonbio.php" target="_blank" onClick="window.open('[red]bio/amentbio.php[/red]','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Pearson
					</a>
					<div id="hoverpopup" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/perasonhumb.png" alt="Andrew Pearson popup"></div>
					</td>

				</tr>
				<tr>
					<td align="right">
					<a href="bio/randallbio.php" target="_blank" onClick="window.open('[red]bio/amentbio.php[/red]','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
					Dalton
					</a>

Those need to be changed to reflect the page you wish to show for each player.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

perfectdesign · Sep 17, 2009

Ok, so all the pop-up bio pages are correct but the core problem still exists. The mouseOver images controlled by the script are still not unique. No matter which name you pick the same image is shown (the first image that is indicated regardless of which image it is). I am still at a loss of how to fix this but I need to replace the existing site with this redesign ASAP.

vacunita · Sep 17, 2009

Ahh, I think I know what you mean now:

All the divs that hold the pictures of the players have the same ID: hoverpopup, and since getElementById only ever returns one element, it returns the first one.

So all links affect the first one.

There are 2 ways you can solve this.

Give each <div> a unique ID, maybe one that references the player name, and pass that to your show pop up function to be shown, or use GetElementsByName and reference each pop up by number.

I'd suggest the first approach, as having more than one element with the same ID is not valid in HTML.

Code:

<td align="right">
                    <a href="bio/franklinbio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">

                    Matthew
                    </a>
                    </td>
                    <td>&nbsp;</td>
                    <td align="left">
                    <a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup([red]'franklinpopup'[/red]);" onMouseOut="HidePopup('[red]franklinpopup[/red]');" href="bio/franklinbio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
                    Franklin
                    </a>
                    <div id="[red]franklinpopup[/red]" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/franklinthumb.png" alt="Matthew Franklin popup"></div>
                    </td>

                </tr>
                <tr>
                    <td align="right">
                    <a href="bio/maloneybio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
                    Brian
                    </a>
                    </td>
                    <td>&nbsp;</td>
                    <td width="100%" align="left">

                    <a class="hoverover" style="cursor:default;" onMouseOver="ShowPopup('[blue]maloneypopup[/blue]');" onMouseOut="HidePopup('[blue]maloneypopup[/blue]');" href="bio/maloneybio.php" target="_blank" onClick="window.open('bio/amentbio.php','Ryan Ament Bio','height=431,width=649,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">
                    Maloney
                    </a>
                    <div id="[blue]maloneypopup[/blue]" style="visibility:hidden; position:absolute; top:100px; left:350px;"><img src="bio/maloneythumb.png" alt="Brian Maloney popup"></div>
                    </td>
                </tr>

Then in your show and hide functions do the following:

Code:

function ShowPopup([red]hoveritem[/red])
{
hp = document.getElementById([red]hoveritem[/red]);
var node = hoveritem;
var x = 175;
var y = -115;
while ( node !== null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}

// Set position of hover-over popup
hp.style.top = y + 'px';
hp.style.left = x + 'px';

//Set popup to visible
hp.style.visibility = "visible";
}

function HidePopup([red]hideitem[/red])
{
hp = document.getElementById([red]hideitem[/red]);
hp.style.visibility = "hidden";
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

perfectdesign · Sep 21, 2009

that's what i assumed the problem was but didn't know how to correct. i made the changes that you suggested and now there are no pop-ups at all. i'm on the edge of just giving up but i know that i will end up using some version of this script later in other designs.

i changed the script code and gave each div a unique id but i don't know where to go from here

vacunita · Sep 21, 2009

I'm getting an error from the lines involving the node variable. This prevents the rest of the code from running.

Sine I wasn't sure what they did, I just left them there in all my examples, but if you change "var node=hoveritem;" to "var node = hp;" It works.

Though I would just remove all the node parts. I just don't understand what they are supposed to do. and don't seem to be affecting the pop up in any way.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

perfectdesign · Sep 21, 2009

Declaring the node variable allows for the positioning to be defined in reference to that variable (in this case along an x and y axis). Not sure how absolutely necessary of a declaration that it is but it's how I learned to set specific positioning.

Changing the var node to hp didn't seem to do anything. I ran the validator again and I get the same error on every link line in the code:

"The default scripting language must be specified for an intrinsic event" and it's referencing the onClick, onMouseOver and onMouseOut declarations.

It's the only error left and I just can't seem to get through it.

vacunita · Sep 21, 2009

I still don't know what it is you are attempting to position. Or why you would want to move it.

The Div will appear where it is placed in the code.
In your case it will show up inside the table cell element.

Really just remove positioning bit and save yourself the headache.

Code:

function ShowPopup(hoveritem)
{
hp = document.getElementById(hoveritem);

hp.style.visibility = "visible";
}

Assuming you have all the id's unique and you pass them correctly to the function in each instance it should be working.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Popup images not unique...problem with script??

perfectdesign

Programmer

vacunita

Programmer

perfectdesign

Programmer

vacunita

Programmer

perfectdesign

Programmer

vacunita

Programmer

perfectdesign

Programmer

vacunita

Programmer

perfectdesign

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor