Avatar billede henrik1975 Nybegynder
30. januar 2004 - 15:16 Der er 7 kommentarer og
2 løsninger

Farve vælger

Da jeg ikke er alt for prangende til at programmere Javascript, så har jeg brug for lidt hjælp.

Jeg har fundet et script som jeg gerne vil bruge på min hjemmeside til at lade brugerne vælge deres egne farveindstillinger. Men hvordan får jeg nedenstående script til at returnere Hex-værdien på den valgte farve i en <form> ???

Svaret må gerne skæres ud i pap.

<HTML>
<HEAD>
<TITLE>advanced colour picker</TITLE>


<SCRIPT language="JavaScript">
//<!--

ie = (navigator.appName.indexOf("Microsoft")!=-1);
ns = (navigator.appName.indexOf("Netscape") != -1);

ns4= (ns && navigator.appVersion.indexOf("5") == -1);
ns6= (ns && navigator.appVersion.indexOf("5") != -1);
ns6X = 0;
ns6Y = 0;

function changeColor(wcolour) {
    if (ie){
        document.all["pickcolour"].style.backgroundColor = '#' + wcolour;
        document.all["colorbox"].style.visibility = 'hidden';
    }
    if (ns4){
        document.layers["pickcolour"].bgColor = '#' + wcolour;
        document.layers["colorbox"].visibility = false;
    }
    if (ns6){
        document.getElementById("pickcolour").style.backgroundColor = '#' + wcolour;
        document.getElementById("colorbox").style.visibility = 'hidden';
    }
}

function showColor(posX,posY){
    if (ie){
        e = window.event;
        with (document.all["colorbox"]){
            style.left = e.clientX;
            style.top  = e.clientY;
            style.visibility = 'visible';
        }
    }
    if (ns4){
        with(document.layers["colorbox"]){
            top = posY +18;
            left = posX +17;
            visibility = true;
        }
    }
    if (ns6){
        with(document.getElementById("colorbox").style){
            top = ns6Y;
            left = ns6X;
            visibility = 'visible';
        }
    }

}

function ns6Get(e){
    ns6X = e.layerX;
    ns6Y = e.layerY;
    showColor(null,null);
}


// init function for NS6
function init() {
    if (ns6){
      cpicker = document.getElementById("pickcolour");
      cpicker.addEventListener("click", ns6Get, false);
    }
}


//-->
</SCRIPT>


<BODY bgcolor="#ffffff" onLoad="init()";>

Dette er en test<br>
<!-- --Colour picker image-- -->
<div id="pickcolour" style="position:absolute;background-color:#FFEEDD;width:50;height:50;overflow: hidden">
<a href="java script://" onClick="if(!ns6)showColor(this.x,this.y)">
<img src="colourpick2.gif" name="colorimage" width="50" height="50" border="0" alt=""></a>
</div>


<!-- --Colour drop down box-- -->
<div id="colorbox" style="position:absolute;visibility:hidden">
<table border=0 cellpadding=0 cellspacing=0 width=252 bgcolor="#000000">
<tr>
<td>
    <table border=0 bordercolor=#000000 cellpadding=0 cellspacing=1>
        <tbody>
        <tr>
                <script language=JavaScript>
                c = new Array();

                c[1] = "FF";
                c[2] = "CC";
                c[3] = "99";
                c[4] = "66";
                c[5] = "33";
                c[6] = "00";
                d = 0;

                for (i=1;i <=6;i++){
                    if (i >1){
                    document.write( "</tr>\n<tr>\n");
                    }
                    for (m=1;m <=6;m++){
                        for (n=1;n <=6;n++){
                            d++;
                            colour = c[i] + c[m] + c[n];
                            document.write("<td bgcolor=\"#"+colour+"\" width=7 class=\"text\"><a href=\"#\" onClick=\"changeColor('"+colour+"')\"><img src=\"pixel.gif\" width=7 height=7 name=\"a"+d+"\" border=0></td>\n");
                        }
                    }
                }
                </script>
        </tr>
        </tbody>
      </table>
</table>
</td>
</tr>
</table>
</div>
</BODY>
</HTML>
Avatar billede nute Nybegynder
30. januar 2004 - 15:57 #1
hmm ... er ikke helt sikker på om jeg forstår hvad du mener, men kan du ikke bare lægge hex-værdien ind i et form-felt ? Det eneste du behøver at gøre, er at lave et HTML element et sted på din side:

<form id="frm">
<input type="text" id="color">
</form>

derefter laver du lidt om på din changeColor function:

function changeColor(wcolour) {
    if (ie){
        document.all["pickcolour"].style.backgroundColor = '#' + wcolour;
        document.all["colorbox"].style.visibility = 'hidden';
        document.all["color"].value = wcolour;
    }
    if (ns4){
        document.layers["pickcolour"].bgColor = '#' + wcolour;
        document.layers["colorbox"].visibility = false;
        document.forms[0].color.value = wcolour;
    }
    if (ns6){
        document.getElementById("pickcolour").style.backgroundColor = '#' + wcolour;
        document.getElementById("colorbox").style.visibility = 'hidden';
        document.getElementById( "color" ).value = wcolour;
    }
}


/nute
Avatar billede skovenborg Nybegynder
30. januar 2004 - 16:02 #2
hvis du bare skal returnere den fra funktionen kan du bare gøre sådan:
function changeColor(wcolour) {
    if (ie){
        document.all["pickcolour"].style.backgroundColor = '#' + wcolour;
        document.all["colorbox"].style.visibility = 'hidden';
    }
    if (ns4){
        document.layers["pickcolour"].bgColor = '#' + wcolour;
        document.layers["colorbox"].visibility = false;
    }
    if (ns6){
        document.getElementById("pickcolour").style.backgroundColor = '#' + wcolour;
        document.getElementById("colorbox").style.visibility = 'hidden';
    }
    return "#"+wcolour;
}

Nåja, og hvis du bruger nute's forslag skal du jo også lige putte # foran wcolour når du smider den ind i formfeltet.
Avatar billede henrik1975 Nybegynder
01. februar 2004 - 17:07 #3
Det er skovenborg's løsning der skal bruges.
Men hvordan får jeg lagt returværdien ned i en form? Sagen er den at jeg gerne vil kunne læse returværdien vha. asp, så jeg kan lægge hex-værdien ned i en database. Så hvis jeg kunne få returværdien fra changecolor funktionen smidt i en skjult form, så kunne jeg bare aflæse den på modtagersiden.
Avatar billede nute Nybegynder
01. februar 2004 - 18:01 #4
hmm... hvis du skal lægge hex-værdien ned i en form, så er det mit forslag du skal bruge ... ikke skovenborg sit forslag. det er jo netop ´det mit forslag gør...
Avatar billede skovenborg Nybegynder
01. februar 2004 - 19:06 #5
hvis du absolut skal bruge mit kan du bare tilføje dette til sidste linie:
document.form1.tekstfelt.value = "#"+wcolour;

og så have en form et sted:
<form name="form1">
<input type="text" name="tekstfelt" />
</form>
Avatar billede henrik1975 Nybegynder
01. februar 2004 - 20:24 #6
Havde ikke lige læst nute's forslag ordentlig igennem. Det var faktisk hvad jeg manglede. Beklager.. Der er point til jer begge. Tak for hjælpen!
Avatar billede henrik1975 Nybegynder
01. februar 2004 - 20:25 #7
Smider i ikke lige begge et svar så jeg kan give jer point?
Avatar billede nute Nybegynder
01. februar 2004 - 20:28 #8
"svar"
Avatar billede skovenborg Nybegynder
01. februar 2004 - 21:49 #9
joda - men giv nute mest hvis du bruger hans :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester