Opção de cor e tamanho - Roupas

[blayck 0]

Caros amigos,

 

Gostaria de saber a lógica utilizada para as caixas de cor e tamanho para a escolha de roupas. Semelhante a utilizada na Netshoes, por exemplo. Lá, eles não usam botões "checkbox" ou botão "radio", mas uma espécie de imagem que, por ajax, insere um input no código do site. Não entendo como se recolhe a linha clicando input, de novo, na imagem.

 

Existe algum código exemplo? Existe incompatibilidade com navegadores? Gostaria de todas as informações possível. Agradeço demais desde já.

 

Att,

Júnior.

A propósito, já procurei sobre checkbox com imagens, mas só encontrei exemplos que mudam o "estilo" deles. Não tem como inserir uma imagem quadrada no fundo, como tema, sem o "X" marcado acima, como esses sites de venda de roupas fazem.

[xanburzum 169]

utiliza jQuery fica melhor e mais leve

[blayck 0]

xanburzum,

Ainda estou com a dúvida. Não ajudou muito...

[xanburzum 169]

você pode usar jqueruy para fazer o efeito, ao invés de usar silverlight ou flash. Através dos daos inseridos pelo user ele faz as modificações, podendo usar inclusive HTML5 Canvas e CSS3 para os efeitos. Em jQuery podemos fazer muitos tipos de animações a partir do método animate(), que nos serve para variar de uma maneira suavizada uma grande gama de propriedades CSS.

 

olha este exemplo:

 

HTML

<canvas id="star"></canvas>
<select id="star-color">
    <option value='{"r":240,"g":250,"b":0,"a":255}' selected>Amarelo</option>
    <option value='{"r":240,"g":0,"b":0,"a":255}'>Vermelho</option>
    <option value='{"r":0,"g":240,"b":0,"a":255}'>Verde</option>
    <option value='{"r":0,"g":0,"b":240,"a":255}'>Azul</option>
</select>

JS

(function(){
    
    var canvas  = document.getElementById( 'star' ),
        context = canvas.getContext( '2d' ),
        starImg = new Image(),
        colorSelect = document.getElementById( 'star-color' );
    
    canvas.width = 100;
    canvas.height= 100;
    
    starImg.addEventListener( 'load', drawStar, false );
    
    colorSelect.addEventListener( 'change', changeStarColor, false );
        
    function drawStar(){
        
        context.drawImage( starImg, 0, 0, canvas.width, canvas.height );
        
    }
 
    function changeStarColor(){
        
        var imageData = context.getImageData( 0, 0, canvas.width, canvas.height ),
            pixels    = imageData.data,
            newColor  = JSON.parse( this.value ),
            i, len;
        
        for( i = 0, len = pixels.length; i < len; i += 4 ) {
            
            //verifica se a faixa de cores do pixel atual está na faixa que queremos mudar, se sim, efetua a troca para os valores da cor escolhida
            if( pixels[i] >= 240 || pixels[i+1] >= 240 || pixels[i+2] >= 240 ) { //A cor não é preta

                pixels[i]  = newColor.r, //canal vermelho
                pixels[i+1]= newColor.g, //canal verde
                pixels[i+2]= newColor.b; //canal azul
                pixels[i+3]; //esse seria o canal alpha, não precisamos modificá-lo.
                
            }
            
        }
        
        //Coloca os pixels modificados de volta ao canvas.
        context.putImageData( imageData, 0, 0 );
    
    }
    
    //Usei a imagem codificada em Base64 para evitar erros, visto que ela se encontra hospedada em outro domínio.
    starImg.src = 'data:image/png;base64,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';   
    
}());

exemplo:

http://jsfiddle.net/JCMais/AUHaU/

[blayck 0]

Ah, entendi, agora. Vou estudar o código.