desired_output.js

example_string = "http://localhost:3000/images/icons/drop_down_triangle_rollover.png"

// need to make 
example_string = "http://localhost:3000/images/icons/drop_down_triangle_active_rollover.png"

// firebug returns this:

// >>> "http://localhost:3000/images/icons/drop_down_triangle_rollover.png?".replace(/((:?_rollover)?.png)/, ('_active' + $1 ))
// "http://localhost:3000/images/icons/drop_down_triangle_active[object HTMLDivElement]?"

lowpro.js

ImageToggler = $.klass(Toggler, {
  initialize: function() {
    this.img_src = this.element.attr('src');
    this.active_image = this.element.attr('src').replace(/.png|_rollover.png/, '_active.png');
    this.normal_image = this.element.attr('src').replace(/_active/, '');
  },
  onclick: function() {    
    img = this.element.attr('src')
    if (this.element.attr('src').match(/_active/)) {
      this.element.attr('src', img.replace(/_active/, ''))
    } 
    else {
      // trying to optionally return _active_rollover.png, or _active.png,
      this.element.attr('src', img.replace(/((_rollover)?.png)/, ('_active' + $1 )));
    }
  }
});

sample img srcs

four states needed:

standard:
http://localhost:3000/images/icons/drop_down_triangle.png

standard rollover:
http://localhost:3000/images/icons/drop_down_triangle.png

active:
http://localhost:3000/images/icons/drop_down_triangle_rollover.png
active rollover:
http://localhost:3000/images/icons/drop_down_triangle_active_rollover.png