swap image rollover in separate frame

[aliasjanedoe]

I thought I found what I need at javascriptmadeeasy.com with the "Changing Image and Alternate Image - Frames" script, but I need to make the rollovers change the same one image in the second frame. I'm willing to PayPal a dollar to somebody for the help.

[ddadmin]

The basic idea of changing an image in another frame is basically learning how to access that frame using JavaScript. So lets say you have a basic rollover:

<a href="#" onMouseover="document.getElementById("mypic").src='new.gif'"; onMouseout="document.getElementById("mypic").src=old.gif'"><img id="mypic.gif" /></a>

And you wish the same rollover code above to also change another image on another frame. You would modify it to something like:

<a href="#" onMouseover="document.getElementById("mypic").src='new.gif'; parent.secondframe.document.getElementById("mypic").src='new.gif'"; onMouseout="document.getElementById("mypic").src=old.gif'; parent.secondframe.document.getElementById("mypic").src=old.gif' "><img id="mypic.gif" /></a>

Whereby "secondframe" is the name of the frame in question (via the name attribute of HTML). It also assumes the image inside this second frame has an ID of "mypic".

You may want to read up on the following two tutorials:

http://www.javascriptkit.com/javatutors/image1.shtml
http://www.javascriptkit.com/javatut...oframes1.shtml

[aliasjanedoe]

But I want to change the image itself AND one in another frame. I found a script that does that, except the second image changes a second image in the other frame. Here's the script:

<script language="JavaScript">

<!-- Hide from old browsers

var NN3 = false;

image1= new Image();

image1.src = "IMAGE OFF";

image1on = new Image();

image1on.src = "IMAGE ON";

image1alt = new Image();

image1alt.src = "ALT IMAGE OFF";

image1alton = new Image();

image1alton.src = "ALT IMAGE ON";



image2= new Image();

image2.src = "IMAGE OFF";

image2on = new Image();

image2on.src = "IMAGE ON";

image2alt = new Image();

image2alt.src = "ALT IMAGE OFF";

image2alton = new Image();

image2alton.src = "ALT IMAGE ON";



function on3(name)   {

        document[name].src = eval(name + "on.src");

        parent.ALT IMAGE FRAME NAME.document[name + "alt"].src = eval(name + "alton.src");

}

function off3(name)  {

        document[name].src = eval(name + ".src");

        parent.ALT IMAGE FRAME NAME.document[name + "alt"].src = eval(name + "alt.src");

}

NN3 = true;



function on(name)  {

        if (NN3) on3(name);

}

function off(name)  {

        if (NN3) off3(name);

}

// ->

</script>






<a target="TARGET FRAME NAME" href="YOUR LINK" onmouseover="on('image1');" onmouseout="off('image1')"><img src="YOUR IMAGE1 OFF"  border="0" name="image1"></a><br>

<a target="TARGET FRAME NAME" href="YOUR LINK" onmouseover="on('image2');" onmouseout="off('image2')"><img src="YOUR IMAGE2 OFF"  border="0" name="image2"></a><br>





<img src="ALT IMAGE1 OFF" name="image1alt"><br>

<img src="ALT IMAGE2 OFF" name="image2alt"><br>

What I want is to only have "image1alt" change every time and not have an "image2alt" and so on.

[aliasjanedoe]

The other code I found looks like this

<script language="JavaScript">

<!-- Hide from old browsers

if (navigator.appVersion.indexOf("2.") != -1){

        check = false;

        }

if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){

        check = false;

        }

else {

        check = true;

        }



image1= new Image();

image1.src = "IMAGE FILE OFF";

image1on = new Image();

image1on.src = "IMAGE FILE ON";

image1alt = new Image();

image1alt.src = "YOUR ORIGIONAL ALT IMAGE";

image1alton = new Image();

image1alton.src = "YOUR CHANGING FIRST ALT IMAGE";



image2 = new Image();

image2.src = "IMAGE FILE OFF";

image2on = new Image();

image2on.src = "IMAGE FILE ON";

image2alt = new Image();

image2alt.src = "YOUR ORIGIONAL ALT IMAGE";

image2alton = new Image();

image2alton.src = "YOUR CHANGING SECOND ALT IMAGE";



function imageon(name)   {

	document[name].src = eval(name + "on.src");

	document["altimg"].src = eval(name + "alton.src");

}

function imageoff(name)  {

	document[name].src = eval(name + ".src");

	document["altimg"].src = eval(name + "alt.src");

}

NN3 = true;



function on(name)  {

	if (check == true){

		imageon(name);}

}

function off(name)  {

	if (check == true){

		imageoff(name);}

}

// -->

</script>





<a href="YOUR LINK" onmouseover="on('image1');" onmouseout="off('image1')"><img src="IMAGE FILE OFF"  border="0" name="image1"></a>


<a href="YOUR LINK" onmouseover="on('image2');" onmouseout="off('image2')"><img src="IMAGE FILE OFF"  border="0" name="image2"></a>






<img src="YOUR ORIGIONAL ALT IMAGE" name="altimg">

Can I make it work with another frame?