12 svar · 601 visningar · startad av SGuncel
Jag vill att man ska se hur sin chattema har blivit innan man sparar så jag kan inte mycket om javascript.
Typ när man väljer bakgrundsfärgen grön och text färgen röd så ska allt ändras på tabellen hur gör man det?
Det jag gjorde nu på koden med Id nåt där alla färger står. Det var bara test, skulle testa min fram men det gick inte så bra.
Ursäkta för att jag dubbel posta. Annars var tråden för lång.
Färger:
<select class="selectchattheme" name="chatthemecolorbackground" onchange="document.getElementById('ThemeColorBack').style='background-color:'+this[this.selectedIndex].value+';'">
<option value="">
(färg)
</option><option value="Black">
Black
</option><option value="Navy">
Navy
</option><option value="DarkBlue">
DarkBlue
</option><option value="MediumBlue">
MediumBlue
</option><option value="Blue">
Blue
</option><option value="DarkGreen">
DarkGreen
</option><option value="Green">
Green
</option><option value="Teal">
Teal
</option><option value="DarkCyan">
DarkCyan
</option><option value="DeepSkyBlue">
DeepSkyBlue
</option><option value="DarkTurquoise">
DarkTurquoise
</option><option value="MediumSpringGreen">
MediumSpringGreen
</option><option value="Lime">
Lime
</option><option value="SpringGreen">
SpringGreen
</option><option value="Aqua">
Aqua
</option><option value="Cyan">
Cyan
</option><option value="MidnightBlue">
MidnightBlue
</option><option value="DodgerBlue">
DodgerBlue
</option><option value="LightSeaGreen">
LightSeaGreen
</option><option value="ForestGreen">
ForestGreen
</option><option value="SeaGreen">
SeaGreen
</option><option value="DarkSlateGray">
DarkSlateGray
</option><option value="LimeGreen">
LimeGreen
</option><option value="MediumSeaGreen">
MediumSeaGreen
</option><option value="Turquoise">
Turquoise
</option><option value="RoyalBlue">
RoyalBlue
</option><option value="SteelBlue">
SteelBlue
</option><option value="DarkSlateBlue">
DarkSlateBlue
</option><option value="MediumTurquoise">
MediumTurquoise
</option><option value="Indigo">
Indigo
</option><option value="DarkOliveGreen">
DarkOliveGreen
</option><option value="CadetBlue">
CadetBlue
</option><option value="CornflowerBlue">
CornflowerBlue
</option><option value="MediumAquamarine">
MediumAquamarine
</option><option value="DimGray">
DimGray
</option><option value="SlateBlue">
SlateBlue
</option><option value="OliveDrab">
OliveDrab
</option><option value="SlateGray">
SlateGray
</option><option value="LightSlateGray">
LightSlateGray
</option><option value="MediumSlateBlue">
MediumSlateBlue
</option><option value="LawnGreen">
LawnGreen
</option><option value="Chartreuse">
Chartreuse
</option><option value="Aquamarine">
Aquamarine
</option><option value="Maroon">
Maroon
</option><option value="Purple">
Purple
</option><option value="Olive">
Olive
</option><option value="Gray">
Gray
</option><option value="SkyBlue">
SkyBlue
</option><option value="LightSkyBlue">
LightSkyBlue
</option><option value="BlueViolet">
BlueViolet
</option><option value="DarkRed">
DarkRed
</option><option value="DarkMagenta">
DarkMagenta
</option><option value="SaddleBrown">
SaddleBrown
</option><option value="DarkSeaGreen">
DarkSeaGreen
</option><option value="LightGreen">
LightGreen
</option><option value="MediumPurple">
MediumPurple
</option><option value="DarkViolet">
DarkViolet
</option><option value="PaleGreen">
PaleGreen
</option><option value="DarkOrchid">
DarkOrchid
</option><option value="YellowGreen">
YellowGreen
</option><option value="Sienna">
Sienna
</option><option value="Brown">
Brown
</option><option value="DarkGray">
DarkGray
</option><option value="LightBlue">
LightBlue
</option><option value="GreenYellow">
GreenYellow
</option><option value="PaleTurquoise">
PaleTurquoise
</option><option value="LightSteelBlue">
LightSteelBlue
</option><option value="PowderBlue">
PowderBlue
</option><option value="Firebrick">
Firebrick
</option><option value="DarkGoldenrod">
DarkGoldenrod
</option><option value="MediumOrchid">
MediumOrchid
</option><option value="RosyBrown">
RosyBrown
</option><option value="DarkKhaki">
DarkKhaki
</option><option value="Silver">
Silver
</option><option value="MediumVioletRed">
MediumVioletRed
</option><option value="IndianRed">
IndianRed
</option><option value="Peru">
Peru
</option><option value="Chocolate">
Chocolate
</option><option value="Tan">
Tan
</option><option value="LightGrey">
LightGrey
</option><option value="Thistle">
Thistle
</option><option value="Orchid">
Orchid
</option><option value="Goldenrod">
Goldenrod
</option><option value="PaleVioletRed">
PaleVioletRed
</option><option value="Crimson">
Crimson
</option><option value="Gainsboro">
Gainsboro
</option><option value="Plum">
Plum
</option><option value="BurlyWood">
BurlyWood
</option><option value="LightCyan">
LightCyan
</option><option value="Lavender">
Lavender
</option><option value="DarkSalmon">
DarkSalmon
</option><option value="Violet">
Violet
</option><option value="PaleGoldenrod">
PaleGoldenrod
</option><option value="LightCoral">
LightCoral
</option><option value="Khaki">
Khaki
</option><option value="AliceBlue">
AliceBlue
</option><option value="Honeydew">
Honeydew
</option><option value="Azure">
Azure
</option><option value="SandyBrown">
SandyBrown
</option><option value="Wheat">
Wheat
</option><option value="Beige">
Beige
</option><option value="WhiteSmoke">
WhiteSmoke
</option><option value="MintCream">
MintCream
</option><option value="GhostWhite">
GhostWhite
</option><option value="Salmon">
Salmon
</option><option value="AntiqueWhite">
AntiqueWhite
</option><option value="Linen">
Linen
</option><option value="LightGoldenrodYellow">
LightGoldenrodYellow
</option><option value="OldLace">
OldLace
</option><option value="Red">
Red
</option><option value="Fuchsia">
Fuchsia
</option><option value="Magenta">
Magenta
</option><option value="DeepPink">
DeepPink
</option><option value="OrangeRed">
OrangeRed
</option><option value="Tomato">
Tomato
</option><option value="HotPink">
HotPink
</option><option value="Coral">
Coral
</option><option value="DarkOrange">
DarkOrange
</option><option value="LightSalmon">
LightSalmon
</option><option value="Orange">
Orange
</option><option value="LightPink">
LightPink
</option><option value="Pink">
Pink
</option><option value="Gold">
Gold
</option><option value="PeachPuff">
PeachPuff
</option><option value="NavajoWhite">
NavajoWhite
</option><option value="Moccasin">
Moccasin
</option><option value="Bisque">
Bisque
</option><option value="MistyRose">
MistyRose
</option><option value="BlanchedAlmond">
BlanchedAlmond
</option><option value="PapayaWhip">
PapayaWhip
</option><option value="LavenderBlush">
LavenderBlush
</option><option value="SeaShell">
SeaShell
</option><option value="Cornsilk">
Cornsilk
</option><option value="LemonChiffon">
LemonChiffon
</option><option value="FloralWhite">
FloralWhite
</option><option value="Snow">
Snow
</option><option value="Yellow">
Yellow
</option><option value="LightYellow">
LightYellow
</option><option value="Ivory">
Ivory
</option><option value="White">
White
</option>
</select>
Html koden (tabellen):
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="71" id="ThemeColorBack" background="<%=ObjRS("Background")%>">
<tr>
<td width="58" height="71" style="padding: 3px;" valign="top">
<img src="../_Grafik/Pix.gif" width="3" height="20">
<img src="../ingenbild.gif">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="14">
<tr>
<td width="981" height="14" valign="top" style="padding: 3px;">
<a href="../profile.asp?usrId=<%=Server.HtmlEncode(Session("UsrID"))%>"><%=Server.HtmlEncode(Session("UsrTLAlias"))%></a>
| <strong>23:23 den 27 november 2007</strong>
</td>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="56">
<tr>
<td width="259" height="56" valign="top" style="padding: 3px;">
test meddelande
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript" language="JavaScript">
function changeColor(color)
{
document.getElementById("ThemeColorBack").bgColor = color;
}
</script>
<select class="selectchattheme" name="chatthemecolorbackground" onchange="changeColor(this[this.selectedIndex].value);">
Hur gör t.ex. om jag vill ändra:
meddelande text färgen, storlek och font..
Dinns det någon sida där man kan läsa hur man gör? :)
googla?
function changeTextColor(color){
document.getElementById("ThemeColorBack").style.color = color;
}
för text färgen.
Jo, men vad ska man typ googla?
Sök efter "Javascript change font size" kanske?
"Javascript tutorial change styles" mm..
Kan man inte ha så här:
<td width="259" height="56" valign="top" style="padding: 3px;" id="ThemeMessageFontSize ThemeMessageFontColor ThemeColorBack">
Så här ser Javascript koden ut:
<script LANGUAGE="JavaScript" TYPE="text/javascript">
function changeColor(color)
{
document.getElementById("ThemeColorBack").bgColor = color;
}
function changeTextColor(color){
document.getElementById("ThemeMessageFontColor").style.color = color;
} [B]Här är rad 52[/B]
function changeTextSize(size) {
document.getElementById('ThemeMessageFontSize').style.fontSize = size;
}
</script>
Får fel när jag försöker ha tre funktion på en cell.
Bakgrunds färg kan jag ändra, men när jag ska ändra färgen och storleken på texten får jag fel. Fel meddelande: Line 52 Object required
Du kan inte ha flera ID på samma html-tagg.
<td width="259" height="56" valign="top" style="padding: 3px;" id="ThemeMessageFontSize">
Låter som du inte riktigt har förstått vad ID-taggen är till för. Den används för att sätta ett ID på en html-tagg så man kan leta upp en specifik html-tagg i html-dokumentet.
<script LANGUAGE="JavaScript" TYPE="text/javascript">
function changeColor(color)
{
document.getElementById("ThemeMessageFontSize").bgColor = color;
}
function changeTextColor(color){
document.getElementById("ThemeMessageFontSize").style.color = color;
}
function changeTextSize(size) {
document.getElementById('ThemeMessageFontSize').style.fontSize = size;
}
</script>
Tackar för allt lösning. Men har något annat fråga.
<input type="text" name="ThemeMessageImageBack" class="inputchattheme" onchange="changeBgImage(this[this.selectedIndex].value);">
När man skriver in länk ska det ändras till bakgrund. Hur gör man det? Såg att det inte var samma som select :)
SGuncel skrev:
Tackar för allt lösning. Men har något annat fråga.
<input type="text" name="ThemeMessageImageBack" class="inputchattheme" onchange="changeBgImage(this[this.selectedIndex].value);">När man skriver in länk ska det ändras till bakgrund. Hur gör man det? Såg att det inte var samma som select :)
<input type="text" name="ThemeMessageImageBack" class="inputchattheme" onchange="changeBgImage(this.value);">
Nu vet jag inte vad funktionen changeBgImage gör eller vilka parametrar den ska ta emot. Vill du ha ut värdet av textboxen använder du this.value
Den gör så att man kan ha eget bakgrund. Man ska klistra in länken där.