Rollover Swap on Image Seen Through 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?

[VIPStephan]

Originally Posted by bennett

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

There is no such thing as “HTML rollovers”. This can only be achieved with CSS or JavaScript.

Originally Posted by bennett

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?

This is JavaScript. It’s written in the HTML code (i. e. “inline”) but it’s still JS.

Originally Posted by bennett

Should I edit some of the javascript in my lightbox files?

Yes, since you are invoking the functionality with the lightbox plugin you also need to modify it by modifying the lightbox script. However, the standard lightbox functionality wasn’t actually meant to be used that way. I think it would be better to create something from scratch (or look for a script that was exactly programmed for what you want) rather than trying to modify a pre-made plugin.

[bennett]

Alright, thank you for your input; if I chose to attempt to modify my lightbox script, can anyone help me with what precise code to use and where to put it? I only really understand HTML and CSS; I've never actually written javascript.