babaloricha Postado Julho 6, 2007 Denunciar Share Postado Julho 6, 2007 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 marcadobox desmarcadobox marcado com destaquebox desmarcado com destaqueo 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(' <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! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 .Andreia. Postado Julho 6, 2007 Denunciar Share Postado Julho 6, 2007 não seria este codigo?http://www.bmgamble.com/code/code.php?id=15 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 babaloricha Postado Julho 6, 2007 Autor Denunciar Share Postado Julho 6, 2007 Bom o codigo e esse mesmo mas os dois "identicos" mas um funciona e o outro não!! :huh: mas valeu!o importante e usar! Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
babaloricha
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(' <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.