Computer Science Canada

Web Javascript Question
Author:  KCDesigns [ Sun Nov 30, 2008 11:56 pm ]
Post subject:  Web Javascript Question
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:

<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>
[/code]
Author:  Tony [ Mon Dec 01, 2008 12:08 am ]
Post subject:  RE:Web Javascript Question
but why would you post this in the Java forum?
Author:  S_Grimm [ Mon Dec 01, 2008 12:45 pm ]
Post subject:  RE:Web Javascript Question
We don't hava a Java Sript forum?
Author:  KCDesigns [ Mon Dec 01, 2008 2:07 pm ]
Post subject:  RE:Web Javascript Question
I was considering the web design forum but i figured Java and Javascript = Same-ish
Author:  Tony [ Mon Dec 01, 2008 2:50 pm ]
Post subject:  RE:Web Javascript Question
and you base this assumption on what?
Author:  DemonWasp [ Mon Dec 01, 2008 4:27 pm ]
Post subject:  RE:Web Javascript Question
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.
Author:  S_Grimm [ Mon Dec 01, 2008 7:13 pm ]
Post subject:  RE:Web Javascript Question
nevermind. I forgot about the wed development forum. Sorry Smile
Author:  jeffgreco13 [ Thu Dec 04, 2008 4:40 pm ]
Post subject:  Re: Web Javascript Question
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:
<script type="text/javascript">
var image = new Array(3)
if (document.images) {
image[0] = new Image;
image[1] = new Image;
image[2] = new Image;
image[0].src = 'pic0a.gif';
image[1].src = 'pic1a.gif';
image[2].src = 'pic2a.gif';
} else {
image[0] = '';
image[1] = '';
image[2] = '';
document.getElementById('rollimg') = '';
}

function changeUp(id) {

document.getElementById('rollimg').src=image[id].src;

 if (document.links.length > 0) {
   if (document.getElementById) {
     document.getElementById('rollhref').href = 'pic'+id+'.gif';
   } else {
     document.all['rollhref'].href = 'pic'+id+'.gif';
   }
 }

}
</script>

<span onmouseover="changeUp(0);">
<img src="pic0.gif" width="32" height="32" border="0" alt="1" /></span>

<span onmouseover="changeUp(1);">
<img src="pic1.gif" width="32" height="32" border="0" alt="2" /></span>

<span onmouseover="changeUp(2);">
<img src="pic2.gif" width="32" height="32" border="0" alt="3" /></span>

</p>

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


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+');';

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy