swap images on mouseover - with a twist!

hello -

when i mouseover the        on this webpage:

http://www.ctemps.cjehost.com/subgallery_4column_wiith.php

i need another image to pop up on top of the thumb.  a button - that says something like 'zoom' or "click image'.  the red background/border (the one that i''ve already got going) has to remain as well.  so, user mouses over, the red border pops up but so does a 'zoom' button, the user clicks the zoom button (or just the image - which is the way it's currently set up) and my modal window pops up - which it already does, onclick.
phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rashgangCommented:
Hey that link is not working check that whether you have posted correct link
0
phillystyle123Author Commented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:
this is the answer - ended up coming up with it on my own

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" lang="javascript" src="js/modal/jquery-1.2.3.js"></script>
<script type="text/javascript" lang="javascript" src="js/modal/modal-window.js"></script>      
<script type="text/javascript" lang="javascript">
var openMyModal = function(source)
{
      modalWindow.windowId = "myModal";
      modalWindow.width = 575;
      modalWindow.height = 500;
      modalWindow.content = "<iframe width='575' height='500' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'>&lt/iframe>";
      modalWindow.open();
};      
</script>
<title>C-Temps</title>
<link href="css/ctemps.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table align="center" border="0" class="wrapBG">
<tr><td valign="top">

<div id="wrap">
      <div id="entirePage">
      <div id="masthead">
                  <a href="index.php"><img src="images/logo_fpo.png" border="0" /></a>
                  <div class="txt">
                              <div class="cartTxt">
                              <a href="#">shopping cart</a>
                              </div>
                              <span class="color1">

                              Welcome to Charlotte Markward's
                              galleries, originals, prints & cards.
                              <a href="mailto:email@email.com">Contact me</a> about COMMISSIONS
                              </span>
                  </div>
            </div>      <!---content below masthead-->
            <div id="contentCTN">
            <div id="leftNav">
                        <ul>

                              <li><a href="index.php" class="linkStyle1">home</a></li>
                              <li><a href="gallery_col1.php" class="current">gallery</a></li>
                                                            <div class="leftSubNav">
                                    <ul>
                                          <li><a href="subgallery_4column_with.php" class="current">subgallery one</a></li>
                                          <li><a href="subgallery_4column_without.php" class="linkStyle1">subgallery two</a></li>
                                          <li><a href="#" class="linkStyle1">subgallery three</a></li>

                                          <li><a href="#" class="linkStyle1">subgallery four</a></li>
                                          <li><a href="#" class="linkStyle1">subgallery five</a></li>
                                          <li><a href="#" class="linkStyle1">subgallery six</a></li>
                                          <li><a href="#" class="linkStyle1">subgallery eighteen</a></li>
                                    </ul>
                              </div>
                                                            <li><a href="#" class="linkStyle1">artist statement</a></li>

                              <li><a href="#" class="linkStyle1">bio</a></li>
                              <li><a href="#" class="linkStyle1">shows & events</a></li>
                              <li><a href="#" class="linkStyle1">contact</a></li>
                              <li><a href="#" class="linkStyle1">purchase info</a></li>
                              <li><a href="#" class="linkStyle1">notify me</a></li>
                        </ul>

                  </div>            <div id="rightContent">
                        <div id="headerCTN">
                              <h1 class="color2"><a href="gallery_col1.php">Gallery</a>                              <span class="subGalleryTxt">
                                    <span class="color2">Subgallery One</span>
                              </span>                              </h1>
                        </div>

                        <div class="instructionsCTN"><!---begin instructions below header-->
                              <div class="instructions">
                                    Click on image to enter Detail page; Click QUICK VIEW to enter QUICK VIEW.
                              </div>
                              <div  class="paginateCTN">
                              <span class="color2"><a href="#" class="arrows"><</a> page <a href="#" class="currentPaginate">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a>...<a href="#">12</a> <a href="#" class="arrows">></a></span>

                              </div>
                        <!---end instructions below header--></div>
                        <div id="galleryCTN">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <!---begin 4 column row-->
                              
<tr>
      <td valign="middle" align="center" height="125">
            <a href="detail_vertical.php"> <img src="images/fpo_thumb_num3-125.jpg" border="0" onload="this.className='qlButton'" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" /></a>

            <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a>      </td>
      <td height="125" align="center" valign="middle" class="fourColRowPad">
            <a href="detail_vertical.php"> <img src="images/fpo_thumb_num1-125.jpg" width="97" height="125" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'" /></a>
            <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a>      </td>
      <td height="125" align="center" valign="middle" class="fourColRowPad">
            <a href="detail_vertical.php"> <img src="images/fpo_thumb_num2-125.jpg" width="124" height="123" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'" /></a>

            <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a>      </td>
      <td height="125" align="center" valign="middle" class="fourColRowPad">
            <a href="detail_vertical.php" > <img src="images/fpo_thumb_num4-125.jpg" width="80" height="125" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'"/></a>
            <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a>      </td>
</tr>
<tr>
<td valign="top" align="center"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>
</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>

</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>
</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">

<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>
</tr>
</table></td>
</tr>

                              <!---end 4 column row-->
<!---begin 4 column row-->
<tr>
<td valign="middle" align="center" height="125"><a href="detail_vertical.php"> <img src="images/fpo_thumb_num3-125.jpg" border="0" onload="this.className='qlButton'" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" /></a> <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a> </td>

<td height="125" align="center" valign="middle" class="fourColRowPad"><a href="detail_vertical.php"> <img src="images/fpo_thumb_num1-125.jpg" width="97" height="125" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'" /></a> <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a> </td>
<td height="125" align="center" valign="middle" class="fourColRowPad"><a href="detail_vertical.php"> <img src="images/fpo_thumb_num2-125.jpg" width="124" height="123" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'" /></a> <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a> </td>
<td height="125" align="center" valign="middle" class="fourColRowPad"><a href="detail_vertical.php" > <img src="images/fpo_thumb_num4-125.jpg" width="80" height="125" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'"/></a> <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a> </td>
</tr>
<tr>

<td valign="top" align="center"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>
</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>

</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>
</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>

</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>
</tr>
</table></td>
</tr>


                              <!---end 4 column row-->
<!---begin 4 column row-->
<tr>
<td valign="middle" align="center" height="125"><a href="detail_vertical.php"> <img src="images/fpo_thumb_num3-125.jpg" border="0" onload="this.className='qlButton'" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" /></a> <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a> </td>
<td height="125" align="center" valign="middle" class="fourColRowPad"><a href="detail_vertical.php"> <img src="images/fpo_thumb_num1-125.jpg" width="97" height="125" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'" /></a> <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a> </td>
<td height="125" align="center" valign="middle" class="fourColRowPad"><a href="detail_vertical.php"> <img src="images/fpo_thumb_num2-125.jpg" width="124" height="123" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'" /></a> <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a> </td>

<td height="125" align="center" valign="middle" class="fourColRowPad"><a href="detail_vertical.php" > <img src="images/fpo_thumb_num4-125.jpg" width="80" height="125" border="0" onmouseover="this.className='qlOn'" onmouseout="this.className='qlButton'" onload="this.className='qlButton'"/></a> <a href="modal.php" onclick="openMyModal('modal.php'); return false;"> <img onload="this.className='qlWayLo'" onmouseover="this.className='qlWayHi'" onclick="this.className='qlWayHi'" onmouseout="this.className='qlWayLo'"  src="images/QuickViewButton.png" border="0"/></a> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>

</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>
</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">

<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>
</tr>
</table></td>
<td align="center" valign="top"><table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="125"><div  class="iconCTN">
<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
<div class="iconQuickView"><a href="detail_vertical.php"><img src="images/quick_view_icon.gif" border="0" /></a></div>
</div>
<div class="thumbCaption">Artwork Piece <strong>Number 1</strong> </div></td>

</tr>
</table></td>
</tr>

                              <!---end 4 column row-->
<!---begin 4 column row-->
                              
                              <!---end 4 column row-->
                              </table>
                        </div>
                        <div class="clr"></div>
                  <div class="paginateCTN">

                        <span class="color2"><a href="#" class="arrows"><</a> page <a href="#" class="currentPaginate">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a>...<a href="#">12</a> <a href="#" class="arrows">></a>

                        </span>
                  </div>
                  
                  

      </div>
</div>
<div class="clr"></div>
<div id="footerCTN">
                        <div id="footerLeft">&copy; 2009 Copyright Info for Artist<br /><a href="#">Notify Me Of New Art By This Artist</a></div>
                        <div id="footerRight">Powered by <a href="http://www.artspan.com" target="_blank">artspan.com</a><br />artspan is contemporary art</div><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

                        
                  </div><div class="clr"></div></div>

</div>
</td></tr></table>
</body>
</html>
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.