Como crear un configurador en jquery

De wikipedia_IndianWebs
Saltar a: navegación, buscar

Primer paso

Lo primero que tenemos que hacer es grabar en una carpeta las imágenes con diferentes colores. Esto se consigue abriendo photoshop, reemplazando el color y guardandola.

Inserta este código antes del body

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
     $(document).ready(function() {
        
        $('.cabina-bronce').mouseover(function() {
            $('input#color_cabina').attr("value", "bronce");
			$('#cabina').html('<img src="images/cabina-galaxy-bronce.jpg" mce_src="images/cabina-galaxy-bronce.jpg" />');
		});
		$('.cabina-amarillo').mouseover(function() {
            $('input#color_cabina').attr("value", "amarillo");
			$('#cabina').html('<img src="images/cabina-galaxy-amarillo.jpg" mce_src="images/cabina-galaxy-amarillo.jpg" />');
		});
		$('.cabina-verde').mouseover(function() {
            $('input#color_cabina').attr("value", "verde");
			$('#cabina').html('<img src="images/cabina-galaxy-verde.jpg" mce_src="images/cabina-galaxy-verde.jpg" />');
		});
		$('.cabina-azul').mouseover(function() {
            $('input#color_cabina').attr("value", "azul");
			$('#cabina').html('<img src="images/cabina-galaxy-azul.jpg" mce_src="images/cabina-galaxy-azul.jpg" />');
		});
		$('.cabina-lila').mouseover(function() {
            $('input#color_cabina').attr("value", "lila");
			$('#cabina').html('<img src="images/cabina-galaxy-lila.jpg" mce_src="images/cabina-galaxy-lila.jpg" />');
		});
		$('.cabina-negro').mouseover(function() {
            $('input#color_cabina').attr("value", "negro");
			$('#cabina').html('<img src="images/cabina-galaxy-negro.jpg" mce_src="images/cabina-galaxy-negro.jpg" />');
		});
		$('.cabina-verdeclaro').mouseover(function() {
            $('input#color_cabina').attr("value", "verdeclaro");
			$('#cabina').html('<img src="images/cabina-galaxy-verdeclaro.jpg" mce_src="images/cabina-galaxy-verdeclaro.jpg" />');
		});
		$('.cabina-gris').mouseover(function() {
            $('input#color_cabina').attr("value", "gris");
			$('#cabina').html('<img src="images/cabina-galaxy-gris.jpg" mce_src="images/cabina-galaxy-gris.jpg" />');
		});
		$('.cabina-blanco').mouseover(function() {
            $('input#color_cabina').attr("value", "blanco");
			$('#cabina').html('<img src="images/cabina-galaxy-blanco.jpg" mce_src="images/cabina-blanco.jpg" />');
		});
		$('.cabina-rojo').mouseover(function() {
            $('input#color_cabina').attr("value", "rojo");
			$('#cabina').html('<img src="images/cabina-galaxy-rojo.jpg" mce_src="images/cabina-galaxy-rojo.jpg" />');
		});
        
    });
// ]]></script>

Segundo paso

A continucación creamos una tabla con dos columnas una con los colores y la otra con la capa donde iremos sustituyendo las imágenes.


<table border="0">
  <tr>
    <td valign="top" width="220">Cabina GALAXY: <div id="cabina" style="z-index: 0;"> <img src="images/cabina-galaxy-naranja.jpg" alt="" />  </div></td>
    <td valign="top"><p>Colores disponibles:
    
    </p>
<span class="cabina-amarillo" style="cursor: pointer;"><img src="images/amarillo.png" alt="giallo" align="absmiddle" title="giallo" /> Amarillo</span><br>
            <span class="cabina-bronce" style="cursor: pointer;"><img src="images/bronce.png" alt="bronce" align="absmiddle" title="bronce" /> Bronce</span> <br>
            <span class="cabina-verde" style="cursor: pointer;"><img src="images/verde.png" alt="verde" align="absmiddle" title="verde" /> Verde</span> <br>
            <span class="cabina-verdeclaro" style="cursor: pointer;"><img src="images/verdeclaro.png" alt="verde chiaro" align="absmiddle" title="verde chiaro" /> Verde claro</span> <br>
            <span class="cabina-azul" style="cursor: pointer;"><img src="images/azul.png" alt="blu" align="absmiddle" title="blu" /> Azul</span> <br>
            <span class="cabina-gris" style="cursor: pointer;"><img src="images/gris.png" alt="grigio" align="absmiddle" title="grigio" /> Gris</span> <br>
            <span class="cabina-negro" style="cursor: pointer;"><img src="images/negro.png" alt="nero" align="absmiddle" title="nero" /> Negro</span> <br>
            <span class="cabina-lila" style="cursor: pointer;"><img src="images/lila.png" alt="lilla" align="absmiddle" title="lilla" /> Lila</span> <br>
            <span class="cabina-blanco" style="cursor: pointer;"><img src="images/blanco.png" alt="bianco" align="absmiddle" title="bianco" /> Blanco</span> <br>
            <span class="cabina-rojo" style="cursor: pointer;"><img src="images/rojo.png" alt="rosso" align="absmiddle" title="rosso" /> Rojo</span> <br>
    <p>&nbsp;</p></td>
  </tr>
</table>

Tercer paso

Colgarlo en internet. --Montse (discusión) 17:34 20 jun 2012 (CEST)

Herramientas personales
Espacios de nombres

Variantes
Acciones
Navegación
Herramientas
Compartir
Categorías
Apps
[×] CSS
[×] Diseño
Google
[×] Joomla
[×] Magento
[×] Mobile
[×] RRHH
[×] YouTube