Färgväljare med dropdown och textfield

3 svar · 323 visningar · startad av jonne 18 okt. 2004

jonneMedlem sedan jan. 20011 154 inlägg

Frågan18 okt. 2004 18:50#1

Eftersom mina JS kunskaper är väldigt begränsade och efter att ha letat runt utan framgång hoppas jag på att någon kan hjälpa mig.

Vad jag är ute efter är följande:

* En dropdown med fördefinerade färger
* Ett textfält som visar hexkoden från färgen man väljer i dropdownen. Hexkoden kan vara en manuell variabel. Behöver inte räknas ut automatiskt på något sätt
* Ett textfält/tabell som byter till färgen som man valt

Skulle gärna ha det på något sätt så att jag kan få tag på variablerna med ASP och använda dem i min kod.

nitro2k01Medlem sedan aug. 20039 340 inlägg

18 okt. 2004 19:18#2

En sådan kontroll har jag skrivit som du kan få använda om du ger mig credits.

jonneMedlem sedan jan. 20011 154 inlägg

18 okt. 2004 19:21#3

Självklart så ligger sådant alltid med i koden om det inte är en själv som skrivit det.
Jag lovar dock inte att jag kommer så långt med detta projekt att det når den breda allmänheten :)

Erik JuhlinMedlem sedan maj 200010 687 inlägg

19 okt. 2004 06:52#4

Något sånt här skulle kanske funka?

<%
Dim vColor, i
vColor = Array("Red", "#FF0000", "Blue", "#0000FF", "Green", "#00FF00", "Yellow", "#FFFF00", "Pink", "#FF00FF")
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body onLoad="setColor();">

<script type="text/javascript">
function setColor()
{
	var f = document.frm;
	var color = f.Color.options[f.Color.selectedIndex].value;
	
	f.ColorValue.value = color;
	
	if (document.getElementById)
		document.getElementById("ColorDisplay").style.backgroundColor = color;
}
</script>

<form name="frm">
<select name="Color" onChange="setColor();"><%
For i = 0 To Ubound(vColor) Step 2
	%>
	<option value="<%=vColor(i + 1)%>" style="background-color: <%=vColor(i + 1)%>;"><%=vColor(i)%></option><%
Next 'i
%>
</select>

<input type="text" name="ColorValue" value="">

<div id="ColorDisplay">&nbsp;</div>
</form>

</body>
</html>