JSFiddle - React, Tailwind, and code Playground

by Stev Peifer

HTML

<b>Activated by click and hover</b>.
<br />
Hover over the left and right of the image.
<br />
<img id="some-id" />
<br />
<br />
<b>Activated by click</b>.
<br />
Click the top and bottom of the image.
<br />
<img id="some-other-id" />

JavaScript

/*
 * Image Switch - One Switch To Rule Them All.
 * By Stev Peifer (http://www.tip.it)
*/
(
    function($){
        $.fn.imageSwitch=function(option){
        //~ Check to ensure it was only called on one IMG element
            if(this.length==0)
                $.error('$.imageSwitch() - No elements found.');  
            if(this.length>1)
                $.error('$.imageSwitch() - Too many elements found.');
            if(this[0].tagName!='IMG')
                $.error('$.imageSwitch() - Wrong element type found.');
        //~ Create objects and default options
            var defaultOption={
                area:[
                    {
                        image:'',
                        shape:''
                    }
                ],
                onHover:true
            },
            option=$.extend({},defaultOption,option),
            _this=this;
        //~ Check and throw errors for invalid options
            option.area=$.map(option.area,
                function(value,index){
                    return [value];
                }
             );
            if(typeof option.area!='object'||option.area.length<2)
                $.error('$.imageSwitch() - Unexpected value specified for option: area.');
            $(option.area).each(
                function(){
                    if(typeof this.image!='string'||this.image=='')
                        $.error('$.imageSwitch() - Unexpected value specified for option: area.image.');
                    if(typeof this.shape!='string'||this.shape==''||this.shape.split(',').length!=4)
                        $.error('$.imageSwitch() - Unexpected value specified for option: area.shape.');
                    $(this.shape.split(',')).each(
                        function(){
                            if(isNaN(this))
                                $.error('$.imageSwitch() - Unexpected value specified for option: area.shape.');
                        }
                    );
               ...