I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Can anyone help me please.... (roll over image) In the <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif"; staticImage1 = new Image(); staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif"; ........................................................... (button) <a href="info.html" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;"> <img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a> ........................................................... (two frames at once text) In the <head> <script language="javascript"> function loadTwo(iframe1URL, iframe2URL) { parent.frame1.location.href=iframe1URL parent.frame2.location.href=iframe2URL } </script> ........................................................... (button) <a href="javascript:loadTwo('info.html','home.html')">info</a> Thanks!
Hi! Try This Method For Image Over: <script> function imghover(id, src) { document.getElementById(id).src = src; } </script> <img src="img1.jpg" width="100" height="100" id="img1" onmouseover="imghover('img1', 'img2.jpg');" onmouseout="imghover('img1', 'img1.jpg');">
I don’t have a problem getting the roll over images to work at all but I am still having the problem of targeting two Iframes at once. Basically I have two Iframe windows on my home page one for a list of buttons and one that displays the main content of the site. If I were to click say the camping rollover image it needs to pull the mail camping html page into frame 1 well bringing up a list of categories in frame 2 at the same time. I can’t seem to get this to work. I am more familiar with Networking and hardware support than I am programming and JavaScript is my least favorite.
I don’t have a problem getting the roll over images to work at all but I am still having the problem of targeting two Iframes at once. Basically I have two Iframe windows on my home page one for a list of buttons and one that displays the main content of the site. If I were to click say the camping rollover image it needs to pull the mail camping html page into frame 1 well bringing up a list of categories in frame 2 at the same time. I can’t seem to get this to work. I am more familiar with Networking and hardware support than I am programming and JavaScript is my least favorite.
Hi! Try This Method: U Can Remove "OnMouseOut" Page URL's But It'll Reload Default1.htm & Default2.htm OnMouseOut <script language="javascript"> function loadTwo(id, src, iframe1URL, iframe2URL) { document.frame1.location.href=iframe1URL; document.frame2.location.href=iframe2URL; document.getElementById(id).src = src; if (!iframe1URL && !iframe2URL) { document.frame1.location.href="Default1.htm"; document.frame2.location.href="Default2.htm"; } } </script> <a href="#" onclick="loadTwo('Page1.htm','Page2.htm');">info</a> <br /> <img src="img1.jpg" width="100" height="100" id="img1" onmouseover="loadTwo('img1', 'img2.jpg', 'Page1.htm','Page2.htm');" onmouseout="loadTwo('img1', 'img1.jpg', 'Default1.htm','Default2.htm');"> <br /> <iframe src="Default1.htm" name="frame1" width="100%" height="300"></iframe> <br> <iframe src="Default2.htm" name="frame2" width="100%" height="300"></iframe>
Yea that doesn't seem to be working for me. Here is what I am trying to accomplish I have the following two button images witch I want to roll over and when clicked upon I not only want the image to stay gold so that each button acts as a book marker but I also want two iframes on one page to load content into them at the same time. here are my image names: 01_home_black.gif and 01_home_gold.gif also the name of the two web-pages (content) i want to display into my iframes one and two, home.html and buttons.html url ttp://midwestfishing.org/pics/01_home_black.gif url ttp://midwestfishing.org/pics/01_home_gold.gif If you can help me out I would appreciate it greatly, can you be more specific also to what goes were I am really new to all this.
this isn't so hard to do. below is some code that can make it work, as well as a link to show it working. the example has 2 iframes with default pages loaded in. a div above the iframes holds the buttons. there are different strategies in how to deal with making 'sticky' buttons. here i am using an old workaround of letting simple javascript swap the images via onMouseOver and onMouseOut. then i let the mouseclick actually swap their CSS display visibilities , thus giving the appearance of it being 'sticky'. the code is in no way optimized. it is written 'long-hand' and is clunky. but it works, and it should give you a good idea how to approach doing something like this. changing the source of the iframes comes easily from code like this: document.getElementById("frame1").src='1.html'; the link is here: www.demetri-media.com/JavaScript/iframesTargets.html the complete code is here: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> function rollover1(){ document.getElementById("name1").src='gold.gif' } function rollover2(){ document.getElementById("name2").src='gold2.gif' } function rollout1(){ if(document.getElementById("name1").src=='gold.gif') {document.getElementById("name1").src='black.gif'} else {document.getElementById("name1").src='gold.gif'} } function rollout2(){ if(document.getElementById("name2").src=='gold2.gif') {document.getElementById("name2").src='black2.gif'} else {document.getElementById("name1").src='gold2.gif'} } function change1(){ document.getElementById("name1").style.display="none"; document.getElementById("name1b").style.display="inline"; document.getElementById("name2").style.display="inline"; document.getElementById("name2b").style.display="none"; document.getElementById("frame1").src='1.html'; document.getElementById("frame2").src='2.html'; } function change2(){ document.getElementById("name2").style.display="none"; document.getElementById("name2b").style.display="inline"; document.getElementById("name1").style.display="inline"; document.getElementById("name1b").style.display="none"; document.getElementById("frame1").src='3.html'; document.getElementById("frame2").src='4.html'; } </script> <style type="text/css"> iframe {height:200px; width:100%; } #name1b , #name2b {display:none;} </style> </head> <body> <div> <a onMouseOver="rollover1()" onMouseOut="rollout1()" onClick="change1()"> <img id="name1" name="image1" src="black.gif" border=0> </a> <a onMouseOver="rollover1()" onMouseOut="rollout1()" onClick="change1()"> <img id="name1b" name="image1b" src="gold.gif" border=0> </a> <a onMouseOver="rollover2()" onMouseOut="rollout2()" onClick="change2()"> <img id="name2" name="image2" src="black2.gif" border=0> </a> <a onMouseOver="rollover2()" onMouseOut="rollout2()" onClick="change2()"> <img id="name2b" name="image2b" src="gold2.gif" border=0> </a> </div> <iframe id="frame1" src="default1.html"> </iframe> <iframe id="frame2" src="default2.html"> </iframe> </body> </html> Code (markup): i hope this helps