onclick swap image across frames without adding to page history

Posted on 2005-04-09
Medium Priority
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
  • 4
  • 3

Expert Comment

ID: 13744099
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.

Expert Comment

ID: 13745985
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

Then..you 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

ID: 13756698
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.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


Expert Comment

ID: 13757408
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

ID: 13767466
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.

Accepted Solution

DavidBook earned 750 total points
ID: 13768928
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.

Expert Comment

ID: 13950075
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

ID: 13963532
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses
Course of the Month15 days, 16 hours left to enroll

850 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