[JS] obramowanie img skrypt prawie idealny - do poprawy

[bblues]

Witajcie. W sieci znalazłem taki oto skrypt JS (pełen kod poniżej) służący do tworzenia ładnych ramek wokół grafik. Działa świetnie pod jednym warunkiem - pliki graficzne ramek są nieprzezroczyste. Gdy stworzyłem pliczki .PNG z częściową przezroczystością - "wychodzącą" na zewnątrz obrazka - wtedy nie jest już cacy. Wygląda to tak, jakby do całego bloku dodawana była wysokość/szerokość każdego elementu (z wyjątkiem lewej strony) - zobaczcie na skanie - i na całej długości/szerokości bloku pojawia się border krzyżujący się w rogach.


  ramka.jpg (Rozmiar: 66.6 KB / Pobrań: 9)

Przy nieprzezroczystych rogach ramki problem nie istnieje. Zależy mi jednak bardzo na przezroczystości. Z JS jestem kompletnie zielony. Czy ktoś z Was moi drodzy byłby tak dobry i zerknął na kod skryptu i pomógł go przerobić?

Kod:

/*
* Dynamic Image Borders v2.0
*
* Copyright (c) 2008 Daniel Marino (iamdanielmarino.com)
* Creative Commons Attribution 3.0 United States License
*
* Date: 07-14-2008
*/

//------------------------------------------------------------

// borderWidth is to be set to the number
// of pixels the size of the border is

var borderWidth = 10;

// imgFolder is to be set to the directory
// that the images are located in

var imgFolder = "images";

//------------------------------------------------------------

function windowOnLoad(f) {
    
    var prev = window.onload;
    window.onload = function() { if (prev) prev(); f(); }
    
}


function getElementsByClass(searchClass) {

    var classElements = new Array();
    var els = document.getElementsByTagName('*');
    var elsLen = els.length;
    var pattern = new RegExp("\\b"+searchClass+"\\b");

    for (i = 0, j = 0; i < elsLen; i++) {

        if (pattern.test(els[i].className)) {

            classElements[j] = els[i];
            j++;

         }
    }

    return classElements;

}

function addShadow() {

    var source = getElementsByClass('shadow');
    
    for (i = 0; i < source.length; i++) {

    newWidth = source[i].width + (borderWidth * 2);

    /* new page fragment */
    var fragment = document.createDocumentFragment();
    
    source[i].style.padding = '0 10px';
    source[i].style.backgroundImage = 'url(' + imgFolder + '/img-m-l.png)';
    source[i].style.backgroundRepeat = 'repeat-y';    
    source[i].style.backgroundPosition = 'left';
    
    /* div.imgContain     */
    var imgContain = document.createElement("div");
    imgContain.setAttribute('class', 'imgContain');
    imgContain.style.width = newWidth + 'px';
    imgContain.style.fontSize = '0';
    imgContain.style.backgroundImage = 'url(' + imgFolder + '/img-m-r.png)';
    imgContain.style.backgroundRepeat = 'repeat-y';    
    imgContain.style.backgroundPosition = 'right';
    
    
        /* div.imgHead
    var imgHead = document.createElement("div");
    imgHead.setAttribute('class', 'imgHead');
    imgHead.style.width = newWidth + 'px';
    imgHead.style.fontSize = '0';
    imgHead.style.backgroundImage = 'url(' + imgFolder + '/img-t-c.png)';    */

    
    /* div.imgHead        */
    var imgHead = document.createElement("div");
    imgHead.setAttribute('class', 'imgHead');
    imgHead.style.height = '10px';
    imgHead.style.backgroundImage = 'url(' + imgFolder + '/img-t-c.png)';
    imgHead.style.backgroundRepeat = 'repeat-x';
    

    /* div.tl */
    var tl = document.createElement("div");
    tl.setAttribute('class', 'tl');
    tl.style.width = '10px';
    tl.style.height = '10px';
    tl.style.cssFloat = 'left';
    tl.style.styleFloat = 'left';
    tl.style.backgroundImage = 'url(' + imgFolder + '/img-t-l.png)';

    /* div.tr */
    var tr = document.createElement("div");
    tr.setAttribute('class', 'tr');
    tr.style.width = '10px';
    tr.style.height = '10px';
    tr.style.cssFloat = 'right';
    tr.style.styleFloat = 'right';
    tr.style.backgroundImage = 'url(' + imgFolder + '/img-t-r.png)';
    
    /* div.imgFoot */
    var imgFoot = document.createElement("div");
    imgFoot.setAttribute('class', 'imgFoot');
    imgFoot.style.height = '10px';
    imgFoot.style.backgroundImage = 'url(' + imgFolder + '/img-b-c.png)';
    imgFoot.style.backgroundRepeat = 'repeat-x';    

    /* div.bl */
    var bl = document.createElement("div");
    bl.setAttribute('class', 'bl');
    bl.style.width = '10px';
    bl.style.height = '10px';
    bl.style.cssFloat = 'left';
    bl.style.styleFloat = 'left';
    bl.style.backgroundImage = 'url(' + imgFolder + '/img-b-l.png)';
    
    /* div.br */
    var br = document.createElement("div");
    br.setAttribute('class', 'br');
    br.style.width = '10px';
    br.style.height = '10px';
    br.style.cssFloat = 'right';
    br.style.styleFloat = 'right';
    br.style.backgroundImage = 'url(' + imgFolder + '/img-b-r.png)';

    /* Put them all together now */
    imgHead.appendChild(tl);
    imgHead.appendChild(tr);
    imgFoot.appendChild(bl);
    imgFoot.appendChild(br);
    imgContain.appendChild(imgHead);
    imgContain.appendChild(source[i].cloneNode(true));
    imgContain.appendChild(imgFoot);

    /* put imgContain in page fragment */
    fragment.appendChild(imgContain);

    /* replace source with new fragment (contains a copy of source) */
    source[i].parentNode.replaceChild(fragment, source[i]);
    
    }
    
}

windowOnLoad(addShadow);

Z góry dziękuję.
Zdrówka
bblues

[Kartofelek]

Kupa nie dobry skrypt. Złe podejscie do tworzenia ramek. Nawet logika w nim kuleje. Przecież jak chcesz zrobić ramkę to:
tworzysz 4 boki i 4 kąty. Ten skrypt tworzy 4 boki i kupe.

Ps - do tego nie potrzeba skryptu. Zwykłe stylowanie wystarczy.

Lepiej skorzystaj z "CSS3" i jego "border image" - poszukaj w google. Albo poszukaj innego skryptu.