Javascript ShopPopup and HidePopup

[bossman]

We are currently redesigning the 'our work' section of our company webiste, it consists of 10 sections including Catalogs, Web, Marketing Collateral, etd...

 

Here is what we currently have

 

http://www.jpenterprises.com/staging/ourwork_3_marketing_collateral.html

 

If you rollover the thumbnails, you can see that each rollover opens up a hidden div tag that is absolute positioned. Here is the javascript I used to make this function work...

 

(I am only pasting the code for one of the links and popups to save some space, and to not confuse anyone...)

 

Code for the image rollover...

 

image1 = new Image();
image1.src = "images/roll_overs/marketing_collateral/piece_1_link.jpg";

 

Code for the popup...

 

function ShowPopup1(hoveritem)
{
hp = document.getElementById("hoverpopup1");

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

function HidePopup1()
{
hp = document.getElementById("hoverpopup1");
hp.style.visibility = "Hidden";
}

 

HTML Code for the actual thumbnail...

 

<a href="#" onMouseOver="image1.src='experiment/images/roll_overs/marketing_collateral/piece_1_link_hover.jpg';ShowPopup1(this);HidePopup2();HidePopup3();HidePopup4();HidePopup5();HidePopup6();HidePopup7();this.style.cursor='default';" onMouseOut="image1.src='experiment/images/roll_overs/marketing_collateral/piece_1_link.jpg';"><img name="image1" src="experiment/images/roll_overs/marketing_collateral/piece_1_link.jpg" width="40" height="40" style="border:1px solid #999;"  /></a>

 

HTML Code for the hidden div tag that appears upon rollover...

 

<div id="hoverpopup1" style="visibility:visible;position:absolute; width:395px;">
<div id="text">
<img src="experiment/images/roll_overs/marketing_collateral/piece_1_image.jpg" /><br/><br/>
<table width="395"><tr>
<td align="right"><strong>Client:</strong></td><td> WESCO Distribution</td></tr><tr>
<td align="right"><strong>Project:</strong></td><td>Miscellaneous Supplemental Product Collateral</td></tr><tr>
<td valign="top" align="right"><strong>Description:</strong></td><td>We at JP are proud of the strong partnerships that we've nurtured with long-time client's like WESCO Distribution who depend on us to produce consistent, brand-conscious collateral materials from calendars and product bulletins to catalog publication time tables.<br/><br/>

<a href="experiment/images/lightbox/marketing_collateral/WES_Misc_Collateral.jpg" rel="lightbox[phototour1]" name="<span class=PicTitle>Client: WESCO Distribution</span><br/><span class=PicSize>Project: Marketing Collateral">View Larger Image</a><br/><br/>

Alternate Views: <a href="experiment/images/lightbox/marketing_collateral/view_WES_Misc_Collateral big 1_743x460.jpg" rel="lightbox[phototour01]" name="<span class=PicTitle>Client: WESCO Distribution</span><br/><span class=PicSize>Project: Marketing Collateral">Image 1</a> | <a href="experiment/images/lightbox/marketing_collateral/view_WES_Misc_Collateral big 2_743x460.jpg" rel="lightbox[phototour01]" name="<span class=PicTitle>Client: WESCO Distribution</span><br/><span class=PicSize>Project: Marketing Collateral">Image 2</a> | <a href="experiment/images/lightbox/marketing_collateral/view_WES_Misc_Collateral big 3_743x460.jpg" rel="lightbox[phototour01]" name="<span class=PicTitle>Client: WESCO Distribution</span><br/><span class=PicSize>Project: Marketing Collateral">Image 3</a>
</td></tr></table>
</div>
</div>

 

*** I will note that we are using lightbox for the stuff inside the hidden div tag, that's why there are all the funny characters in the 'name' tag...

 

---------HERE IS THE PROBLEM----------

 

The person approving the changes to the site has recently informed me that they want a 'related projects' button to appear inside the hidden div that appears upon rollover. What this will do is link you to a project in another section, BUT.... each individual project appears upon a javascript rollover

 

Does anyone know a way of making the link in the hidden id link to another hidden div tag, so that when you click it it jumps to that page and straight to that hidden div tag??

 

All of them appear upon rollover and I am lost on how to do this...

 

ANY HELP WOULD BE GREATLY APPRECIATED AS TIME IS PRESSING!!

 

Bossman

 

 

 

 

 

 

 

 

 

 

[bossman]

does anyone use this javascript forum??