Javascript Image Swapping Help

[gwrman]

I have a button with an image beside it. Onclick, it should switch to another image, then back.

View it at my test page http://www.billiardscores.com/

Throw some text in the box, and click the button.....You'll notice that while the spell checker is working, a SECOND image appears. I want it to REPLACE the initial image. This is controlled by the second last function in the following code.... (andalso a few above it...) ANY help is appreaciated. (i've bolded the relevant functions in the code below...)

var GOOGIE_CUR_LANG = null;
var GOOGIE_DEFAULT_LANG = "en";

function GoogieSpell(img_dir, server_url) {
  var cookie_value;
  var lang;
  cookie_value = getCookie('language');

  if(cookie_value != null)
    GOOGIE_CUR_LANG = cookie_value;
  else
    GOOGIE_CUR_LANG = GOOGIE_DEFAULT_LANG;

  this.img_dir = img_dir;
  this.server_url = server_url;

  this.org_lang_to_word = {"en": "English"};
  this.lang_to_word = this.org_lang_to_word;
  this.langlist_codes = AJS.keys(this.lang_to_word);

  this.show_change_lang_pic = false;
  this.change_lang_pic_placement = "left";

  this.report_state_change = true;

  this.lang_chck_spell = "<input type='button' value='Spell Check' />";
  this.lang_rsm_edt = "<input type='button' value='Check Errors' />";
  this.lang_no_error_found = "<input type='button' value='Spelling Ok' />";
  this.lang_revert = "Revert to - ";
  this.lang_close = "Close Menu";
  this.lang_no_suggestions = "Sorry, no suggestions found";
  
  this.show_spell_img = true;  
  this.decoration = true;
  this.use_close_btn = true;
  this.edit_layer_dbl_click = true;
  this.report_ta_not_found = false;

  //Extensions
  this.custom_ajax_error = null;
  this.custom_no_spelling_error = null;
  this.custom_menu_builder = []; //Should take an eval function and a build menu function
  this.custom_item_evaulator = null; //Should take an eval function and a build menu function
  this.extra_menu_items = [];
  this.custom_spellcheck_starter = null;
  this.main_controller = true;

  //Observers
  this.lang_state_observer = null;
  this.spelling_state_observer = null;
  this.show_menu_observer = null;
  this.all_errors_fixed_observer = null;


GoogieSpell.prototype.setSpellContainer = function(elm) {
  this.spell_container = AJS.$(elm);
}

GoogieSpell.prototype.setLanguages = function(lang_dict) {
  this.lang_to_word = lang_dict;
  this.langlist_codes = AJS.keys(lang_dict);
}

GoogieSpell.prototype.setForceWidthHeight = function(width, height) {
  this.force_width = width;
  this.force_height = height;
}

GoogieSpell.prototype.setDecoration = function(bool) {
  this.decoration = bool;
}

GoogieSpell.prototype.dontUseCloseButtons = function() {
  this.use_close_btn = true;
}

GoogieSpell.prototype.appendNewMenuItem = function(name, call_back_fn, checker) {
  this.extra_menu_items.push([name, call_back_fn, checker]);
}

GoogieSpell.prototype.appendCustomMenuBuilder = function(eval, builder) {
  this.custom_menu_builder.push([eval, builder]);
}


GoogieSpell.prototype.setStateChanged = function(current_state) {
  this.state = current_state;
  if(this.spelling_state_observer != null && this.report_state_change)
    this.spelling_state_observer(current_state, this);
}

GoogieSpell.prototype.setReportStateChange = function(bool) {
  this.report_state_change = bool;
}

GoogieSpell.prototype.getGoogleUrl = function() {
  return this.server_url + GOOGIE_CUR_LANG;
}

// need .replace(/—/g, "—")
GoogieSpell.escapeSepcial = function(val) {
  return val.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

GoogieSpell.createXMLReq = function (text) {
  return '<?xml version="1.0" encoding="utf-8" ?><spellrequest textalreadyclipped="0" ignoredups="0" ignoredigits="1" ignoreallcaps="1"><text>' + text + '</text></spellrequest>';
}

GoogieSpell.prototype.spellCheck = function(ignore) {
  var me = this;

  this.cnt_errors_fixed = 0;
  this.cnt_errors = 0;
  this.setStateChanged("checking_spell");

  if(this.main_controller)
    this.appendIndicator(this.spell_span);

  this.error_links = [];
  this.ta_scroll_top = this.text_area.scrollTop;

  try { this.hideLangWindow(); }
  catch(e) {}
  
  this.createEditLayer(this.text_area.offsetWidth, this.text_area.offsetHeight);

  this.createErrorWindow();
  AJS.getBody().appendChild(this.error_window);

  try { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); } 
  catch (e) { }

  if(this.main_controller)
    this.spell_span.onclick = null;

  this.orginal_text = this.text_area.value;

  if(this.text_area.value == '' || ignore) {
    if(!me.custom_no_spelling_error)
      me.flashNoSpellingErrorState();
    else
      me.custom_no_spelling_error(me);
    me.removeIndicator();
    return ;
  }

GoogieSpell.prototype.showErrorWindow = function(elm, id) {
  if(this.show_menu_observer)
    this.show_menu_observer(this);
  var me = this;

  var abs_pos = AJS.absolutePosition(elm);
  abs_pos.y -= this.edit_layer.scrollTop;
  this.error_window.style.visibility = "visible";

  AJS.setTop(this.error_window, (abs_pos.y+20));
  AJS.setLeft(this.error_window, (abs_pos.x));

  this.error_window.innerHTML = "";

  var table = AJS.TABLE({'class': 'googie_list'});
  table.googie_action_btn = "1";
  var list = AJS.TBODY();

  //Check if we should use custom menu builder, if not we use the default
  var changed = false;
  if(this.custom_menu_builder != []) {
    for(var k=0; k<this.custom_menu_builder.length; k++) {
      var eb = this.custom_menu_builder[k];
      if(eb[0]((this.results[id]))){
        changed = eb[1](this, list, elm);
        break;
      }
    }
  }
  if(!changed) {
    //Build up the result list
    var suggestions = this.results[id]['suggestions'];
    var offset = this.results[id]['attrs']['o'];
    var len = this.results[id]['attrs']['l'];

    if(suggestions.length == 0) {
      var row = AJS.TR();
      var item = AJS.TD({'style': 'cursor: default;'});
      var dummy = AJS.SPAN();
      dummy.innerHTML = this.lang_no_suggestions;
      AJS.ACN(item, AJS.TN(dummy.innerHTML));
      item.googie_action_btn = "1";
      row.appendChild(item);
      list.appendChild(row);
    }

    for(i=0; i < suggestions.length; i++) {
      var row = AJS.TR();
      var item = AJS.TD();
      var dummy = AJS.SPAN();
      dummy.innerHTML = suggestions[i];
      item.appendChild(AJS.TN(dummy.innerHTML));
      
      var fn = function(e) {
        var l_elm = AJS.getEventElm(e);
        this.correctError(id, elm, l_elm);
      };

      AJS.AEV(item, "click", AJS.$b(fn, this));

      item.onmouseover = GoogieSpell.item_onmouseover;
      item.onmouseout = GoogieSpell.item_onmouseout;
      row.appendChild(item);
      list.appendChild(row);
    }

    //The element is changed, append the revert
    if(elm.is_changed && elm.innerHTML != elm.old_value) {
      var old_value = elm.old_value;
      var revert_row = AJS.TR();
      var revert = AJS.TD();

      revert.onmouseover = GoogieSpell.item_onmouseover;
      revert.onmouseout = GoogieSpell.item_onmouseout;
      var rev_span = AJS.SPAN({'class': 'googie_list_revert'});
      rev_span.innerHTML = this.lang_revert + " " + old_value;
      revert.appendChild(rev_span);

      var fn = function(e) { 
        this.updateOrginalText(offset, elm.innerHTML, old_value, id);
        elm.is_corrected = true;
        elm.style.color = "#cc0000";
        elm.innerHTML = old_value;
        this.hideErrorWindow();
      };
      AJS.AEV(revert, "click", AJS.$b(fn, this));

      revert_row.appendChild(revert);
      list.appendChild(revert_row);
    }
    
    //Append the edit box
    var edit_row = AJS.TR();
    var edit = AJS.TD({'style': 'cursor: default'});

    var edit_input = AJS.INPUT({'style': 'width: 97%; cursor: default;', 'value': elm.innerHTML});
    edit_input.googie_action_btn = "1";

    var onsub = function () {
      if(edit_input.value != "") {
        if(!AJS.isDefined(elm.old_value))
          this.saveOldValue(elm, elm.innerHTML);

        this.updateOrginalText(offset, elm.innerHTML, edit_input.value, id);
        elm.style.color = "#99cc66"
        elm.is_corrected = true;
        elm.innerHTML = edit_input.value;
        
        this.hideErrorWindow();
      }
      return false;
    };
    onsub = AJS.$b(onsub, this);
    
    var ok_pic = AJS.IMG({'src': this.img_dir + "ok.gif", 'style': 'width: 32px; height: 16px; margin-left: 0px; margin-top: 2px; cursor: pointer;'});
    var edit_form = AJS.FORM({'style': 'margin: 0; padding: 0; cursor: default;'}, edit_input, ok_pic);

    edit_form.googie_action_btn = "1";
    edit.googie_action_btn = "1";

    AJS.AEV(edit_form, "submit", onsub);
    AJS.AEV(ok_pic, "click", onsub);
    
    edit.appendChild(edit_form);
    edit_row.appendChild(edit);
    list.appendChild(edit_row);

    //Append extra menu items
    if(this.extra_menu_items.length > 0)
      AJS.ACN(list, this.createListSeparator());

    var loop = function(i) {
        if(i < me.extra_menu_items.length) {
          var e_elm = me.extra_menu_items[i];

          if(!e_elm[2] || e_elm[2](elm, me)) {
            var e_row = AJS.TR();
            var e_col = AJS.TD(e_elm[0]);

            e_col.onmouseover = GoogieSpell.item_onmouseover;
            e_col.onmouseout = GoogieSpell.item_onmouseout;

            var fn = function() {
              return e_elm[1](elm, me);
            };
            AJS.AEV(e_col, "click", fn);

            AJS.ACN(e_row, e_col);
            AJS.ACN(list, e_row);

          }
          loop(i+1);
        }
    }
    loop(0);
    loop = null;

    //Close button
    if(this.use_close_btn) {
      AJS.ACN(list, this.createCloseButton(this.hideErrorWindow));
    }
  }

  table.appendChild(list);
  this.error_window.appendChild(table);

  //Dummy for IE - dropdown bug fix
  if(AJS.isIe() && !this.error_window_iframe) {
    var iframe = AJS.IFRAME({'style': 'position: absolute; z-index: 0;'});
    AJS.ACN(AJS.getBody(), iframe);
    this.error_window_iframe = iframe;
  }
  if(AJS.isIe()) {
    var iframe = this.error_window_iframe;
    AJS.setTop(iframe, this.error_window.offsetTop);
    AJS.setLeft(iframe, this.error_window.offsetLeft);

    AJS.setWidth(iframe, this.error_window.offsetWidth);
    AJS.setHeight(iframe, this.error_window.offsetHeight);

    iframe.style.visibility = "visible";
  }

  //Set focus on the last element
  var link = this.createFocusLink('link');
  list.appendChild(AJS.TR(AJS.TD({'style': 'text-align: right; font-size: 1px; height: 1px; margin: 0; padding: 0;'}, link)));
  link.focus();
}


//////
// Edit layer (the layer where the suggestions are stored)
//////
GoogieSpell.prototype.createEditLayer = function(width, height) {
  this.edit_layer = AJS.DIV({'class': 'googie_edit_layer'});

//Set the style so it looks like edit areas
	this.edit_layer.className = this.text_area.className;
	this.edit_layer.style.font = "15px arial, verdana, sans-serif";
	this.edit_layer.style.border = "1px solid #7f9db9";
	this.edit_layer.style.backgroundColor = "#dce4ec";
	this.edit_layer.style.padding = "4px";
	this.edit_layer.style.whiteSpace = "normal";	
	this.edit_layer.style.margin = "0px";


  AJS.setWidth(this.edit_layer, (width-8));

  if(AJS.nodeName(this.text_area) != "input" || this.text_area.value == "") {
    this.edit_layer.style.overflow = "auto";
    AJS.setHeight(this.edit_layer, (height-6));
  }
  else {
    this.edit_layer.style.overflow = "auto";
  }

  if(this.edit_layer_dbl_click) {
    var me = this;
    var fn = function(e) {
      if(AJS.getEventElm(e).className != "googie_link" && !me.isErrorWindowShown()) {
        me.resumeEditing();
        var fn1 = function() {
          me.text_area.focus();
          fn1 = null;
        };
        AJS.callLater(fn1, 10);
      }
      return false;
    };
    this.edit_layer.ondblclick = fn;
    fn = null;
  }
}

GoogieSpell.prototype.resumeEditing = function() {
  this.setStateChanged("spell_check");
  this.switch_lan_pic.style.display = "inline";

  this.el_scroll_top = this.edit_layer.scrollTop;

  this.hideErrorWindow();

  //Remove the EDIT_LAYER
  try {
    this.edit_layer.parentNode.removeChild(this.edit_layer);
    if(this.use_focus) {
      AJS.removeElement(this.focus_link_t);
      AJS.removeElement(this.focus_link_b);
    }
  }
  catch(e) {
  }

  AJS.showElement(this.text_area);

  if(this.main_controller)
    this.spell_span.className = "googie_no_style";

  this.text_area.scrollTop = this.el_scroll_top;

  elm.onmouseout = null;

  this.checkSpellingState(false);
}

GoogieSpell.prototype.createErrorLink = function(text, id) {
  var elm = AJS.SPAN({'class': 'googie_link'});
  var me = this;
  var d = function (e) {
    me.showErrorWindow(elm, id);
    d = null;
    return false;
  };
  AJS.AEV(elm, "click", d);

  elm.googie_action_btn = "1";
  elm.g_id = id;
  elm.is_corrected = false;
  elm.oncontextmenu = d;
  elm.innerHTML = text;
  return elm;
}

GoogieSpell.createPart = function(txt_part) {
  if(txt_part == " ")
    return AJS.TN(" ");
  var result = AJS.SPAN();

  var is_first = true;
  var is_safari = (navigator.userAgent.toLowerCase().indexOf("safari") != -1);

  var part = AJS.SPAN();
  txt_part = GoogieSpell.escapeSepcial(txt_part);
  txt_part = txt_part.replace(/\n/g, "<br>");
  txt_part = txt_part.replace(/  /g, " &nbsp;");
  txt_part = txt_part.replace(/^ /g, "&nbsp;");
  txt_part = txt_part.replace(/ $/g, "&nbsp;");
 
  part.innerHTML = txt_part;

  return part;
}
[B]
GoogieSpell.prototype.showErrorsInIframe = function() {
  var output = AJS.DIV();
  output.style.textAlign = "left";
  var pointer = 0;
  var results = this.results;

  if(results.length > 0) {
    for(var i=0; i < results.length; i++) {
      var offset = results[i]['attrs']['o'];
      var len = results[i]['attrs']['l'];
      
      var part_1_text = this.orginal_text.substring(pointer, offset);
      var part_1 = GoogieSpell.createPart(part_1_text);
      output.appendChild(part_1);
      pointer += offset - pointer;
      
      //If the last child was an error, then insert some space
      var err_link = this.createErrorLink(this.orginal_text.substr(offset, len), i);
      this.error_links.push(err_link);
      output.appendChild(err_link);
      pointer += len;
    }
    //Insert the rest of the orginal text
    var part_2_text = this.orginal_text.substr(pointer, this.orginal_text.length);

    var part_2 = GoogieSpell.createPart(part_2_text);
    output.appendChild(part_2);
  }
  else
    output.innerHTML = this.orginal_text;

  var me = this;
  if(this.custom_item_evaulator)
    AJS.map(this.error_links, function(elm){me.custom_item_evaulator(me, elm)});
  
  AJS.ACN(this.edit_layer, output);


GoogieSpell.prototype.createSpellDiv = function() {
  var chk_spell = AJS.SPAN({'class': 'googie_check_spelling_link'});

  chk_spell.innerHTML = this.lang_chck_spell;
  var spell_img = null;
  if(this.show_spell_img)
    spell_img = AJS.IMG({'src': this.img_dir + "spell_initial.gif", 'style': 'height: 16px; width: 16px; vertical-align: top;'});
    
  return AJS.SPAN(spell_img, " ",chk_spell);
}


GoogieSpell.prototype.flashNoSpellingErrorState = function(on_finish) {
  var no_spell_errors;

  if(on_finish) {
    var fn = function() {
      on_finish();
      this.checkSpellingState();
    };
    no_spell_errors = fn;
  }
  else
    no_spell_errors = this.checkSpellingState;

  this.setStateChanged("no_error_found");

  if(this.main_controller) {
    AJS.hideElement(this.switch_lan_pic);

    var dummy = AJS.IMG({'src': this.img_dir + "spell_success.gif", 'style': 'height: 16px; width: 16px; vertical-align: top;'});
    var rsm = AJS.SPAN();
    rsm.innerHTML = this.lang_no_error_found;

    AJS.RCN(this.spell_span, AJS.SPAN(dummy, " ",rsm));

    this.spell_span.className = "googie_check_spelling_ok";
    this.spell_span.style.cursor = "default";

    AJS.callLater(AJS.$b(no_spell_errors, this), 1200, [false]);
  }
}

GoogieSpell.prototype.resumeEditingState = function() {
  this.setStateChanged("resume_editing");

  //Change link text to resume
  if(this.main_controller) {
    AJS.hideElement(this.switch_lan_pic);
    var dummy = AJS.IMG({'src': this.img_dir + "spell_errors.gif", 'style': 'height: 16px; width: 16px; vertical-align: top;'});
    var rsm = AJS.SPAN();
    rsm.innerHTML = this.lang_rsm_edt;
    AJS.RCN(this.spell_span, AJS.SPAN(dummy, " ",rsm));
  
    var fn = function(e) {
      this.resumeEditing();
    }
    AJS.AEV(this.spell_span, "click", AJS.$b(fn, this), true);

    this.spell_span.className = "googie_resume_editing";
  }
  try { this.edit_layer.scrollTop = this.ta_scroll_top; }
  catch(e) { }
}

GoogieSpell.prototype.checkSpellingState = function(fire) {
  if(!AJS.isDefined(fire) || fire)
    this.setStateChanged("spell_check");

  if(this.show_change_lang_pic)
    this.switch_lan_pic = this.createChangeLangPic();
  else
    this.switch_lan_pic = AJS.SPAN();
    //removed AJS.SPAN() and replaced with null

  var span_chck = this.createSpellDiv();
  var fn = function() {
    this.spellCheck();
  };

  if(this.custom_spellcheck_starter)
    span_chck.onclick = this.custom_spellcheck_starter;
  else {
    AJS.AEV(span_chck, "click", AJS.$b(fn, this), true);
  }

  this.spell_span = span_chck;
  if(this.main_controller) {
    if(this.change_lang_pic_placement == "right")
      AJS.RCN(this.spell_container, span_chck, " ", this.switch_lan_pic);
    else
      AJS.RCN(this.spell_container, this.switch_lan_pic, " ", span_chck);
  }
}


//////
// Misc. functions
/////
GoogieSpell.item_onmouseover = function(e) {
  var elm = AJS.getEventElm(e);
  if(elm.className != "googie_list_revert" && elm.className != "googie_list_close")
    elm.className = "googie_list_onhover";
  else
    elm.parentNode.className = "googie_list_onhover";
}
GoogieSpell.item_onmouseout = function(e) {
  var elm = AJS.getEventElm(e);
  if(elm.className != "googie_list_revert" && elm.className != "googie_list_close")
    elm.className = "googie_list_onout";
  else
    elm.parentNode.className = "googie_list_onout";
}

GoogieSpell.prototype.createCloseButton = function(c_fn) {
  return this.createButton(this.lang_close, 'googie_list_close', AJS.$b(c_fn, this));
}

GoogieSpell.prototype.createButton = function(name, css_class, c_fn) {
  var btn_row = AJS.TR();
  var btn = AJS.TD();

  btn.onmouseover = GoogieSpell.item_onmouseover;
  btn.onmouseout = GoogieSpell.item_onmouseout;

  var spn_btn;
  if(css_class != "") {
    spn_btn = AJS.SPAN({'class': css_class});
    spn_btn.innerHTML = name;
  }
  else {
    spn_btn = AJS.TN(name);
  }
  btn.appendChild(spn_btn);
  AJS.AEV(btn, "click", c_fn);
  btn_row.appendChild(btn);

  return btn_row;
}

GoogieSpell.prototype.removeIndicator = function(elm) {
  try { AJS.removeElement(this.indicator); }
  catch(e) {}
}

GoogieSpell.prototype.appendIndicator = function(elm) {
  var img = AJS.IMG({'src': this.img_dir + 'spell_working.gif', 'style': 'height: 16px; width: 16px; vertical-align: top;'});
  AJS.setWidth(img, 16);
  AJS.setHeight(img, 16);
  this.indicator = img;
  img.style.textDecoration = "none";
  try {
    AJS.insertBefore(img, elm);
  }
  catch(e) {}
}[/B]

GoogieSpell.prototype.createFocusLink = function(name) {
  return AJS.A({'href': 'javascript:;', name: name});
}

 

[BillyRayPreachersSon]

That seems like a whole lot of trouble and over-engineering just to swap out an image. Why not do it using basic JS rather than some over-complicated library routine? Something like this, assuming the image has an ID of "myImg":

var img = document.getElementById('myImg');
img.src = '/pathToNewImage/nameOfNewImage.gif';
img.height = x; // where x is the width of the new image
img.height = y; // where y is the height of the new image

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Oops - the "x" line should read "img.width = x;"

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[gwrman]

THanks for the reply. Since the whole spellchecking feature needs the routines, i cant really eliminate them. (nor do I have the skills to.) For this reason, i'd like to just try to edit what is there

 

[BillyRayPreachersSon]

Then perhaps you could give more detail about what AJS is?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[gwrman]

ajs.js

AJS = {
BASE_URL: "",
drag_obj: null,
drag_elm: null,
_drop_zones: [],
_cur_pos: null,

_unloadListeners: function() {
if(AJS.listeners)
AJS.map(AJS.listeners, function(elm, type, fn) {AJS.removeEventListener(elm, type, fn)});
AJS.listeners = [];
},
getElement: function(id) {
if(AJS.isString(id) || AJS.isNumber(id))
return document.getElementById(id);
else
return id;
},
isObject: function(obj) {
return (typeof obj == 'object');
},
isArray: function(obj) {
return obj instanceof Array;
},
removeElement: function(/*elm1, elm2...*/) {
var args = AJS.flattenList(arguments);
AJS.map(args, function(elm) { AJS.swapDOM(elm, null); });
},
isDict: function(o) {
var str_repr = String(o);
return str_repr.indexOf(" Object") != -1;
},
isDefined: function(o) {
return (o != "undefined" && o != null)
},
getIndex: function(elm, list/*optional*/, eval_fn) {
for(var i=0; i < list.length; i++)
if(eval_fn && eval_fn(list[i]) || elm == list[i])
return i;
return -1;
},
createDOM: function(name, attrs) {
var i=0, attr;
elm = document.createElement(name);
if(AJS.isDict(attrs[i])) {
for(k in attrs[0]) {
attr = attrs[0][k];
if(k == "style")
elm.style.cssText = attr;
else if(k == "class" || k == 'className')
elm.className = attr;
else {
elm.setAttribute(k, attr);
}
}
i++;
}
if(attrs[0] == null)
i = 1;
AJS.map(attrs, function(n) {
if(n) {
if(AJS.isString(n) || AJS.isNumber(n))
n = AJS.TN(n);
elm.appendChild(n);
}
}, i);
return elm;
},
nodeName: function(elm) {
return elm.nodeName.toLowerCase();
},
isIe: function() {
return (navigator.userAgent.toLowerCase().indexOf("msie") != -1 && navigator.userAgent.toLowerCase().indexOf("opera") == -1);
},
addEventListener: function(elm, type, fn, /*optional*/listen_once, cancle_bubble) {
if(!cancle_bubble)
cancle_bubble = false;
var elms = AJS.$A(elm);
AJS.map(elms, function(elmz) {
if(listen_once)
fn = AJS._listenOnce(elmz, type, fn);
if(AJS.isIn(type, ['submit', 'load', 'scroll', 'resize'])) {
var old = elm['on' + type];
elm['on' + type] = function() {
if(old) {
fn(arguments);
return old(arguments);
}
else
return fn(arguments);
};
return;
}
if (elmz.attachEvent) {
//FIXME: We ignore cancle_bubble for IE... hmmz
elmz.attachEvent("on" + type, fn);
}
else if(elmz.addEventListener)
elmz.addEventListener(type, fn, cancle_bubble);
AJS.listeners = AJS.$A(AJS.listeners);
AJS.listeners.push([elmz, type, fn]);
});
},
callLater: function(fn, interval) {
var fn_no_send = function() {
fn();
};
window.setTimeout(fn_no_send, interval);
},
swapDOM: function(dest, src) {
dest = AJS.getElement(dest);
var parent = dest.parentNode;
if (src) {
src = AJS.getElement(src);
parent.replaceChild(src, dest);
} else {
parent.removeChild(dest);
}
return src;
},
getLast: function(list) {
if(list.length > 0)
return list[list.length-1];
else
return null;
},
map: function(list, fn,/*optional*/ start_index, end_index) {
var i = 0, l = list.length;
if(start_index)
i = start_index;
if(end_index)
l = end_index;
for(i; i < l; i++)
fn.apply(null, [list[i]]);
},
getElementsByTagAndClassName: function(tag_name, class_name, /*optional*/ parent) {
var class_elements = [];
if(!AJS.isDefined(parent))
parent = document;
if(!AJS.isDefined(tag_name))
tag_name = '*';
var els = parent.getElementsByTagName(tag_name);
var els_len = els.length;
var pattern = new RegExp("(^|\\s)" + class_name + "(\\s|$)");
for (i = 0, j = 0; i < els_len; i++) {
if ( pattern.test(els[i].className) || class_name == null ) {
class_elements[j] = els[i];
j++;
}
}
return class_elements;
},
getRequest: function(url, data, type) {
//Extend the privlege so we can make cross host reqs
try { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); 
} catch (e) { }
if(!type)
type = "POST";
var req = AJS.getXMLHttpRequest();
if(url.indexOf("[URL unfurl="true"]http://")[/URL] == -1)
url = AJS.BASE_URL + url;
req.open(type, url, true);
if(type == "POST")
req.setRequestHeader("Content-type", "application/x-[URL unfurl="true"]www-form-urlencoded");[/URL]
return AJS._sendXMLHttpRequest(req);
},
isOpera: function() {
return (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
},
setLeft: function(/*elm1, elm2..., left*/) {
var args = AJS.flattenList(arguments);
var l = AJS.getLast(args);
AJS.map(args, function(elm) { elm.style.left = AJS.getCssDim(l)}, 0, args.length-1);
},
getBody: function() {
return AJS.$bytc('body')[0]
},
isSafari: function() {
return (navigator.userAgent.toLowerCase().indexOf("khtml") != -1);
},
showElement: function(/*elms...*/) {
var args = AJS.flattenList(arguments);
AJS.map(args, function(elm) { elm.style.display = ''});
},
removeEventListener: function(elm, type, fn, /*optional*/cancle_bubble) {
if(!cancle_bubble)
cancle_bubble = false;
if(elm.removeEventListener) {
elm.removeEventListener(type, fn, cancle_bubble);
if(AJS.isOpera())
elm.removeEventListener(type, fn, !cancle_bubble);
}
else if(elm.detachEvent)
elm.detachEvent("on" + type, fn);
},
_getRealScope: function(fn, /*optional*/ extra_args, dont_send_event, rev_extra_args) {
var scope = window;
extra_args = AJS.$A(extra_args);
if(fn._cscope)
scope = fn._cscope;
return function() {
//Append all the orginal arguments + extra_args
var args = [];
var i = 0;
if(dont_send_event)
i = 1;
AJS.map(arguments, function(arg) { args.push(arg) }, i);
args = args.concat(extra_args);
if(rev_extra_args)
args = args.reverse();
return fn.apply(scope, args);
};
},
_createDomShortcuts: function() {
var elms = [
"ul", "li", "td", "tr", "th",
"tbody", "table", "input", "span", "b",
"a", "div", "img", "button", "h1",
"h2", "h3", "br", "textarea", "form",
"p", "select", "option", "iframe", "script",
"center", "dl", "dt", "dd", "small",
"pre"
];
var createDOM = AJS.createDOM;
var extends_ajs = function(elm) {
var c_dom = "return createDOM.apply(null, ['" + elm + "', arguments]);";
var c_fun_dom = 'function() { ' + c_dom + '  }';
eval("AJS." + elm.toUpperCase() + "=" + c_fun_dom);
}
AJS.map(elms, extends_ajs);
AJS.TN = function(text) { return document.createTextNode(text) };
},
isNumber: function(obj) {
return (typeof obj == 'number');
},
_sendXMLHttpRequest: function(req, data) {
var d = new AJSDeferred(req);
var onreadystatechange = function () {
if (req.readyState == 4) {
var status = '';
try {
status = req.status;
}
catch(e) {};
if(status == 200 || status == 304 || req.responseText == null) {
d.callback();
}
else if(status == 500) {
alert(req.responseText);
}
else {
d.errback();
}
}
}
req.onreadystatechange = onreadystatechange;
return d;
},
bind: function(fn, scope, /*optional*/ extra_args, dont_send_event, rev_extra_args) {
fn._cscope = scope;
return AJS._getRealScope(fn, extra_args, dont_send_event, rev_extra_args);
},
setTop: function(/*elm1, elm2..., top*/) {
var args = AJS.flattenList(arguments);
var t = AJS.getLast(args);
AJS.map(args, function(elm) { elm.style.top = AJS.getCssDim(t)}, 0, args.length-1);
},
absolutePosition: function(elm) {
var posObj = {'x': elm.offsetLeft, 'y': elm.offsetTop};
if(elm.offsetParent) {
var temp_pos =	AJS.absolutePosition(elm.offsetParent);
posObj.x += temp_pos.x;
posObj.y += temp_pos.y;
}
// safari bug
if (AJS.isSafari() && elm.style.position == 'absolute' ) { 
posObj.x -= document.body.offsetLeft;
posObj.y -= document.body.offsetTop;
} 
return posObj;
},
appendChildNodes: function(elm/*, elms...*/) {
if(arguments.length >= 2) {
AJS.map(arguments, function(n) {
if(AJS.isString(n))
n = AJS.TN(n);
if(AJS.isDefined(n))
elm.appendChild(n);
}, 1);
}
return elm;
},
isString: function(obj) {
return (typeof obj == 'string');
},
getXMLHttpRequest: function() {
var try_these = [
function () { return new XMLHttpRequest(); },
function () { return new ActiveXObject('Msxml2.XMLHTTP'); },
function () { return new ActiveXObject('Microsoft.XMLHTTP'); },
function () { return new ActiveXObject('Msxml2.XMLHTTP.4.0'); },
function () { throw "Browser does not support XMLHttpRequest"; }
];
for (var i = 0; i < try_these.length; i++) {
var func = try_these[i];
try {
return func();
} catch (e) {
}
}
},
getEventElm: function(e) {
if(e && !e.type && !e.keyCode)
return e
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
return targ;
},
isIn: function(elm, list) {
var i = AJS.getIndex(elm, list);
if(i != -1)
return true;
else
return false;
},
replaceChildNodes: function(elm/*, elms...*/) {
var child;
while ((child = elm.firstChild)) 
elm.removeChild(child);
if (arguments.length < 2)
return elm;
else
return AJS.appendChildNodes.apply(null, arguments);
return elm;
},
keys: function(obj) {
var rval = [];
for (var prop in obj) {
rval.push(prop);
}
return rval;
},
insertBefore: function(elm, reference_elm) {
reference_elm.parentNode.insertBefore(elm, reference_elm);
return elm;
},
hideElement: function(elm) {
var args = AJS.flattenList(arguments);
AJS.map(args, function(elm) { elm.style.display = 'none'});
},
createArray: function(v) {
if(AJS.isArray(v) && !AJS.isString(v))
return v;
else if(!v)
return [];
else
return [v];
},
setWidth: function(/*elm1, elm2..., width*/) {
var args = AJS.flattenList(arguments);
var w = AJS.getLast(args);
AJS.map(args, function(elm) { elm.style.width = AJS.getCssDim(w)}, 0, args.length-1);
},
insertAfter: function(elm, reference_elm) {
reference_elm.parentNode.insertBefore(elm, reference_elm.nextSibling);
return elm;
},
getCssDim: function(dim) {
if(AJS.isString(dim))
return dim;
else
return dim + "px";
},
_listenOnce: function(elm, type, fn) {
var r_fn = function() {
AJS.removeEventListener(elm, type, r_fn);
fn(arguments);
}
return r_fn;
},
setHeight: function(/*elm1, elm2..., height*/) {
var args = AJS.flattenList(arguments);
var h = AJS.getLast(args);
AJS.map(args, function(elm) { elm.style.height = AJS.getCssDim(h)}, 0, args.length-1);
},
flattenList: function(list) {
var r = [];
var _flatten = function(r, l) {
AJS.map(l, function(o) {
if (AJS.isArray(o))
_flatten(r, o);
else
r.push(o);
});
}
_flatten(r, list);
return r;
}
}

AJS.$ = AJS.getElement;
AJS.$$ = AJS.getElements;
AJS.$f = AJS.getFormElement;
AJS.$b = AJS.bind;
AJS.$A = AJS.createArray;
AJS.DI = AJS.documentInsert;
AJS.ACN = AJS.appendChildNodes;
AJS.RCN = AJS.replaceChildNodes;
AJS.AEV = AJS.addEventListener;
AJS.REV = AJS.removeEventListener;
AJS.$bytc = AJS.getElementsByTagAndClassName;

AJS.addEventListener(window, 'unload', AJS._unloadListeners);
AJS._createDomShortcuts()

AJSDeferred = function(req) {
this.callbacks = [];
this.errbacks = [];
this.req = req;
};
AJSDeferred.prototype = {
excCallbackSeq: function(req, list) {
var data = req.responseText;
while (list.length > 0) {
var fn = list.pop();
var new_data = fn(data, req);
if(new_data)
data = new_data;
}
},
callback: function () {
this.excCallbackSeq(this.req, this.callbacks);
},
errback: function() {
if(this.errbacks.length == 0)
alert("Error encountered:\n" + this.req.responseText);
this.excCallbackSeq(this.req, this.errbacks);
},
addErrback: function(fn) {
this.errbacks.unshift(fn);
},
addCallback: function(fn) {
this.callbacks.unshift(fn);
},
addCallbacks: function(fn1, fn2) {
this.addCallback(fn1);
this.addErrback(fn2);
},
sendReq: function(data) {
if(AJS.isObject(data)) {
var post_data = [];
for(k in data) {
post_data.push(k + "=" + AJS.urlencode(data[k]));
}
post_data = post_data.join("&");
this.req.send(post_data);
}
else if(AJS.isDefined(data))
this.req.send(data);
else {
this.req.send("");
}
}
}

 

[BillyRayPreachersSon]

At a guess, it's because the "appendIndicator" function is appending the image to the document rather than replacing another one.

You'd need to either modify that function to replace another known element (which would break it annywhere else it was used), or write a new routine (using code such as the code I've already posted).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]