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 />
<div id="some-id"></div>
<br />
<br />
<b>Activated by click</b>.
<br />
Click the top and bottom of the image.
<br />
<div id="some-other-id"></div>

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 DIV element
            if(this.length==0||this.length>1||this[0].tagName!='DIV')
                $.error('$.imageSwitch() - Unexpected value passed for option: selector.');
        //~ Create objects and default options
            var _this=this,
                defaultOption={
                area:[
                    {
                        image:'',
                        shape:''
                    }
                ],
                callback:function(){},
                onHover:true
            },
            option=$.extend({},defaultOption,option);
        //~ Check and throw errors for invalid options
            option.area=$.map(option.area,
                function(value,index){
                    return [value];
                }
             );
            _this.last=0;
            if(typeof option.area!='object'||option.area.length<2)
                $.error('$.imageSwitch() - Unexpected value specified for option: area.');
            if(!(defaultOption.callback&&defaultOption.callback.constructor&&defaultOption.callback.call&&defaultOption.callback.apply))
                $.error('$.imageSwitch() - Unexpected value specified for option: callback.');
            $(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))
                         ...