Site Development
Downloads
Help!!
Home
Cross Image RolloverImage rollovers can occur on a variety of events other than when the mouse is hovering over the image to be rolled. One common variation is to have an Event coded in one image (or other object) and the rollover to occur to another image. Try it below by hovering your mouse over the images: 
This effect is very simple. The event coded into each image link's <a> tag contains a JavaScript that effects the other image. The key is in giving the images different NAMEs. Here's the code I wrote in the first image's <a> tag to roll the second image:
<a href="javascript://" You can see that all we did was code a standard rollover except for the fact that "pic1's" events effect "pic2" and vice versa. Another thing you can do is to roll over several images with a single event and single line of code. The trick here is to give all of the <img>s the same NAME. When the function is run, all of the images with the NAME in the object reference will roll over and display the specified "src". Different Frame RolloverYou're not stuck with only changing images on a single page. You can have events in one frame cause a rollover in another. Here's an example. The key here is to get the rollover image's object reference right. You can't communicate with a different frame directly. You must first reference the parent frameset. JavaScript refers to this parent frameset as "top". Then you reference the name you gave the <frame> when you coded it. Finally, you can refer to "document.images...". Here's the generic code: top.frame_name.document.images.image_name.src = URL to image file; The example is a simple frameset. The lower document is a basic HTML file with an <img> named "pic1". The page loaded in the upper frame contains the JavaScript that causes the image rollover in the lower frame. The links to rollover "pic1" in the lower frame lead to a function called "rollIt()". They also return a parameter for the specific image to roll over: rollIt('screw.jpg'). Here's the code for the "rollIt()" function in the <head> of the link's page (top frame):
<script language="JavaScript"> The script is pretty simple, but it's one of the longest object references we've used so far. The "top" part refers to the parent frameset. We have to start here to access the other frame. Next comes "below". That's the name I gave the frame in its <frame> tag when I coded the frameset. The rest of the object reference should be familiar to you: "document.images.pic1". We used the SRC property to change the image displayed. The "whichImage" parameter stores the specific image file to be used. This is the file we coded in the function call in each link. Each link returns a different image. Different Window RolloverWe can also use JavaScript to access objects in other windows. Remember that for windows to talk to each other they must have a parent/child relationship. In other words, one window must have opened the other. Here's and example of links in one window causing an image rollover in another window. Hover over a text link in the left window and an appropriate image will appear in the right window. The first step in coding this effect is to make the "control" window with the links. This window must have JavaScript in its <head> to open the second (right) window. This makes the right window a "child" of the left one so they can communicate with each other. The child window will also need a name. We set the name in JavaScript like we learned in the Window Opening & Closing Tutorial. Here's the code I used in the page with the text links (left window) to open the "image" window on the right:
rollWindow = window.open("samp102.htm","rollWindow","height=400,width=200"); The big things to note here are that I used "rollWindow=" to name the child window with the image. Now I can refer to this window as "rollWindow" in JavaScript. Next, notice that I used the "moveTo()" method to position the image window to the right of the links window. I positioned the link window from the script run from this tutorial page that opened it. Each link in the right window has an onMouseOver event that leads to a function that rolls the image in the "rollWindow". Each link also returns a parameter for the path to the image fill we want displayed. Here's a sample link:
<a href="javascript://" Here's the "getRolling()" function:
function getRolling(whichVeggie){ This is pretty much like any other image rollover code except that we had to begin our object reference with "rollWindow" to access the proper window the image is in. The generic form is: window_name.document.images.image_name.src It's as simple as that. Most of the errors you'll encounter is in forgetting a step in the object reference or misspelling something. The page in the rollover window is a simple page with an <img> named "rollpic". Frame In Different Window RolloverNow we'll wrap up this lesson by making a rollover in one window that effects an image in a frame in another window. You probably have already figured out how this will work. Here's and example. Start out by coding the window with the links. Make sure to add the JavaScript to open the framed window. The trick here is to load the file containing the <frameset> in the window opening code. Make sure that both the window and the frames have names. To get the links in the main window to access an image in either of the other window's frames, we'll use this object reference: window_name.frame_name.document.images.img_name.src A link in the main window has the following code: <a href="javascript:frameRoll('food','cabbage.gif')">CABBAGE</a> The other links use different parameters. The link leads to a JavaScript function called "frameRoll()". It returns two parameters. The "food" parameter refers to the frame name in the other window. I called the frames "food" and "fasteners". The "frameRoll()" function is coded like this:
function frameRoll(theFrame,theImage){ The big thing to look at here is the use of parameters to pass the frame's name. Notice how the frame name is coded in the object reference using square brackets "[ ]". This is done because we're using the name returned by a parameter instead of specific object name. Notice that there is no dot (.) between the window's name and the frame's parameter. The rest of the code should be familiar to you. You might also have noticed that I used the same name, "pic", for both images. This is okay because they are in separate frames and the frame reference will tell JavaScript which one is which. You only need to use different names to differentiate between different images on the same document. Summary & Exercises
navigator.window_name.frame_name.document.images.image_name
You rarely have to code the whole thing. You can leave out the "big momma" parent object "navigator". If images are on the same document, you can start at "document". If there aren't any frames involved, you can omit the "frame_name".
Get some practice in on these rollovers. Make a "control" window with links that will load different images in different frames in a four frame window.
|
You can have any event cause a rollover with any image. They key is knowing where to code the event and how to access the image with JavaScript Object References.
To Image Rollover Exam
Back To Beginning JavaScript Index