▼ categoriasHow to Let Website Visitors Change the Background and Text Colors
You can add fun functionality to your website by letting your visitors change the text and background colors with simple dropdown menus. Try it:
To add this option to your website, you need to create HTML id tags for the area in which the background color and text color will be changed. Then create two drop down menus with your choice of colors.
(Step 1) Open your site in an HTML editor or Notepad so that you can edit the code by hand. First make sure that you have a DOCTYPE specified before the opening HTML tag. For instance, something like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(Step 2) Identify the area of your website where you want the colors to be changed and add this pair of div tags to the beginning of that section:
Now add this pair of closing tags at the end of the section:(Step 1) Open your site in an HTML editor or Notepad so that you can edit the code by hand. First make sure that you have a DOCTYPE specified before the opening HTML tag. For instance, something like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(Step 2) Identify the area of your website where you want the colors to be changed and add this pair of div tags to the beginning of that section:
If you save and compile, you'll notice that nothing has changed yet. This is because we haven't yet added the color-change script and dropdown menus. The id tags serve as name references for the next step.
(Step 3)
Locate the area where you want visitors to access the dropdown menus. Copy and paste these lines of HTML and JavaScript code:
Notice where the id tags are referenced by the "getElementById" commands. This code generates a set of dropdown menus with four background colors and four text colors. Each color is uniquely identified by a 6-digit hexadecimal number, as seen within the quotation marks.
You can easily add more color choices by following the template and inserting additional option tags. To find more colors and their hex codes, see either this resource or this resource.
fonte:
had2know.
traduzido:
Como permitir que os visitantes do site mudar o fundo e cores de texto
Você pode adicionar funcionalidades divertidas para o seu site, permitindo que seus visitantes mudar o texto e cores de fundo com simples menus drop-down.
Experimente:
Para adicionar esta opção para o seu site, você precisa criar tags HTML id para a área em que a cor de fundo e cor do texto será alterado. Em seguida, crie dois menus drop down com sua escolha de cores. (Passo 1) Abra o seu site em um editor de HTML ou o Bloco de notas para que você possa editar o código manualmente. Primeiro, verifique se você tem um DOCTYPE especificado antes da tag HTML de abertura. Por exemplo, algo como <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">
(Passo 2)
Identificar a área do seu site onde deseja que as cores para ser mudado e adicionar este par de tags div para o início dessa seção:
Agora adicione este par de marcas de fechamento no final
da seção:
Se você salvar e compilar, você vai perceber que nada mudou ainda. Isto é porque nós ainda não adicionou o script de mudança de cor e menus drop-down.As tags ID de servir como referências de nome para a próxima etapa. (Etapa 3)Localize a área onde você quer que os visitantes para aceder aos menus drop-down. Copie e cole essas linhas de código HTML e JavaScript:
<table width=300 border=0><tr>
<td align=center><form name=bcolors>Background<br><select NAME=bgc size=4
onChange="document.getElementById('changemybg').style.backgroundColor=bgc.
<td align=center><form name=bcolors>Background<br><select NAME=bgc size=4
onChange="document.getElementById('changemybg').style.backgroundColor=bgc.
options[selectedIndex].value">
<option VALUE="#FFFFFF">White </option>
<option VALUE="#F0F0FF">Light Blue </option>
<option VALUE="#FFFFD4">Light Yellow </option>
<option VALUE="#EEEEEE">Light Gray </option>
</select></form></td>
<td align="center"><form name=tcolors>Text<br><select NAME=tc size=4
onChange="document.getElementById('changemytext').style.color=tc.options
<option VALUE="#FFFFFF">White </option>
<option VALUE="#F0F0FF">Light Blue </option>
<option VALUE="#FFFFD4">Light Yellow </option>
<option VALUE="#EEEEEE">Light Gray </option>
</select></form></td>
<td align="center"><form name=tcolors>Text<br><select NAME=tc size=4
onChange="document.getElementById('changemytext').style.color=tc.options
[selectedIndex].value">
<option VALUE="#000000">Black </option>
<option VALUE="#444444">Charcoal </option>
<option VALUE="#000088">Dark Blue </option>
<option VALUE="#117722">Dark Green </option>
</select></form></td>
</tr></table>
<option VALUE="#000000">Black </option>
<option VALUE="#444444">Charcoal </option>
<option VALUE="#000088">Dark Blue </option>
<option VALUE="#117722">Dark Green </option>
</select></form></td>
</tr></table>
Observe que as etiquetas de identificação são referenciados pelo "getElementById" comandos. Este código gera um conjunto de menus dropdown com quatro cores de fundo e quatro cores de texto. Cada cor é unicamente identificado por um número hexadecimal de 6 dígitos, como visto dentro das aspas. Você pode facilmente adicionar mais opções de cores, seguindo o modelo e inserir as tags opção adicional. Para encontrar mais cores e seus códigos hex, quer ver esse recurso ou este recurso .
