[Resolvido] rodar imagem

marcelocardoso · Dezembro 18, 2012

Olá Pessoal!

Consegui este script para aumentar e diminuir a imagem na tela, e faz bem

Só que agora preciso de outro script em javascript que pega a imagem na tela, vinda de uma variavel...

E:

se a imagem estiver de cabeça para baixo, ao apertar o botão girar, ela deverá colocar a imagem em pé do lado certo.

ou seja, ela teria que ao apertar o botão, ir virando a imagem de acordo como quero, tipo ir virando ela até eu quiser deixar ela, se de cabeça para baixo ou para cima.

Existe alguma coisa que posso fazer?

Procurei na internet, mas não consegui nada, portanto recorro aos colegas que programam em javascript para poder fazer este pequeno script acho eu.

Aguardo um breve retorno de sugestões e exemplos se possível.

Obrigado.

Marco Bruno · Dezembro 18, 2012

Bom dia, marmmc.

Dei um procurada no Google e acabei achando o seguinte link:

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

marcelocardoso · Dezembro 18, 2012

olá, vou estar vendo se me atende... em seguida retorno.

obrigado

Pessoal, consegui este script que faz o que preciso,

Mas precisaria de um botão tipo com o nome GIRAR, que ao clicar usasse este código...

Pois do jeito que está o código, só funciona se clicar na imagem do google.

Alguem pode me ajudar?????

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<style type="text/css">
#img{
 margin:100px 100px;
}
</style>

<img src="https://www.google.com/images/srpr/logo3w.png" id="img">

<script>
var value = 0
$("#img").rotate({ 
  bind: 
    { 
       click: function(){
           value +=90;
           $(this).rotate({ animateTo:value})
       }
    } 

});
</script>

marcelocardoso · Dezembro 18, 2012

alguem ajuda pessoal, só falta conseguir chamar o código jquery por um evento onclick de um botão.

William Bruno · Dezembro 18, 2012

uê cara, basta trocar:

<input type="button" value="girar" id="img" />

pronto, vai funcionar igual

oque você quer, é clicar no botão, e então o botão rotaciona a imagem, e não ele mesmo ? é isso ?

você precisa se expressar melhor cara.

Se for isso, eu creio que ficaria:

<img src="https://www.google.com/images/srpr/logo3w.png" id="img">
<input type="button" value="girar" id="btn" />

<script>
var value = 0
$("#btn").click(function(){
           value +=90;
           $('#img').rotate({ animateTo:value})
    });
</script>

marcelocardoso · Dezembro 19, 2012

Valeu bruno...

Realmente era sua segunda opção...

Acertou na mosca...

Realmente não sei me explicar ao certo.

Mas valeu.

Obrigado.

marcelocardoso · Dezembro 19, 2012

Olá Pessoal!

Agora mais um dúvida...

Estou tentando colocar o botão em um FRAME e a imagem e outra FRAME.

Mas o botão não gira a imagem, somente quando o código está todo junto...

FRAME PRINCIPAL:

<frameset rows="35,*" framespacing="0" frameborder="no" border="0">
 <frame src="index_btn.htm" name="top">
 <frame src="index_img.htm" name="main">
</frameset>

<noframes></noframes>

FRAME BOTAO

<input type="button" value="girar" id="btn" />

FRAME IMAGEM


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryrotate.js"></script>
<style type="text/css">
#img {
 margin:100px 100px;
    }
</style>

<img src="https://www.google.com/images/srpr/logo3w.png" id="img">

<script>
var value = 0
$("#btn").click(function(){value +=90; 
$('#img').rotate({animateTo:value})
});
</script>

Como posso resolver isso, pois preciso colocar o botão num frame, e a imagem em outro frame abaixo.

Obrigado.

William Bruno · Dezembro 19, 2012

putz cara.. com framesets não vai dar certo mesmo.

com iframe, você ainda pode usar o parent. e acessar o documento pai, com frameset, não tenho a menor idéia.

marcelocardoso · Dezembro 19, 2012

Olá bruno, sabe como posso fazer em iframe então....???

marcelocardoso · Dezembro 27, 2012

Pessoal!

Estou com este código agora, quase tudo está funcionando, mas o problema que não estou conseguindo chamar a função #BTN que está na IMAGEM de um BOTAO.

Os demais botoes para as funções AUMENTAR() e DIMINUIR() estão funcionando, só não consigo usar a do #BTN na imagem, sabem me ajudar como faço, estou fazendo assim, mas não ROLA:

<img src="button_rotaciona.jpg" width="147" height="38" id="#btn" />
tentei colocar o id="#btn" mas não chama, oque posso fazer????
e quando era assim com input abaixo, dava, mas quando passei para o código acima, nao vai mais... mas o input abaixo funcionava.
<input type="button" value="girar" id="btn" />
mas preciso usar na imagem do código acima, como posso resolver???

Segue meu código completo:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryrotate.js"></script>

<script>
var value = 0
$("#btn").click(function(){value +=90; 
$('#img').rotate({animateTo:value})
});
</script>

<script type="text/javascript">

function Aumentar(){
document.getElementById("img").width=document.getElementById("img").width + 200;
document.getElementById("img").height=document.getElementById("img").height + 200;
}
function Diminuir(){
document.getElementById("img").width=document.getElementById("img").width - 200;
document.getElementById("img").height=document.getElementById("img").height - 200;
}
</script>

<style type="text/css">
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #666;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFF;
}
a {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#img {
 margin:100px 100px;
    }
</style>



<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td width="23%" align="center"><img src="button_aumenta.jpg" width="139" height="38" onClick="Aumentar()"><img src="button_rotaciona.jpg" width="147" height="38" id="#btn" /><img src="button_diminui.jpg" width="139" height="38" onClick="Diminuir()"></td>
     </tr>
   </table>

   <div style="text-align: left; font-family: Arial; font-style: italic;"></div>

<div align="center">
      <img style="font-style: italic;" src="https://www.google.com/images/srpr/logo3w.png"	 id="img" height="1000" width="1000" />
   </div>

William Bruno · Dezembro 27, 2012

o problema desse codigo de agora, é q você ta usando o elemento antes dele existir.

faça o seguinte:

<script>
$(document).ready(function(){
       var value = 0
       $("#btn").click(function(){value +=90; 
       $('#img').rotate({animateTo:value})
       });
});
</script>

marcelocardoso · Dezembro 27, 2012

willian,

pior que ainda não funciona, troquei o código que postou, adicionei mas ainda não funfa...

oque pode ser... ele não roda a imagem em 90 graus, ou seja, não está habilitando o código jquuery rotate

William Bruno · Dezembro 27, 2012

aperte Ctrl+Shift+J no teu Firefox, e veja quais erros aparecem no console.

Corrija

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

marcelocardoso · Dezembro 27, 2012

bruno, não gera nada de erro...

a tela vem branca...

apertei ctlr+shif+j e a tela vem branca...

foge a minha alçada, não sei como resolver esse script... consegue me ajudar... realmente não der certa esta parte do firefox

marcelocardoso · Dezembro 27, 2012

willian!!!

se uso assim com input ao invés de botões, funciona:

mas precisaria mesmo é usar com imagens, mas o ID do jquery rotate #BTN, não vai com imagem...

me ajudem aí a passar os inputs para imagem com onclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryrotate.js"></script>

<script>
$(document).ready(function(){
       var value = 0
       $("#btn").click(function(){value +=90; 
       $('#img').rotate({animateTo:value})
       });
});
</script>

<script type="text/javascript">

function Aumentar(){
document.getElementById("img").width=document.getElementById("img").width + 200;
document.getElementById("img").height=document.getElementById("img").height + 200;
}
function Diminuir(){
document.getElementById("img").width=document.getElementById("img").width - 200;
document.getElementById("img").height=document.getElementById("img").height - 200;
}
</script>

<style type="text/css">
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #666;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFF;
}
a {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#img {
 margin:100px 100px;
    }
input {
background: url(button_rotaciona.jpg);
margin: 0px;
padding: 0px;
height: 38px;
width: 147px;
border-style: none;
}
</style>



<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td width="23%" align="center">
       <input type="button" value="aumentar" onclick="Aumentar()" />
       <input type="button" value="girar" id="btn" />
       <input type="button" value="diminuir" onclick="Diminuir()" />
       </td>
     </tr>
   </table>

   <div style="text-align: left; font-family: Arial; font-style: italic;"></div>

<div align="center">
      <img style="font-style: italic;" src="receita.jpg" id="img" height="1000" width="1000" />
   </div>


<body>
</body>
</html>

marcelocardoso · Dezembro 28, 2012

pessoal!!!

como posso colocar nos inputs imagens para não ficar apenas o botão?

quero colocar tres imagens diferentes em cada um dos 3 botoes, podem me ajudar... como faço???

obrigado.

marcelocardoso · Dezembro 28, 2012

Pessoal e Willian!

coloquei este estilo para os inputs até aí tudo certo.

.inputaumenta{
background: url(button_aumenta.jpg);
width: 139px;
height: 38px;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
}
.inputrotaciona{
background: url(button_rotaciona.jpg);
width: 147px;
height: 38px;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
}
input {
text-decoration: none;
border-style: none;
}

Ficando os botões assim

       <input type="button" value="" 	class="inputaumenta" 	onclick="Aumentar()" />
       <input type="button" value="" 		class="inputrotaciona" 	id="btn" />
       <input type="button" value="" 	class="inputdiminui" 	onclick="Diminuir()" />

Mas notei que os botoes inputs, não ficam um do lado do outro, fica um espaço entre um e outro...

Então, como posso deixar eles grudados um do lado do outro sem espaços em branco.

marcelocardoso · Dezembro 31, 2012

alguem pessoal...

preciso da ajuda dos colegas para acertar os botoes, que ao ficarem um do lado do outro, ainda ficam um pequeno espaço em branco...

obrigado e bom final de ano a todos.

marcelocardoso · Janeiro 2, 2013

Willian!!!

Me auxilia aqui...

Posto aqui somente o código para rotacionar a imagem, mas com o evento onclick, ele não executa a função do jquery...

pode me ajudar...??? segue codigo.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryrotate.js"></script>
<style type="text/css">
#img {
 margin:100px 100px;
    }
</style>

<script>
$(document).ready(function(){
       var value = 0
       $("#btn").click(function(){value +=90; 
       $('#img').rotate({animateTo:value})
       });
});
</script>

USANDO INPUT FUNCIONA: <input type="button" value="girar" id="btn" />
USANDO IMAGEM NÃO FUNCIONA: <img src="button.jpg" width="81" height="20" onclick="btn"/> 
<img src="https://www.google.com/images/srpr/logo3w.png" id="img">

Por gentileza, veja se consegue me ajudar a sair disso, pois tentei de tudo e como não conheço muito bem javascript, to me quebrando.

Obrigado.

William Bruno · Janeiro 2, 2013

você ta fazendo errado amigo, faça assim:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryrotate.js"></script>
<style type="text/css">
#img {
        margin:100px 100px;
    }
</style>

<script>
$(document).ready(function(){
       var value = 0
       $(".btn").click(function(){value +=90; 
       $('#img').rotate({animateTo:value})
       });
});
</script>

<input type="button" value="girar" class="btn" />
<img src="button.jpg" width="81" height="20" class="btn"/> 
<img src="https://www.google.com/images/srpr/logo3w.png" id="img">

Arquivado

[Resolvido] rodar imagem

Recommended Posts

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marco Bruno 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501