Online Shopping : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

21 of 41 people (51%) answered Yes
Recently 4 of 10 people (40%) answered Yes

Entry

How do I change image locations in a frame from another frame inside a frameset

Apr 6th, 2008 18:42
ha mo, Alan Frey, Rick Oestmann,


The frames will need to be named, before you can begin to reference any 
of the objects contained in either of the frames.  Also, objects in 
other frames must be named with the id tag.
	For the purpose of this explanation we will assume that you 
have 2 frames, setup in a standard frameset.
Ex. The Frameset
<frameset cols="25%,*" border="0" frameborder="0" framespacing="0">
<frame name="frame1" src="frame1.html" border="0"       
frameborder="0" scrolling="auto" resize="no”/>
<frame name="frame2" src="frame2.html" border="0" frameborder="0" 
    scrolling="auto" resize="no"/>
</frameset>
Alright, notice the name attribute for each frame within the frameset. 
These names (frame1 and frame 2 respectively) allow the user to access 
DOM objects and Javascript functions from frame to frame.
Now lets look at the code on each of the pages. We will assume that 
frame1.html will contain a button that, when clicked, will change the 
src of the image located on frame2.html. Assuming that we have 2 
images, the button will toggle between the two images.
On frame1.html we have a simple button that will call a function on 
it’s onclick() event. The function changeImage uses a switch statement 
(javascripts version of the case statement) to determine if the 
currently displayed image is imgA.gif or imgB.gif. 
Depending on the currently displayed image, the function will change 
the src element of the image to the image that is currently not on 
display.
Ex. frame1.html 
<html>
<head>
<script language=”Javascript”>
		function changeImage(){
			switch(parent.frame2.imgPrimary.src){
				case “imgA.gif”:
					parent.frame2.imgPrimary.src 
= “imgB.gif”;
				break;
				case “imgB.gif”:
					parent.frame2.imgPrimary.src 
= “imgA.gif”;
				break;
			}		
		}
</script>
</head>
<body>
	<input type=”button” value=”click to change image” 
onclick=”changeImage()”
</body>
</html>                                       
Ex. frame2.html
<html>
<body>
	<img id=”imgPrimary” src=”imgA.gif”/>
</body>
</html>
	This technique can be used to change any elements of a page 
from another frame, as long as the element that you wish to manipulate 
had an id attribute.
Alan Frey
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com