Entrar Regístrate
 
Rotar una imagen mediante HTML
#1 ·

Hola a todos...

Sucede que quisiera "voltear" o "rotar" una imagen (que esta horizontal) a vertical, he buscado por la red pero se me hace muy dificil y no encuentro nada, algun codigo que pudieran compartir conmigo?

gracias desde ya ;-)


Kiate
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 12
Desde: 20/Ago/2010
· ·
#2 · · Editado por Josepepe033

Dudo mucho que con HTML solo puedas hacerlo. Con JavaScript es poible, busca por Google "Rotar imagen con JavaScript".

Por ejemplo



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.736
Desde: 10/Ene/2009
· ·
#3 · · Editado por Kiate

gracias por responder

pero creo q eso esta muy dificil para mi >.< , aunque vere si puedo encontrar algo mas facil, antes algunas preguntas sobre el codigo del link (a ver si puedo intentarlo, si no es como creo entonces ni pensar )

Spoiler:

<!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=iso-8859-1" />
<title>test</title>
<script>
function rotar(obj,angulo){
    if (angulo >= 0) {
        var rotation = Math.PI * angulo / 180;  debo modificar estos grados?
    } else {
        var rotation = Math.PI * (360+angulo) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation);
    if (document.createElement("canvas").getContext) {
    /* ---- canvas ---- */ 
        var c=document.createElement('canvas');
        c.width = Math.abs(costheta*obj.width) + Math.abs(sintheta*obj.height);
        c.style.width = c.width+'px';
        c.height = Math.abs(costheta*obj.height) + Math.abs(sintheta*obj.width);
        c.style.height=c.height+'px';
        c.id=obj.id;
        c.style.position='absolute';
        var ctx=c.getContext('2d');
        ctx.save();
        if (rotation <= Math.PI/2) {
            ctx.translate(sintheta*obj.height,0);
        } else if (rotation <= Math.PI) {
            ctx.translate(c.width,-costheta*obj.height);
        } else if (rotation <= 1.5*Math.PI) {
            ctx.translate(-costheta*obj.width,c.height);
        } else {
            ctx.translate(0,-sintheta*obj.width);
        }
        ctx.rotate(rotation);
        ctx.drawImage(obj, 0, 0, obj.width, obj.height);
        obj.parentNode.replaceChild(c,obj);
        ctx.restore();
    }else{
    /* ---- DXImageTransform ---- */
        obj.style.position='absolute';
        obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        obj.filters.item(0).M11 = costheta;
        obj.filters.item(0).M12 = -sintheta;
        obj.filters.item(0).M21 = sintheta;
        obj.filters.item(0).M22 = costheta;
    }
}
window.onload=function(){
    rotar(document.getElementById('pp'),60);
    
}
</script>
</head>
 
<body>
<img src="1.jpg" width="180" height="127" />
<div id="ll" style="position:relative;"><img id="pp"(¿aqui va el link de la imagen?) src="1.jpg" width="180" height="127" /></div>
</body>
</html>

 


Kiate
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 12
Desde: 20/Ago/2010
· ·
#4 ·

Si no me falla la aritmetica a esta hora, deberías modificar aquí:

rotar(document.getElementById('pp'),60);


GestionXls
@man / @woman
@man / @woman
Haz clic para ver el perfil del usuario
Mensajes: 4.003
Desde: 02/Ago/2008
· ·
#5 ·

gracias,

donde pongo el link de la imagen? :?)


Kiate
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 12
Desde: 20/Ago/2010
· ·
#6 ·

Este código que has posteado está mal: <img id="pp"(¿aqui va el link de la imagen?) src="1.jpg" width="180" height="127" /> 

Debería ser así: <img id="pp"src="(¿aqui va el link de la imagen?)" width="180" height="127" />

Lo pones donde quieras que aparezca.


GestionXls
@man / @woman
@man / @woman
Haz clic para ver el perfil del usuario
Mensajes: 4.003
Desde: 02/Ago/2008
· ·
#7 ·

Hola; perfecto, funciona gracias!

ahora solo una ultima pregunta si quiero agregar mas de una imagen no hay modo que pueda insertarla ahi mismo, o debo pegar el mismo coooodigo otra vez cambiandole la direccion de la imagen


Kiate
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 12
Desde: 20/Ago/2010
· ·
#8 ·

Esto: <img id="pp"src="link de la imagen" width="xx" height="xx">

es como una unidad (una imagen), hará que muestra la imagen, si lo replicas 3 veces se verá 3 veces (una a continuación de la otra); si cambias el scr="link de la imagen" obtendrás 3 imágenes.


GestionXls
@man / @woman
@man / @woman
Haz clic para ver el perfil del usuario
Mensajes: 4.003
Desde: 02/Ago/2008
· ·
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Foro de soporte · Ayuda para webmasters · HTML básico
Opciones:
Versión imprimible del tema
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 11:49 UTC+02:00 DST
Temas similares
 I FotoPTemaMensajesÚltima respuesta
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Poner Imagen en HTML
Por: Blackersoul · 31/Mar/2008, 22:14
131/Mar/2008, 22:23
chavp Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
imagen de fondo en html
Por: kotedas · 04/Nov/2010, 19:04
305/Nov/2010, 16:29
Invitad@ Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Codigo html imagen
Por: wicho.kom · 13/Ene/2011, 01:10
120/Ene/2011, 15:45
fb@100001608753773 Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario702/Mar/2013, 18:13
fb@1100211754 Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario219/Sep/2012, 02:01
Invitad@ Ir al último mensaje del tema