· FORUM
Special Target Link
Make a special link change two iFrame windows at the same time
PRACTICAL DEMONSTRATION AND CODE
If you would like to add a caption or explanation about a page or image on another directory, just use two IFrames on the same page. The first frame would have the caption. The second would display the image or webpage, or document! One click changes both iFrames. Examples are my own images on my own sites.
[NOTE: hot linking to someone's elses website images is STEALING their bandwidth and should NOT be done unless you have express permission to do so! It is very easy to track down who is linked from outside so you will be caught if you try it!]
)
){kind=link}
){kind=link}
){kind=link}
My page margins are 1.
My iFrame codes are below. Frames were named FRAME1 and FRAME2
Place each in a separate Insert > HTML (webgem in Trellix)
Each starts out on the same page, with the same background color.
To support larger images, make the bottom iFrame height as large as 580 and as wide as 780.
THREE PIECES OF CODE ARE NEEDED.
#1 IFRAME CODES:
The top iframe for comments has no border so it blends into the page:
<iframe name="FRAME1" src="textstart.htm" width="740" height="100" frameborder="0" scrolling="no"></iframe>
I gave the bottom iframe a 3-d border to define the space:
<iframe name="FRAME2" src="textstart.htm" width="740" height="400" frameborder="1" ></iframe>
#2 SPECIAL FUNCTION CODE:
To change two links at once, also insert the special javascript code on the iFrame page.
Modify items highlighted in blue in code as necessary to fit your site.
(If using a program other than CSB/Trellix, or hand coding, place this in the HEAD section!)
<script language="javascript">
function loadTwo(iframe1URL, iframe2URL)
{
parent.FRAME1.location.href=iframe1URL
parent.FRAME2.location.href=iframe2URL
}
</script>
|
#3 STANDARD LINK CODE:
<a href="javascript:loadTwo('special1.htm','special2.htm')">special link</a>
Each link is placed in the its own Insert > HTML in CSB. (webgem in Trellix)
These are my 6 links put on this page above:
<a href="javascript:loadTwo('textj1.htm','http://hepsep.home.mindspring.com/0c2fa4e0.jpg')">Link 1</a>
<a href="javascript:loadTwo('textj2.htm','http://hepsep.home.mindspring.com/0c12a100.jpg')">Link 2</a>
<a href="javascript:loadTwo('textf1.htm','http://hepsep.home.mindspring.com/HTMLobj-199/butterfly.jpg')">Link 1</a>
<a href="javascript:loadTwo('textf2.htm','http://hepsep.home.mindspring.com/0cb0bf00.jpg')">Link 2</a>
<a href="javascript:loadTwo('texts1.htm','http://www.ask.com')">Ask</a>
<a href="javascript:loadTwo('texts2.htm','http://www.langenberg.com')">Langenberg</a>
#3 PHOTO LINK CODE:
<a href="javascript:loadTwo('special1.htm','special2.htm')"><IMG SRC="yourGRAPHIC.jpg"></a>
The image yourGRAPHIC.jpg is the graphic used as link
Upload that image to the same directory as your webpage.
This is the link code used to larger image: (used same image/link as Link 1)
<a href="javascript:loadTwo('textj1.htm','http://hepsep.home.mindspring.com/0c2fa4e0.jpg')"><IMG SRC="spectarglink1.jpg"></a>
This is the link code used for Ask.com:
<a href="javascript:loadTwo('texts1.htm','http://www.ask.com')"><IMG SRC="ask-com_48_wht.gif"></a>
Create a (Content) text page for each link on your site. These appear in Frame1.
I made 6 for this sample plus a starting page that has has a one line of text in it.
The text color is the same color as the background so the page looks empty.
You could start on a page that has text if you want.
You could also place both iFrames in a table so there isn't such a large blank space.