DaniWeb IT Discussion Community - Need help with Image Swaping in Javascript

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Need help with Image Swaping in Javascript (http://www.daniweb.com/forums/thread20093.html)

Need help with Image Swaping in Javascript

Wow, its been awhile since ive posted, but hopefully some of you still remember me :-P

well here goes. im desiging a site and i need help with how to make it so when i click one link, not only will it load a new page within an iframe, it will swap a picture on the current page with another one. much help would be greatly appreciated on this!

here is the code i have currently for the page (with no script as i had no basis as for where to start)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Asystem</title>

<link rel="stylesheet" href="stylesheets/privacy.css" type="text/css">

</head>

<body>

 

<map name="topnav" id="topnav">

        <area shape="rect" coords=" 188, 40, 247, 55" href="./index.html" target="_self" />

        <area shape="rect" coords=" 268, 40, 327, 55" href="./products/index.html" target="mid_nav_iframe" />

        <area shape="rect" coords=" 348, 40, 407, 55" href="./technology/index.html" target="mid_nav_iframe" />

        <area shape="rect" coords=" 428, 40, 487, 55" href="./services/index.html" target="mid_nav_iframe" />

        <area shape="rect" coords=" 508, 40, 567, 55" href="./asystem/index.html" target="mid_nav_iframe" />        

        <area shape="rect" coords=" 588, 40, 647, 55" href="./contact/index.html" target="mid_nav_iframe"/>

</map>

<table width="808" border="0" cellpadding="0" cellspacing="0">

        <tr>

                <th colspan="4"><img src="./top_nav_img/top_nav.jpg" border="0" alt="Top Navigation" usemap="#topnav"></th>

        </tr>

 

        <tr>

                <td colspan="4"><img src="./spacer/spacer3.gif" border="0"></td>

        </tr>

 

 

        <tr>

                <td width="145" valign="top">

                        <img src="./sid_nav_img/recent_news.jpg" border="0" alt="recent news">

 

                        <!-- this will be the location of everything that is new to the site -->

                        <table border="0" width="100%" cellpadding="0" cellspacing="0">

                                <tr valign="top">

                                <td align="left" valign="top">

                                        <font face="Arial, Helvetica, sans-serif" size="2">Updates for 3/12/05</font>

                                        <a href="./updates/updates.html" target="mid_nav_iframe"><font face="Arial, Helvetica, sans-serif" size="2">(read more)</a></font>

                                        <br />

                                        </td>

                                </tr>

                        </table>

                        <!-- end inlaid table -->

                </td>

                <td width="26"><img src="./spacer/spacer1.gif" border="0"></td>

                <td width="483"><img src="./mid_nav_img/home.jpg" border="0"><img src="mid_nav_img/_nav.jpg" border="0">

                <!-- Location for Inlaid Frame -->

                        <iframe width="483" height="700" src="welcome.html" frameborder="0" name="mid_nav_iframe" id="mid_nav_iframe"></iframe>

                <!-- end inlaid frame -->

                </td>

                <td width="154"><img src="./spacer/spacer2.gif" border="0"></td>

        </tr>

</table>

</body>

</html>

I hope i didnt confuse. what it comes down to is this

each one of those area maps links to a new page within an iframe, but i also need them to swap an image that is located on the same page (not in the iframe)

so its

Clicking Link>Swap Image>load new iframe window

somthing like that. I hope someone can help, and it would be much appreciated (will make a note on the site to your help too if it means anything to anyone)

Re: Need help with Image Swaping in Javascript

Here you go, I coded this. Hope it is what you want. When you click the llink on the page it links the iframe to google.com and I added an onclick that executes a javascript function that changes the src of the image.

<html>

        <head>

                <script language="javascript">

function ChangeImage(){

        document.getElementById("image1").src= "http://www.daniweb.com/certificates/badge1.jpg";

}

                </script>

        </head>

        <body>

                <iframe width="800" height="600" src="http://www.daniweb.com/" frameborder="1" name="mid_nav_iframe"

                        id="mid_nav_iframe"></iframe>

                <br>

                <a href="http://www.google.com/" target="mid_nav_iframe" onclick="ChangeImage();">google</a>

                <br>

                <img src="http://www.daniweb.com/certificates/badge30764.jpg" id="image1"> </TABLE>

        </body>

</html>

Re: Need help with Image Swaping in Javascript

going to test it out first thing tomorrow, thank you very much though for coming up with this, i hope it works.

Re: Need help with Image Swaping in Javascript

Quote:

Originally Posted by belama

<html>

        <head>

                <script language="javascript">

function ChangeImage(){

        document.getElementById("image1").src= "http://www.daniweb.com/certificates/badge1.jpg";

}

                </script>

        </head>

        <body>

                <iframe width="800" height="600" src="http://www.daniweb.com/" frameborder="1" name="mid_nav_iframe"

                        id="mid_nav_iframe"></iframe>

                <br>

                <a href="http://www.google.com/" target="mid_nav_iframe" onclick="ChangeImage();">google</a>

                <br>

                <img src="http://www.daniweb.com/certificates/badge30764.jpg" id="image1"> </TABLE>

        </body>

</html>

THank you very very much, it worked like a charm, just made a few modifications and it works great ( iadded more functions so that i could have it call to them seperatly per image)

THANK YOU!