Most of us don't even use image maps anymore. But occasionally, mostly when freelancing, you will need to work with the pages that were created in mid 90's and image maps where pop stars in that era. Anyway to refresh your memory here is how HTML image map looks like:

<img src="bigImage.gif" usemap="#parts" />  
<map name="parts">  
  <area shape="rect" coords="20,6,200,60" href="http://www.boo.uz">  
  <area shape="circle" coords="100,200,50" href="http://www.google.com">  
</map>

To access HTML image map area attributes and properties use something like this:

$('area').click(function() { 
    var url = $(this).attr('href'); 
    var coords = $(this).attr('coords').split(','); 

    // Your code here 

    // To prevent default action 
  return false; 
});

This is all that I have on jQuery and image maps.

Today I was working on new category browser UI for the project I am working. I had to select the innermost element and append some more content into it. Basically, I had an HTML like this:

<div>Outermost element 
  <div>Some Text 
    <div>Evenmore text 
      <div>Who cares anymore? 
        <div>Innermost Element</div> 
      </div> 
    </div> 
  </div> 
</div>

So I needed to select the innermost div and append another div to it. There is no jQuery selector but you can use selectors that exist to achieve this goal. The innermost element would be the last div with the only-child.

$('div:only-child:last'); 

// Change background color to gray 
$('div:only-child:last').css('background-color',"#ccc");

The very basic of Object-Oriented Programming (OOP) is private fields and public methods (not considering features like polymorphism, inheritance, etc). So how to achieve this very basic of OOP in JavaScript. It turns out to be easy. Here is how to have private fields in your custom JavaScript functions/classes and using methods of your function/class to amend it.

function User() { 
  var name = ''; 
  return { 
    setName: function(newName) { 
      name = newName; 
    }, 
    getName: function() { 
      return name; 
    } 
  } 
} 
var user = User(); 
user.setName("My Name"); 
user.getName(); // My Name

The User() class we just created could be considered a bean in Java. Using this template you can have as many private fields and public methods as you want.

Recently I was reading about extending jQuery's functionality and plugin system. I wrote two articles on extending jQuery functionality with your own custom functions.  To extend you write $.fn.myFunction and then your function. It was interesting what $.fn is, so I look through the jQuery code and on line 33 found:

jQuery.fn = jQuery.prototype = {

So jQuery's fn is just a synonym for its prototype. I know this is not a discovery of the century but it gives you some understanding of how jQuery's plug-in system works and its insights.

Following jQuery performance related articles here is another tip to boost your jQuery code performance. You should use ID selections whenever you can. Because jQuery uses browser's native getElementById() function which is much faster.

Now back to JavaScript code performance testing. I have an unordered list with 1000 items. First test will have list items with class attributes and the second list will have id attributes set to its items.

console.time('test');  
for (i = 0; i < 500; i++) {  
    $('.'+i);  
}  
console.timeEnd('test'); 
// ~8204ms 

console.time('test');  
for (i = 0; i < 500; i++) {  
    $('#'+i);  
}  
console.timeEnd('test'); 
// ~32ms

As you can see selecting with element's #id is much faster. In our case 256 times (8204/32).