onclick swap image across frames without adding to page history

Need to swap an image in another frame when clicking on a link without the page history changing. Can anyone help me? preferably javascript.
Who is Participating?
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.
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.
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

dojanAuthor Commented:
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.
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.

dojanAuthor Commented:
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.
Not sure if dojan has solved his problem. I'm still convinced my previous answer is the "best" way based on previous thoughts.

dojanAuthor Commented:
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.