jqImgBlurEffects - Unblur Part Of Image On Mouse Over And On Click

This article is continuation of previous artcle. jqImgBlurEffects plugin is supports svg shapes - circle, ellipse, rectangle for mouse over and click event. You can define delay time to hide displayed shape. Observe below hml markup and this is sample html markup

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7OAlly4Mc9eoXELtdZHe5uKwwb0bPm25DZpoYEPTR8dIBpSpV6_c2cy5qGJ6trxbs2UR28VNLI9LSPEt4RhG9q9LMHpJNeZ2_Ruiu_bUmg_GK66bNaoGD2VXLAIBqtY_-IUY5S73DEQ/s912/inNature.JPG" class="myImg" width="750px">

Import jquery and jqImgBlurEffects

<script src="jquery-1.11.3.min.js"></script>
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

Circle - MouseOver

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        circle : {
            r : 100
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Click here to see DEMO

Ellipse - MouseOver

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        ellipse : {
            rx : 100,
            ry : 50
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Click here to see DEMO

Rectangle - MouseOver

var myOptns = {
    stdDeviation : 4,
    smouseover : {
        rectangle : {
            width : 180,
            height : 60
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Click here to see DEMO

These below examples are for click event. Open demo and click on the blurred image

Circle - Click

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        circle : {
            r : 100
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Click here to see DEMO

Ellipse - Click

var myOptns = {
    stdDeviation : 7,
    smouseover : {
        ellipse : {
            rx : 100,
            ry : 50
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Click here to see DEMO

Rectangle - Click

var myOptns = {
    stdDeviation : 4,
    smouseover : {
        rectangle : {
            width : 180,
            height : 60
        }
    }
};

$(".myImg").jqImgBlur(myOptns);

Click here to see DEMO

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary