Using Rollover Image Swap On Image Viewed Within Lightbox
I am only a few months into learning code. Here's my dilemma.
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.
<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>
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'">
What code do I want to use, and where do I put it?