Change Part of a Href on Mouse Over

**kiwiupover** · 03-27-2008, 11:46 PM

I'm using lightbox 2 and I can't figure out how to change the rel=lightbox[something] to rel=lightbox[another] with a javascript onMouseOver call.

Please help.

Here is a link to see what I'm talking about
http://kiwiupover.com/brittany/lightbox.php

And here is the code:

Thanks
kiwiupover

Code:

<?php 

$bigpic1= "3101558_13.jpg";
$bigpic2= "pic2.jpg";


$relLoc1 = dave;
$relLoc2 = steve;


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo "lightbox"; ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="bi.css" media="screen, projection" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>

<SCRIPT language="JavaScript">
function newImage( imgSrc ){

var imgName = new Image();
imgName.src = imgSrc;

return imgName;

}

function change( imgName, imgLocation )
{
document[imgName].src = imgLocation ;
}

var preloadFlag = false;
function loadImages()
{
if (document.images)
{
//****Edit this list to include rollover state images ****
//****Example: aboutus_over = newImage( "images/aboutus-over.gif" );

image11 = newImage('<?php echo ("images/$bigpic1");?>');
image12 = newImage('<?php echo ("images/$bigpic2");?>');


preloadFlag = true;
}
}

function change1(picName, imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}
</SCRIPT>

</head>
<body onLoad="loadImages(); initLightbox()">
<div id="container">
<div id="header">
<div id="header-meta">
<h1><a href="lightbox.php">Lightbox</a></h1>
</div><!-- /header-meta -->
</div><!---header-->
<div id="page-body">
<div id="main-content">
<a href="images/3101558_13.jpg" rel="lightbox[dave]"><img class='image' src="images/3101558_13.jpg" name='pic1' border='0'></a>
</div><!-- /main-content -->
</div><!-- /pagebody -->
<div id="footer">
<table width="100%" valign="middle" border="0" cellspacing="2" cellpadding="0" align="center">
<td align="center">
<table valign="" border="0" cellspacing="2" cellpadding="0" align="center">
<tr height="48">
<td align='center' valign='middle' width='58' height='48'><a HREF='#' onMouseover="change1('pic1', 'image11')">pick one</a></td>
<td align='center' valign='middle' width='58' height='48'><a HREF='#' onMouseover="change1('pic1', 'image12')">pic two</a></td>
</tr>
</table>
</td>
</table>

</div><!-- /footer -->
<div id="hide">
<a href="images/IMG_0026.jpg" rel="lightbox[dave]"></a>
<a href="images/IMG_0030.jpg" rel="lightbox[steve]"></a>
</div><!-- /container -->
</body>
</html>