View Full Version : Change Part of a Href on Mouse Over

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

And here is the code:



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

$relLoc1 = dave;
$relLoc2 = steve;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

function changeImage(filename)
document.mainimage.src = filename;

<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;

<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 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>

</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 -->

03-28-2008, 12:10 AM
Please read the rules before posting! http://www.dynamicdrive.com/forums/showthread.php?t=321

03-28-2008, 10:17 PM
Where should I post this question?

03-28-2008, 10:21 PM
Yet you still didn't read the rules.
Sigh, http://www.dynamicdrive.com/forums/forumdisplay.php?f=2