在叠加上点击改变图像的不透明度

我在谷歌地图上有一个覆盖，覆盖包含两个图像。我想改变图像的不透明度，当用户点击覆盖或在覆盖内的图像的顶部。我试过使用domlistener，但它似乎不起作用。下面是代码，如果有任何帮助就太好了。

function initialize() {
 
  var myLatlng = new google.maps.LatLng(31.6167,65.7167);
  var mapProp = {
	zoom:9,
	center: myLatlng,
  	mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    panControl: false, 
	scaleControl: false,
	touchmove: false
   
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
  var swBound = new google.maps.LatLng(31.35,64.69);
  var neBound = new google.maps.LatLng(31.95,65.39);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  var srcImg = 'Capture.png';
  var srcImg_2 = 'Lof1.png';
  overlay = new USGSOverlay(bounds, srcImg,srcImg_2, map);
 
	} 
function USGSOverlay(bounds, image, img, map) {
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.img_ = img;
 
  this.div_ = null;
  this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  img.className= 'lof_class';
  div.appendChild(img);
  var image = document.createElement('img');
  image.src = this.img_;
  image.style.width = '100%';
  image.style.height = '100%';
  image.style.position = 'absolute';
  image.className= 'lof_class';
  div.className= 'carousel';
  div.style.cursor= 'pointer';
  div.setAttribute("data-slide","1");
  div.appendChild(image);
 
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
   var me = this;
   google.maps.event.addDomListener(div, 'click', function() {
   image.style.opacity= '0.5';
  });
  
};