Efeito ao passar o mouse por cima de uma area

[marcosfj1 0]

Seguinte galera to tentando fazer algo mas to meio perdido de como comecar. Acredito que envolva JavaScript, alias quase ctz hehe, mas não sei como comecar mesmo.

 

O que eu quero fazer é o seguinte

 

Uploaded with ImageShack.us

 

Como podem ver isso é um print da loja netshoes, onde o cliente escolhe a cor e em seguida o tamanho do sapato....eu já tenho um sistema assim no meu site, porem não consigo fazer este destaque do numeros escolhidos. Por exemplo ali em selecionei o 41 e clique, então ele fica selecionado de azul.....já o 38 eu estava com o mouse em cima dele.

 

então eu queria fazer estes efeitos, claro o efeito em si eu crio proprio, mas como q eu poderia fazer para ter este tipo de efeito, qual comando seria?

 

Eu pesquisando achei um tal de onmouseover q parece fazer o q desejo, mas nao to conseguindo. O que eu quero é no seguinte codigo eu tenho:

 

<div style="[b]width:16px;height:16px[/b];background-color:<?=$background_color ?>;margin:4px;float:left;padding:2px;"><a href="javascript:void(0)" style="text-decoration:none;color:#FFF" [b]onmouseOver = ""[/b] '">    </a></div>

 

Veja as partes em negrito, eu queria que ao passar o mouse por cima os campo width16px; height16px; que sao os tamanhos da pequena imagem gerada pela variavel $background_color, mudasse para 20px por exemplo assim qdo o cliente estivesse em cima dessa imagem ela seria maior q as outras

 

Alguem pode me ajudar como eu faço para ter este controle do tamanho

 

Valeu

 

======================================================================================================

======================================================================================================

 

Alguem pode me ajudar

 

Fiz algo aqui atraves de um script que arrumei na internet q consegui fazer ele aumentar a div em q meu mouse esta. Porem ela apenas aumenta, e mesmo que eu coloque o comando onmouseout com o iverso da funcao para diminuir ele nao diminui apenas para de crescer....E o que eu queria era q e ao div q estou crescesse ate um ponto que eu determinasse, e ao tirar o mouse voltasse ao normal

 

O codigo que tenho é este...quem sabe me ajudam a enteder melhor e adptar ao minha necessidade

 

Para da funcao JavaScript:

function aumenta(id) {
   target = document.getElementById(id);
   var i = setInterval(
                   function() {
                           alpha = target.style.width;

                           alpha = parseInt(alpha.split("px", 1))
                           alpha += parseInt(1);
                           alpha = alpha + "px";

                           target.style.width = alpha;
                           target.style.height = alpha;
                   }, 20);

}

function diminui(id) {
   target = document.getElementById(id);
   var i = setInterval(
                   function() {
                           alpha = target.style.width;

                           alpha = parseInt(alpha.split("px", 1))
                           alpha -= parseInt(1);
                           alpha = alpha + "px";

                           target.style.width = alpha;
                           target.style.height = alpha;
                   }, 20);
}

</script>

 

Agora a DIV que eu chamo estas funcoes é esta:

<div  id="<?=$cp3['id_produto_atributo_estoque'] ?>" style="width:16px;height:16px;background-color:<?=$background_color ?>;margin:4px;float:left;padding:2px;"><a href="javascript:void(0)" style="text-decoration:none;color:#FFF" onmouseOver = "aumenta('<?=$cp3['id_produto_atributo_estoque'] ?>')" onmouseout="diminui('<?=$cp3['id_produto_atributo_estoque'] ?>')">    </a></div>

 

Com isso qdo estou com o mouse sobre a DIV ela cresce, porem qdo eu tiro ela deveria diminuir e voltar ao tamanho normal e isso nao faz apenas para de crescer

 

Alguem pode me ajudar a adptar isso ao meu sistema?

 

Obrigado

[July123 0]

Então, acho que você está fazendo do jeito mais complicado hehehe

 

Tu sabe mexer com css, não? então, tu poderia fazer assim: criar uma classe em css, por exemplo, ".testeclasse{}" e adicionar nela as definições do botão quando passar por cima dele. No caso, definir seu tamnho para 16px por 16px... daí, na hora de dar o onmouseover, tu só chamaria essa classe, adicionando ela à div que tu quer. E daí no onmouseout tu criar uma classe com o processo inverso =)

 

 

 

Espero ter ajudado!

[JCMais 75]

porque complicar com Javascript quando se tem a disposição :hover e :active? :S

[marcosfj1 0]

Então, acho que você está fazendo do jeito mais complicado hehehe

 

Tu sabe mexer com css, não? então, tu poderia fazer assim: criar uma classe em css, por exemplo, ".testeclasse{}" e adicionar nela as definições do botão quando passar por cima dele. No caso, definir seu tamnho para 16px por 16px... daí, na hora de dar o onmouseover, tu só chamaria essa classe, adicionando ela à div que tu quer. E daí no onmouseout tu criar uma classe com o processo inverso =)

 

 

 

Espero ter ajudado!

 

 

Hum interessante, o problema que não sei mto de css, poderia me ajudar em como estar fazendo isso de uma forma pratica, pois realmente nao sei como comecar

 

Valeu