How do I run javascript to revert what some code in an embedded script resource just did?

Question

So, I'm working on a mapping application. In the app there are these toolbars and based on certain circumstances I would like to disable specific tools. When a tool is disabled it's image changes. This part works fine.

Now, there is all this Javascript that is in embedded script resources that is ran when certain actions occur, like selecting a tool. I have no power over this Javascript.

What happens is some Javascript gets ran that essentially changes the image back from it's disabled one to it's default one. This is bad.

I'd like to know if there is any way to tell if the code from the script resource has ran or any way to see when the image has been changed so I can immediately change it back. Essentially over-riding the code in the script resource.

To word it differently, whenever this icons image changes from the disabled one to the enabled one via this specific javascript code, can I immediately change it back to the disabled image?

Answer 1

Although I think this is some ugly workaround, you can do this:

Let's say the id of the image that you want to change back to disabled image when enabled by third part javascripts is "image1" then:

disable = function() {
   $("image1").src = "lalala"; // lala being you disabled image URI
   $("image1").observe("load", function(e) {
       if(this.src != "lalala") this.src = "lalala";
   });
}

What you will be doing is observing the load of the image, and checking its src attribute. If it was changed, change it back to your desired value.

Oh, this snippet is using PrototypeJS methods. Sure you can translate that to your preferred JS framework or pure javascript.