Module Vision

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="div-dvc">
    <button id="dvc-aut" class="btndvc fa fa-desktop" title="Auto"></button>
    <button id="dvc-pho" class="btndvc fa fa-mobile " title="Old Phone"></button>
    <button id="dvc-spp" class="btndvc fa fa-mobile-phone fa-lg" title="Smartphone Portrait"></button>
    <button id="dvc-spl" class="btndvc fa fa-mobile-phone fa-rotate-90 fa-lg" title="Smartphone Landscape"></button>
    <button id="dvc-tap" class="btndvc fa fa-tablet fa-lg" title="Tablet Portrait"></button>
    <button id="dvc-tal" class="btndvc fa fa-tablet fa-rotate-90 fa-lg" title="Tablet Landscape"></button>
</div>
<br>
<table class="dvc-table">
    <td>
        <p align="center">
            <iframe class="dvc-aut" src="http://jsfiddle.net/" />
        </p>
    </td>
</table>

CSS

.div-dvc {
    border: 0px;
    display:inline;
    position:fixed;
    top:0;
    z-index: 2;
}
.btndvc {
    vertical-align: middle;
    border-radius:10px;
    border:0px solid;
    width:35px;
    height:35px;
    background:#A4A4A4;
    z-index:3;
}
.dvc-table {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    z-index:1;
}
.dvc-pho {
    border-image-slice: 61 24 132 25;
    border-image-width: 61px 24px 132px 25px;
    border-image-outset: 59px 22px 130px 23px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/2qddiwy.png");
    width:240px;
    height:320px;
    display:inherit;
}
.dvc-spp {
    border-image-slice: 122 21 125 22;
    border-image-width: 122px 21px 125px 22px;
    border-image-outset: 120px 19px 123px 20px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/1zztlj.png");
    width:320px;
    height:480px;
    display:inherit;
}
.dvc-spl {
    border-image-slice: 21 122 22 125;
    border-image-width:21px 122px 22px 125px;
    border-image-outset: 19px 120px 20px 123px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i61.tinypic.com/2cxszrl.png");
    width:480px;
    height:320px;
    display:inherit;
}
.dvc-tap {
    border-image-slice: 114 96 114 96;
    border-image-width: 114px 96px 114px 96px;
    border-image-outset: 112px 94px 112px 94px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i58.tinypic.com/fwq4bl.png");
    width:767px;
    height:1024px;
    display:inherit;
}
.dvc-tal {
    border-image-slice: 96 114 96 114;
    border-image-width: 96px 114px 96px 114px;
    border-image-outset: 94px 112px 94px 112px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/2nc2ag9.png");
    width:1024px;
    height:767px;
    display:inherit;
}

JavaScript

$(document).ready(function () {

    $("#dvc-aut").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tap dvc-tal");
    });
    $("#dvc-pho").click(function () {
        $(".dvc-aut").removeClass("dvc-spp dvc-spl dvc-tap dvc-tal").addClass("dvc-pho");
    });
    $("#dvc-spp").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spl dvc-tap dvc-tal").addClass("dvc-spp");
    });
    $("#dvc-spl").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-tap dvc-tal").addClass("dvc-spl");
    });
    $("#dvc-tap").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tal").addClass("dvc-tap");
    });
    $("#dvc-tal").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tap").addClass("dvc-tal");
    });
});