RoryO/iconfun.html

## iconfun.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hi</title>
  </head>

  <body>
    <div>
      <img src="http://dl.dropbox.com/u/2319758/8da9c71644444e2da508896d745f35f0_7.jpg" alt="Friend" class="addIcon" />
    </div>

    <script type="text/javascript">
      /* we are assuming several things that are not defined in the problem
        -browser is very, very basic (not even IE8 level), so things like css :hover aren't going to work
        -no helper libraries
        -the img element is always wrapped in a container element that only contains the img. this is because you can't have
         child elements of images
        -the DOM is loaded and ready and calls the init() function at that time, which sort of was done here
        -the width and height attribtues are not set on the target img element (shame, shame)
        -problem says 'picture size changes' but doesn't specify WHEN it would, so we are assuming that the function is generic
         to the point that it will work for any size image, but the target image size won't change after loading
         meaning: no element observers needed

         this does have a problem on the mousing over the image in some browsers can cause a mouseout event. a more targeted
         approach is needed to fix that, like targeting container divs by class name. that requires a robust support library
         since a full spectrum browser approach to finding all elements by a css style selector is too hard and stupid
      */
      var IconFun = {
        iconURL: "http://facebook.com/favicon.ico",

        addIconTo: function () {
          "use strict";
          var xpos, ypos, iconElement;
          xpos = this.clientHeight - IconFun.iconImage.height;
          ypos = this.clientWidth - IconFun.iconImage.width;
          iconElement = IconFun.iconImage.cloneNode();
          iconElement.style.position = "absolute";
          iconElement.style.top = xpos;
          iconElement.style.left = ypos;
          this.parentNode.appendChild(iconElement);
        },

        removeIconFrom: function () {
          "use strict";
          var images = this.parentNode.getElementsByTagName("IMG"),
            i;
          for (i = 0; i <= images.length; i += 1) {
            if (images[i].className.match(/taggedWithIcon/) !== null) {
              this.parentNode.removeChild(images[i]);
            }
          }
        },

        init: function () {
          "use strict";
          var images = document.getElementsByTagName("IMG"),
            i;

          IconFun.iconImage = new Image();
          IconFun.iconImage.src = IconFun.iconURL;
          IconFun.iconImage.className = "taggedWithIcon";
          //no images on the page
          if (images.length === 0) {
            return;
          }

          for (i = 0; i < images.length; i += 1) {
            //check to see if theres an addIcon class to identify any images that need hover over icons
            if (images[i].className.match(/addIcon/) !== null) {
              if (images[i].addEventListener) {
                images[i].addEventListener("mouseover", IconFun.addIconTo, true);
                images[i].addEventListener("mouseout", IconFun.removeIconFrom, true);
              } else {
              //IIIIIIIIINTERNET EEEEEEEEEEXPLORER
                images[i].attachEvent("mouseover", IconFun.addIconTo);
                images[i].attachEvent("mouseout", IconFun.removeIconFrom);
              }
            }
          }
        }
      };

  </script>
  <script type="text/javascript">
    if (window.addEventListener) {
      window.addEventListener("load", IconFun.init, false);
    } else {
      window.attachEvent("load", IconFun.init, false);
    }
  </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hi</title>
	</head>

	<body>
	<div>
	<img src="http://dl.dropbox.com/u/2319758/8da9c71644444e2da508896d745f35f0_7.jpg" alt="Friend" class="addIcon" />
	</div>

	<script type="text/javascript">
	/* we are assuming several things that are not defined in the problem
	-browser is very, very basic (not even IE8 level), so things like css :hover aren't going to work
	-no helper libraries
	-the img element is always wrapped in a container element that only contains the img. this is because you can't have
	child elements of images
	-the DOM is loaded and ready and calls the init() function at that time, which sort of was done here
	-the width and height attribtues are not set on the target img element (shame, shame)
	-problem says 'picture size changes' but doesn't specify WHEN it would, so we are assuming that the function is generic
	to the point that it will work for any size image, but the target image size won't change after loading
	meaning: no element observers needed

	this does have a problem on the mousing over the image in some browsers can cause a mouseout event. a more targeted
	approach is needed to fix that, like targeting container divs by class name. that requires a robust support library
	since a full spectrum browser approach to finding all elements by a css style selector is too hard and stupid
	*/
	var IconFun = {
	iconURL: "http://facebook.com/favicon.ico",

	addIconTo: function () {
	"use strict";
	var xpos, ypos, iconElement;
	xpos = this.clientHeight - IconFun.iconImage.height;
	ypos = this.clientWidth - IconFun.iconImage.width;
	iconElement = IconFun.iconImage.cloneNode();
	iconElement.style.position = "absolute";
	iconElement.style.top = xpos;
	iconElement.style.left = ypos;
	this.parentNode.appendChild(iconElement);
	},

	removeIconFrom: function () {
	"use strict";
	var images = this.parentNode.getElementsByTagName("IMG"),
	i;
	for (i = 0; i <= images.length; i += 1) {
	if (images[i].className.match(/taggedWithIcon/) !== null) {
	this.parentNode.removeChild(images[i]);
	}
	}
	},

	init: function () {
	"use strict";
	var images = document.getElementsByTagName("IMG"),
	i;

	IconFun.iconImage = new Image();
	IconFun.iconImage.src = IconFun.iconURL;
	IconFun.iconImage.className = "taggedWithIcon";
	//no images on the page
	if (images.length === 0) {
	return;
	}

	for (i = 0; i < images.length; i += 1) {
	//check to see if theres an addIcon class to identify any images that need hover over icons
	if (images[i].className.match(/addIcon/) !== null) {
	if (images[i].addEventListener) {
	images[i].addEventListener("mouseover", IconFun.addIconTo, true);
	images[i].addEventListener("mouseout", IconFun.removeIconFrom, true);
	} else {
	//IIIIIIIIINTERNET EEEEEEEEEEXPLORER
	images[i].attachEvent("mouseover", IconFun.addIconTo);
	images[i].attachEvent("mouseout", IconFun.removeIconFrom);
	}
	}
	}
	}
	};

	</script>
	<script type="text/javascript">
	if (window.addEventListener) {
	window.addEventListener("load", IconFun.init, false);
	} else {
	window.attachEvent("load", IconFun.init, false);
	}
	</script>
	</body>
	</html>