Rotar una imagen mediante HTML

Kiate Usuario habitual
#1•02/Abr/2011, 01:32 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

*Josepepe033* Moderador del foro
#2•02/Abr/2011, 02:04•Editado por Josepepe033 Dudo mucho que con HTML solo puedas hacerlo. Con JavaScript es poible, busca por Google "Rotar imagen con JavaScript". Por ejemplo

Kiate

Usuario habitual

#3•02/Abr/2011, 04:06•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>

GestionXls @man / @woman
#4•02/Abr/2011, 05:19 Si no me falla la aritmetica a esta hora, deberías modificar aquí: rotar(document.getElementById('pp'),60);

Kiate Usuario habitual
#5•10/Abr/2011, 19:22 gracias, donde pongo el link de la imagen?

GestionXls @man / @woman
#6•10/Abr/2011, 22:43 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.

Kiate Usuario habitual
#7•01/May/2011, 18:43 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

GestionXls @man / @woman
#8•01/May/2011, 19:25 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.

Anterior Siguiente Arriba

Responder

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

Inicio

Ayuda para webmasters

HTML básico

Opciones:

Ir al subforo:

Permisos:

TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes

Tema	Respuestas	Visitas	Actividad
Temas similares
Poner Imagen en HTML Por: Blackersoul, el 31/Mar/2008, 22:14	1	2k	Mar/08
Ayuda imagen de fondo en tamaño original con HTML Por: addisripoll, el 14/Sep/2012, 16:23	2	4k	Sep/12
Codigo html imagen Por: wicho.kom, el 13/Ene/2011, 01:10	1	7k	Jan/11
imagen de fondo en html Por: kotedas, el 04/Nov/2010, 19:04	3	33k	Nov/10
Problemas con un HTML de imagen de fondo Por: GC-Corporation, el 16/Feb/2005, 18:18	7	11k	Mar/13