Foros del Web » Creando para Internet » HTML »

ARTICULO: rotar imagenes

Estas en el tema de ARTICULO: rotar imagenes en el foro de HTML en Foros del Web. Que tal Amigos. Últimamente me he topado con varios problemas con imágenes, fondos, estilos, scripts, entre otros muchas otras cosas que un programador WEB experimentado, ...
  #1 (permalink)  
Antiguo 24/07/2015, 10:11
 
Fecha de Ingreso: abril-2008
Mensajes: 88
Antigüedad: 11 años, 6 meses
Puntos: 2
Información ARTICULO: rotar imagenes

Que tal Amigos.

Últimamente me he topado con varios problemas con imágenes, fondos, estilos, scripts, entre otros muchas otras cosas que un programador WEB experimentado, conoce de pies a cabeza, pero para un seminovato, que solo conocía lo básico del diseño de páginas web como yo, nos ha dado dolor de cabeza...

He aqui el primero que me tope... como hacer girar una imagen???.

Para empezar me he topado con muchos tutoriales y foros que te explican bien, siempre y cuando tengas conocimientos avanzados de programación WEB...

Pero no te dicen que debes tener y donde lo puedes adquirir, me refiero a las JAVASCRIPTS, los cuales, en algunas ocasiones ya existen y te ayudan a solucionar muchos de tus problemas (debido a que muchos ya se toparon con ellos).

Requieres tener los scripts jquery.js y jquery.rotate.min.js (si los buscas en google los encuentras muy facilmente).

Estos scripts los puse entre las etiqueras HEAD.
Código:
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>

<!-- Este script da la orden a la imagen de girar 90°-->
<script type="text/javascript">
     var rotate_angle = 0;
     $(document).ready(function(){
          $('#rotate_button').click(function(){
               rotate_angle = ( rotate_angle == 360 ) ? 0 : rotate_angle +90;
               $('#imagen').rotate({ angle : rotate_angle });
               img.style.position="absolute"
               img.style.left="10px"
               img.style.top="10px"
          });
     });
</script>
</head>
Es momento de colocar nuestra imagen:
Código:
<body>
<img src="[ruta de la imagen]" id="imagen">

<!-- Colocamos un botón que ayude a girar la imagen -->
<input type="button" id="rotate_button">
</body>
Y hemos finalizado, es hora de poner en practica lo antes mencionado.

Espero sirva de algo para aquellos que no lo sepan y si alguien sabe de esto, solo... complemente...

SALUDOS A TODOS

Etiquetas: diseño, imagenes, rotar, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:06.