onclick swap image across frames without adding to page history

Posted on 2005-04-09
Last Modified: 2012-05-05
Need to swap an image in another frame when clicking on a link without the page history changing. Can anyone help me? preferably javascript.
Question by:dojan
    LVL 3

    Expert Comment

    Is your page reloading? If yes, swap the images the way you done it before and use return false; at the end. This will prevent your browser to reload the page.
    LVL 3

    Expert Comment

    Don't your frame setup, but let's assume you have a frameset with two frames, each containing a web page. So...each page has the same parent. Each frame will need a name/id want to swap an image in one frame with an image in another on a click event.

    Page 1:
    <img src='myImage1.jpg' id='myPage1Image'>

    Page 2:
    <img src='myImage2.jpg' id='myPage2Image'>

    function in HEAD of the page that has the link
    function swapIt(){
     if(parent.frames['myFrame1Name'] && top.frames['myFrame2Name']){ //make sure we have frames
       var img1 = document.getElementById('myPage2Image); //first image
       var img2 = parent.frames['myFrame2Name'].document.getElementById('myPage1Image'); //second image
       var img1Source = img1.src; //source of first image before the swap
       var img2Source = img2.src; //source of second image before the swap
       img1.src = img2Source; //swap
       img2.src = img1Source; //swap

    The link on the page with the above function...

    <a href="#" onClick="swapIt();">Swap Images</a>

    Hope this helps


    Author Comment

    If you look at this link, you'll see my problem.
    As you can see I actually call another ASP page to load the new picture which in turn adds a pageload to my history. This causes the back button (tillbaka) to page backwards through the various coulour of the product when i want it to go back to the privious menu.
    LVL 3

    Expert Comment

    Two options. You could "returnFalse on the click"

    instead of parent.main.history.go(-1);
    you could
    parent.main.history.go(-1);return false;

    that should prevent the history from being tracked. BUT...It's seems prone to issues depending on the brower. I would load the back button "onLoad" with the url you want it to return to since you don't know what other clicking, etc. might be going on.  Then on your back button, you could parent.main.document.location.href = 'thePreviousPage';

    You could either do it with .asp server side using the HTTP_REFFERER then filling the back button with a variable url, or you could use javascript onLoad grab the location of the page you want the back button to go to. Something like?
    <body onLoad = "getCallingPage()">
    var goBackUrl;
    function getCallingPage(){
      goBackUrl = parent.main.document.location.href;
    then, on your back button (in the lower frame), you could do
    onClick="parent.main.location.href = parent.main.goBackUrl;"

    lemme know if this helps.


    Author Comment

    This probably would work. I will still have to reload the lower frame with the static 'parent.main.history.back(1)' for the rest of my site. If there was a way to avoid the page history being updated it would be preferable to avoid messing around with variables having to reset them if something else is done. As you can see on the page the user can jump to various menus by clicking on the links on the menus above and below. Having to check all the possibilities makes me feel a bit dubious.
    LVL 3

    Accepted Solution

    You could just "count" the variables with jScript and 'reset' the count on each page load.
    var clickCount = 0;

    in the main page. Then.. onEach item click..

    clickCount + clickCount + 1;

    then..for your back button...


    you can count backwards with the history object.
    LVL 3

    Expert Comment

    Not sure if dojan has solved his problem. I'm still convinced my previous answer is the "best" way based on previous thoughts.


    Author Comment

    I've been away on holiday. I'm so sorry for the delay. Although the answer is not exactly what I was looking for, your suggestion is the best solution. I will implement it on the website.


    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Join & Write a Comment

    Building “do-it-yourself” web sites has become an epidemic. There are so many blogs, web sites and even books that "teach" you how to build your web site in a few extremely simple and easy steps. Building a web site has become easier than boiling an…
    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now