Kleur veranderen door keuze in dropmenu ?

Status
Niet open voor verdere reacties.
yammaski

yammaski

Gebruiker
Lid geworden
9 mrt 2005
Berichten
284
Op mijn site kun je in een dropdownmenu een kleur kiezen voor je gekozen product.
Nu worden die producten (tekeningen/stickers) als zwart getoond (attach).
De images zijn "transparante gif's". Nu zou ik willen als men in de lijst een kleur kiest, dat het "gifje" die kleur krijgt.
Of misschien beter de transparante gif's negatief (wit in tekening hier) maken èn in dezelfde kleur als de achtergrond van de page, en dan de achtergrond van kleur laten veranderen (het gele). Zie screenshot :

ColorChoiceBG.JPG


Ik dacht aan javascript, is dit te mogelijk ?


Yam.
 

Bijlagen

  • ColorChoice.JPG
    ColorChoice.JPG
    60,3 KB · Weergaven: 39
Javascript kan heel goed oppikken welke kleur is geselecteerd.

Er zijn verschillende mogelijkheden, en zelf heb je al een aardige verzonnen. Nu, dit is dus het idee:

[JS]function selecteerColor(elem)
{
//verkrijg de kleur

//verander de achtergrond kleur van je background-div
}[/JS]
HTML: 
<select onchange='selecteerColor(this);' ...=...>
   <!-- options -->
</select>
nu, heb je wat source-code van je html pagina? Dan kunnen we eens zien hoe dit het makkelijkste te doen is.



:thumb:
 
Hallo,

Ik dacht dat deze methode makkelijker zou zijn dan alle gif's zelf te veranderen.
Dit is mijn code tot hiertoe en zo werkt het. Maar ik moet wel voor de "option value" de hexacode voor de kleur ingeven ipv de colornaam.
Deze colornaam komt in een overzicht van de klant z'n bestelling, dus moet de colornaam juist zijn. Aan die hexacode hebben ze niets :), zie attach :
OptionValue.JPG

De "gele" kleuren staan al in hexa ...


Code: 
<html><head>
<title>ColorChange</title>
<script language="javascript" type="text/javascript"> 

function changeBG(color)
{
var element = document.getElementById('BG_Color_prShots').style;
{
element.background = color;
} 
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<table width="440" border="0" align="center" cellpadding="0">
  <tr align="center">
    <td><div style= width:"1px" id="BG_Color_prShots"><img src="baby 15.png"></div></td>
  </tr>
  <tr align="center">
    <td><form>
                          <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="50%" align="center">
                                &nbsp;<select name="FrogStyling_1_Color_Add" onChange="changeBG(this.value)">
                                  <option value="Black" style="background-color:#000000; color:#FFFFFF ">Black</option>
                                  <option value="White" selected="selected" style="background-color:#FFFFFF; color:#000000 ">White</option>
                                  <option value="#FFB400"  style="background-color:#FFB400; color:#000000 ">Golden Yellow</option>
                                  <option value="#FFD200"  style="background-color:#FFD200; color:#000000 ">Sun Yellow</option>
                                  <option value="#FFE600" style="background-color:#FFE600; color:#000000 ">Light Yellow</option>
                                    <option value="Dark Red" style="background-color:#D70000; color:#FFFFFF ">Dark Red</option>
                                    <option value="Light Red" style="background-color:#FA0000; color:#FFFFFF ">Light Red</option>
                                    <option value="Orange" style="background-color:#FF8200; color:#FFFFFF ">Orange</option>
                                    <option value="Bordeaux" style="background-color:#960028; color:#FFFFFF ">Bordeaux</option>
                                    <option value="Light Violet" style="background-color:#9900BE; color:#FFFFFF ">Light Violet</option>
                                    <option value="Telemagenta" style="background-color:#FF69A3; color:#FFFFFF ">Telemagenta</option>
                                    <option value="Steel Blue" style="background-color:#003F79; color:#FFFFFF ">Steel Blue</option>
                                    <option value="Striking Blue" style="background-color:#2A00D5; color:#FFFFFF ">Striking Blue</option>
                                    <option value="Traffic Blue" style="background-color:#0076FF; color:#FFFFFF ">Traffic Blue</option>
                                    <option value="Turquoise" style="background-color:#00CDAD; color:#FFFFFF ">Turquoise</option>
                                    <option value="Dark Green" style="background-color:#005E00; color:#FFFFFF ">Dark Green</option>
                                    <option value="Grass Green" style="background-color:#00A048; color:#FFFFFF ">Grass Green</option>
                                    <option value="Yellow Green" style="background-color:#6ED72F; color:#FFFFFF ">Yellow Green</option>
                                    <option value="Brown" style="background-color:#7C3500; color:#FFFFFF ">Brown</option>
                                    <option value="Anthracite" style="background-color:#444243; color:#FFFFFF ">Anthracite</option>
                                    <option value="Dark Grey" style="background-color:#505050; color:#FFFFFF ">Dark Grey</option>
                                    <option value="Telegrey" style="background-color:#BEBEBE; color:#000000 ">Telegrey</option>
                                    <option value="Light Grey" style="background-color:#E6E6E6; color:#000000 ">Light Grey</option>
                                    <option value="Silver Grey" style="background-color:#C0C0C0; color:#FFFFFF ">Silver Grey</option>
                                    <option value="Gold" style="background-color:#927530; color:#FFFFFF ">Gold</option>
                                </select>
                              </td>
                            </tr>
                          </table>
<br />
                          <br />
                        </form></td>
  </tr>
</table>



</body>
</html>
 
Hier, een verbeterde functie:
[js]function changeBG(select)
{
var sel = select.options[select.selectedIndex]; /* de geselecteerde optie */
var elem = document.getElementById('BG_Color_prShots'); /* output */

//doe de magie!
elem.style.backgroundColor = sel.style.backgroundColor;
}[/js]deze werkt als het goed is wel :)
Ohja, je select moet nog zo worden:
HTML: 
<select name="FrogStyling_1_Color_Add" onChange="changeBG(this)">
(dus zonder de .value in je parameter).


:thumb:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan