Ir para conteúdo
Fórum Script Brasil
  • 0

[resolvido] Check Box Personalizado


babaloricha

Pergunta

Ola galera estou tentando fazer um exemplo do livro "javascript o guia definitivo" onde o tópico substituição de imagens!

no caso ele esta tentando simular uma check box com imagens, ondee existem 4 imagens .

box marcado

box desmarcado

box marcado com destaque

box desmarcado com destaque

o codigo e esse!

<html>
<head>
<title>Untitled Document</title>
<script language="javascript">
function ToggleButton(document, checked, label, onclick){
    if(!ToggleButton.prototype.over){
         ToggleButton.prototype.over = _ToggleButton_over;
         ToggleButton.prototype.out = _ToggleButton_out;
         ToggleButton.prototype.click = _ToggleButton_click;
         ToggleButton.images =  new Array(4);
         for(var i = 0; i<4; i++){
             ToggleButton.images[i] = new Image(ToggleButton.width, ToggleButton.height);
            ToggleButton.images[i].src = ToggleButton.imagenames[i];
        }
    }
this.document = document;
this.checked = checked;
this.highlighted = false;
this.onclick = onclick;
if(typeof this.onclick == "string")
    this.onclick = new Function("state", this.onclick);
    var index = document.images.lenght;
    document.write('&nbsp;<a href="about blank" ' + 'onmouseover="document.images['+index+']._tb.over();return true;" '+'onmouseout="document.images['+index+']._tb.out()" ' + 'onclick="document.images['+index+']._tb.click(); return false;">');
    
    document.write('<img src=" ' + ToggleButton.imagenames[this.checked+0] + ' " '+' width=' + ToggleButton.width + 'height=' + ToggleButton.height + ' border="0" hspace="0" vspace="0" aling="absmiddle">');
    
    if(label) document.write(label);
    document.write('</a></br>');
    this.image = document.images[index];
    this.image._tb = this;
}

// metodo over()
function _ToggleButton_over(){
    this.image.src=ToggleButton.imagenames[this.checked +2]
    this.highlighted=true;
}

// metodo out()
function _ToggleButton_out(){
    this.image.src=ToggleButton.imagenames[this.checked +0]
    this.highlighted=false;
}

//metodo click()
function _ToggleButton_click(){
    this.checked = !this.checked;
    this.image.src = ToggleButton.imagenames[this.checked + this.hightlighted*2];
    if(this.onclick) this.onclick(this.checked);
}



//inicia as propriedades estaticas

ToggleButton.imagenames = new Array(4);
ToggleButton.imagenames[0] = "images/boxdesmarcado.jpg"; // a caixa desmarcada
ToggleButton.imagenames[1] = "images/boxmarcado.jpg";// a caixa com uma marcação
ToggleButton.imagenames[2] = "images/boxdesmarcadoHig.jpg";// desmarcada mas deestacada
ToggleButton.imagenames[3] = "images/boxmarcadoHig.jpg";//Marcada e destacada
ToggleButton.width = ToggleButton.height = 25 // Tamanho de todas as  Imagens
</script>
     
</head>

<body>
Opcional extras :<br />
<script>
var tb1 = new ToggleButton(document,true,"56k moden");
var tb2 = new ToggleButton(document,false,"Impressora",function(clicked{alert("printer: " + clicked);});
var tb3 = new ToggleButton(document,false,"Fita", "alert('Fita:'+state)");
</script>
<form>
    <input type="button" value="Report Buttons" onClick="if(tb1.checked) tb1.click();if(tb2.checked) tb2.click();if(tb3.checked) tb3.click();" />
    <input type="button" value="Reset Buttons" onClick="if (tb1.checked) tb1.click();if (tb2.checked) tb2.click();if (tb3.checked) tb3.click();" />
</form>
</body>
</html>

mas o problema e que as imagens não aparecem alguém já vio algo do tipo!

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...