Using Rollover Image Swap On Image Viewed Within Lightbox

[bennett]

I am only a few months into learning code. Here's my dilemma.

SITUATION:

I am using lightbox so when you click on an image (col1.jpg), it takes you into lightbox, opening another image (color1.jpg), and when you click next it takes you to the next image (color2.jpg). I want to make it so that when you rollover the image (color1.jpg) while in "lightbox mode" it will show another image.

Underneath col1.jpg is a word link (color), which takes you to the same series.

PROBLEM:

I think HTML rollovers won't work, because of the javascript already present in the file.

CODE:

<div class="image">
<a href="color1.jpg" rel="lightbox[colorsequence]"><img id="col1" class="all-four-rounded-corners" src="col1.jpg" alt="col1"/></a>
<a class="hidden" href="color2.jpg" rel="lightbox[colorsequence]">image #2</a>
<p><a href="color1.jpg" rel="lightbox[colorsequence2]">color</a></p>
<a class="hidden" href="color2.jpg" rel="lightbox[typesequence2]">image #2</a>
</div>

I KNOW THAT:

Mouseovers can work like this (and other ways, too):

<img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">

BUT:

Should I use javascript instead?
What code do I want to use, and where do I put it?
Should I edit some of the javascript in my lightbox files?