Hjælp til brug af script / sti fejl

Hejsa. Jeg vil gerne have stylet nogle select bokse, og jeg har også fundet ud af, hvordan man gør det med javascript - nemlig ved brug af bl.a. dette script: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Det virker perfekt, hvis jeg bare laver en mappe på et andet domæne og putter filerne ind i samme niveau. Men ligeså snart jeg putter nogle filer ind i forskellige mapper, og der er noget .htaccess på, så bliver billedet ikke vist - men bortset fra det, så fungerer det. Derfor går jeg ud fra, at det er fordi, der er nogle fejl i stien. Men selvom jeg ligger billedet i nærmest alle mapper og har prøvet mange forskellige stier, så virker det bare ikke.

Jeg ved simpelthen ikke, hvad jeg skal gøre, jeg synes nærmest jeg har prøvet alt - så derfor spørger jeg her.

Rettelse: Jeg tror måske, der er en anden mulighed. Det ser ikke ud til, at den span, som scriptet skal lave, bliver lavet her. Kan det være det, der er problemet? Det virkede bare "på test domænet", så jeg kan ikke se hvor en forkert sti eller .htaccess skulle påvirke det.

Oversigt over hvordan filerne ligger

/hentboksere.php (der hvor select skal vises)
/style.css
/ress/formstyling.php (der hvor js scriptet er i)
/ress/head.php (hertil hentes js scriptet + css scriptet. Denne fil bliver så lagt ind i alle filer, fx hentboksere.php)
/img/select.png (billedet)

Den relevante del af hentboksere.php

 <!-- head.php er inkluderet korrekt -->
 
 <select class="styled" name="osLand">
 <option value="dk">Danmark</option>
 <option value="de">Tyskland</option>
 <option value="gb">England</option>
 <option value="usa">USA</option>
 </select>

Den relevenate del af style.css

 .select {
     position: absolute;
     width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
     height: 21px;
     padding: 0 24px 0 8px;
     color: #fff;
     font: 12px/21px arial,sans-serif;
     background: url("/img/select.png") no-repeat;
     overflow: hidden;
 }

Formstyling.php

 /*
 
 CUSTOM FORM ELEMENTS
 
 Created by Ryan Fait
 www.ryanfait.com
 
 The only things you may need to change in this file are the following
 variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
 
 The numbers you set for checkboxHeight and radioHeight should be one quarter
 of the total height of the image want to use for checkboxes and radio
 buttons. Both images should contain the four stages of both inputs stacked
 on top of each other in this order: unchecked, unchecked-clicked, checked,
 checked-clicked.
 
 You may need to adjust your images a bit if there is a slight vertical
 movement during the different stages of the button activation.
 
 The value of selectWidth should be the width of your select list image.
 
 Visit http://ryanfait.com/ for more information.
 
 */
 
 var checkboxHeight = "25";
 var radioHeight = "25";
 var selectWidth = "190";
 
 
 /* No need to change anything after this */
 
 
 document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
 
 var Custom = {
     init: function() {
         var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
         for(a = 0; a < inputs.length; a++) {
             if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
                 span[a] = document.createElement("span");
                 span[a].className = inputs[a].type;
 
                 if(inputs[a].checked == true) {
                     if(inputs[a].type == "checkbox") {
                         position = "0 -" + (checkboxHeight*2) + "px";
                         span[a].style.backgroundPosition = position;
                     } else {
                         position = "0 -" + (radioHeight*2) + "px";
                         span[a].style.backgroundPosition = position;
                     }
                 }
                 inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                 inputs[a].onchange = Custom.clear;
                 if(!inputs[a].getAttribute("disabled")) {
                     span[a].onmousedown = Custom.pushed;
                     span[a].onmouseup = Custom.check;
                 } else {
                     span[a].className = span[a].className += " disabled";
                 }
             }
         }
         inputs = document.getElementsByTagName("select");
         for(a = 0; a < inputs.length; a++) {
             if(inputs[a].className == "styled") {
                 option = inputs[a].getElementsByTagName("option");
                 active = option[0].childNodes[0].nodeValue;
                 textnode = document.createTextNode(active);
                 for(b = 0; b < option.length; b++) {
                     if(option[b].selected == true) {
                         textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
                     }
                 }
                 span[a] = document.createElement("span");
                 span[a].className = "select";
                 span[a].id = "select" + inputs[a].name;
                 span[a].appendChild(textnode);
                 inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                 if(!inputs[a].getAttribute("disabled")) {
                     inputs[a].onchange = Custom.choose;
                 } else {
                     inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
                 }
             }
         }
         document.onmouseup = Custom.clear;
     },
     pushed: function() {
         element = this.nextSibling;
         if(element.checked == true && element.type == "checkbox") {
             this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
         } else if(element.checked == true && element.type == "radio") {
             this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
         } else if(element.checked != true && element.type == "checkbox") {
             this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
         } else {
             this.style.backgroundPosition = "0 -" + radioHeight + "px";
         }
     },
     check: function() {
         element = this.nextSibling;
         if(element.checked == true && element.type == "checkbox") {
             this.style.backgroundPosition = "0 0";
             element.checked = false;
         } else {
             if(element.type == "checkbox") {
                 this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
             } else {
                 this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
                 group = this.nextSibling.name;
                 inputs = document.getElementsByTagName("input");
                 for(a = 0; a < inputs.length; a++) {
                     if(inputs[a].name == group && inputs[a] != this.nextSibling) {
                         inputs[a].previousSibling.style.backgroundPosition = "0 0";
                     }
                 }
             }
             element.checked = true;
         }
     },
     clear: function() {
         inputs = document.getElementsByTagName("input");
         for(var b = 0; b < inputs.length; b++) {
             if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
                 inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
             } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
                 inputs[b].previousSibling.style.backgroundPosition = "0 0";
             } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
                 inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
             } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
                 inputs[b].previousSibling.style.backgroundPosition = "0 0";
             }
         }
     },
     choose: function() {
         option = this.getElementsByTagName("option");
         for(d = 0; d < option.length; d++) {
             if(option[d].selected == true) {
                 document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
             }
         }
     }
 }
 window.onload = Custom.init;

Head.php (2 ting trukket ud)

 <link href="/style.css" type="text/css" rel="stylesheet">
 
 <script type="text/javascript" src="/ress/formstyling.js"></script>

Det er meget at kigge på, det ved jeg godt - men jeg vil blive meget taknemmelig, hvis nogle kan hjælpe mig!

Mvh. Christian

PS: Hvis live eksempel ønskes, er det muligt.