Site icon Wireframe

이미지의 크기를 알려주는 북마클릿

이미지 사이즈를 체크해서 title 속성으로 넣어주는 스크립트. 북마클릿으로 만들어서 손쉽게 웹페이지의 이미지들의 가로/세로 크기값 및 CSS에서 지정한 가로/세로 값을 툴팁으로 알려줌. 일일이 인스펙터에서 확인하기 귀찮아서 만듬.

javascript:/*Lastest Version*/
(function(){
    var latestVersion = '1.8.2';
    var jQueryEnabled = false;
    if(window.jQuery === undefined || window.jQuery.fn.jquery < latestVersion){
        var script = document.createElement('script');
        script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/'+latestVersion+'/jquery.min.js';
        script.onload = script.onreadystatechagne = initMyjQuery;
        document.getElementsByTagName('HEAD')[0].appendChild(script);
    }
    else {
        initMyBookmarklet();
    }
    function initMyjQuery(){
        if($ === undefined){
            $ = jQuery;
        }
        jQueryEnabled = true;
        initMyBookmarklet();
    }
    function initMyBookmarklet(){
        var ai = $('img');
        for (i=0;
             i<ai.length;
             i++) {
         var ii = $(ai[i]);
         ii.attr('title', 'width : ' + (ii.attr('width')?ii.attr('width'):'----') + ' X height: ' + (ii.attr('height')?ii.attr('height'):'----') + '\n CSS ==> ' + (ii.css('width')?ii.css('width'):'----') + ' X ' + (ii.css('height')?ii.css('height'):'----:'));
        }
    }
})();

 

Exit mobile version