Web Javascript Question

KCDesigns · **Posted:** Sun Nov 30, 2008 11:56 pm

Hi, I have the following code for just a test page im messing around with

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>KC Designs</title>

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

<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<p align="center">

<span onmouseover="document.rollimg.src=image0.src;">
<img src="images/pic1.gif" width="32" height="32" border="0" alt="1" /></span>

<span onmouseover="document.rollimg.src=image1.src;">
<img src="images/pic2.gif" width="32" height="32" border="0" alt="2" /></span>

<span onmouseover="document.rollimg.src=image2.src;">
<img src="images/pic3.gif" width="32" height="32" border="0" alt="3" /></span>

</p>

<p align="center"><a href="rollimg" rel="lightbox" title="Sick leaves"><img src="images/pic1a.gif" width="150" height="150" border="0" alt="Larger version of one of the smaller images above" name="rollimg" /></a></p>

</body>
</html>

The img.js code i got from this website http://javascript.about.com/library/blroll1.htm

Basically it just changes a smaller image to a larger version of the image your mouse is hovering over.

Im also using a lightbox javascript that when you click an image it brings up a fullsize preview. Im sure most have seen what im talking about.
(Screenshot : http://www.splitbrain.org/_media/blog/2007-03/lightbox.jpg )

Anyway my problem is that i want to have the two scripts work together basically, so that when you hover over an image the larger one underneath changes to the picture your hovering over and if you click on the larger one it opens the image in the lightbox view.

I have tried everything i can think of but im not sure what to put in the href="" in the code below so when you click it, it loads whatever image you last hovered over and not one specific picture like if i had it set to href="images/pic1.gif".

code:

[/code]

Tony · **Posted:** Mon Dec 01, 2008 12:08 am

but why would you post this in the Java forum?

S_Grimm · **Posted:** Mon Dec 01, 2008 12:45 pm

We don't hava a Java Sript forum?

KCDesigns · **Posted:** Mon Dec 01, 2008 2:07 pm

I was considering the web design forum but i figured Java and Javascript = Same-ish

Tony · **Posted:** Mon Dec 01, 2008 2:50 pm

and you base this assumption on what?

DemonWasp · **Posted:** Mon Dec 01, 2008 4:27 pm

For reference, and to head off Tony's point, Java != Javascript. They have similar syntax, in the sense that both have C-like syntax, but they are quite different, and are used for very different resources.

This topic properly belongs under Web Development. Javascript is a version (?) of ECMAScript, which is the standard scripting language used for active web pages.

The simplest solution to this problem is probably to have a global Javascript variable, then a Javascript function which is called onmouseover for each smaller picture. When that function is called, change the global variable to correspond to the link you want; when the onclick method of the larger image is called, simply access that global variable to determine which image to load.

S_Grimm · **Posted:** Mon Dec 01, 2008 7:13 pm

nevermind. I forgot about the wed development forum. Sorry Smile

jeffgreco13 · **Posted:** Thu Dec 04, 2008 4:40 pm

oh give the guy a break, I doubt he Googled the contrast between Java and JavaScript. He's here to learn too..

Anyway, about your problem, I am a huge jQuery fan and I know that if you were yo use jQuery you would be able to do this with ease.

Although it would be great if you could post the source you're working with for the "lightbox" code.

Consider this as well:

code:

Changed the javascript to make the image variable an array of Images. OnMouseOver a function is called with the ID of the image as the attributed. The function changes the SRC of the big image and also changes the HREF of the link. Notice I changed the image names so that it starts at 0 instead of 1, this is just easier to work with the arrays.

Give this a shot.

EDIT:

code:

document.getElementById('rollhref').href = 'javascript:func('+id+');';
} else {
document.all['rollhref'].href = 'javascript:func('+id+');';

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members