-----------------------------------

KCDesigns

Sun Nov 30, 2008 11:56 pm


Web Javascript Question

-----------------------------------

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







KC Designs




 









 


 






 








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]


-----------------------------------

Tony

Mon Dec 01, 2008 12:08 am


RE:Web Javascript Question

-----------------------------------

but why would you post this in the Java forum?


-----------------------------------

S_Grimm

Mon Dec 01, 2008 12:45 pm


RE:Web Javascript Question

-----------------------------------

We don't hava a Java Sript forum?


-----------------------------------

KCDesigns

Mon Dec 01, 2008 2:07 pm


RE:Web Javascript Question

-----------------------------------

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


-----------------------------------

Tony

Mon Dec 01, 2008 2:50 pm


RE:Web Javascript Question

-----------------------------------

and you base this assumption on what?


-----------------------------------

DemonWasp

Mon Dec 01, 2008 4:27 pm


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.


-----------------------------------

S_Grimm

Mon Dec 01, 2008 7:13 pm


RE:Web Javascript Question

-----------------------------------

nevermind. I forgot about the wed development forum. Sorry :)


-----------------------------------

jeffgreco13

Thu Dec 04, 2008 4:40 pm


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:


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';
   }
 }

}















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:

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