Entradas
Os voy a mostrar una forma de ampliar una imagen haciendo click encima de la misma, la novedad será que la imagen se ampliará en la misma ventana y no en una ventana a parte, puede ser muy útil en galerías de imágenes, donde el usuario con un simple click tenga la posibilidad de ampliar la imagen para poder bservarla de una forma mejor.
Primer paso:(Ubicación del script)
Nos vamos a Diseño->Edición HTML y buscaremos
</head> justamente encima copiaremos el siguiente script:<script type='text/javascript'>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;
}else{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
Segundo paso:(La imagen en cuestión)
Para crear el efecto, tendremos que copiar el siguiente fragmento de código allí donde nosotros queramos, ya sea en una entrada o en un gadget.
<img src="URL_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">
Modificar URL_imagen por la dirección donde se encuentra la imagen a la que le queremos aplicar el efecto.
Donde pone ancho1px y alto1px se corresponde con el tamaño de la imagen una vez realizado el click y ancho2px y alto2px se corresponde con la imágen original, de esta forma conseguiremos el siguiente efecto. Para observar el efecto hacer click encima de la imagen.
Donde pone ancho1px y alto1px se corresponde con el tamaño de la imagen una vez realizado el click y ancho2px y alto2px se corresponde con la imágen original, de esta forma conseguiremos el siguiente efecto. Para observar el efecto hacer click encima de la imagen.
9 Comentarios:
Hola Caxitos llevo dos dias visitando tu blog y estoy encantado y muy agradecido....
Una duda el segundo paso (la imagen en cuestión) no le he entendido bien, dónde debo copiar el texto que tú pones y dónde localizo la dirección de la imagen que quiero modificar... Gracias
HOla de nuevo Caxito, ya lo solucioné, cuando leí el post de ampliar la imagen al pasar el cursor por encima, es genial, muchas gracias, pero surge un problema que el reproductor de música aparece encima de la imagen ampliada. Pero por lo demás me encanta porque me soluciona el problema que tenía que para ampliar cada imagen se cortaba la música y luego volvía a empezar desde el principio, así no se corta, a ver si tu sabes la solución para que el reproductor no aparezca encima...
Mil gracias caxitos...
Antonio La dirección de la imagen la consigues subiendo tu imagen a un servidor, puedes utilizar este: http://tinypic.com/ cargas la imagen y te generará una url, deberás copiar la que dice: Enlace directo para presentaciones. El código del segundo paso lo insertarás;
Si es en una entrada tendrás que insertarlo donde dice Edicion de HTML, y si es en un gadget tendrás que crear uno de tipo HTML/Javascript. Espero te funcione ya me cuentas.
Hola, Sigo tu blog y aunque soy muy torpe con estos temas me has ayudado en algunos momentos. Me gusta esto de la foto pero no acaba de funcionar, si me puedes ayudar mi pregunta es si la foto está en mi disco y no tengo url como se hace???? Igual es sencillo pero no acabo de verlo, gracias por tu ayuda, Manduca
Anonimo!! La url de tu imagen la puedes conseguir subiendo tu imagen a un servidor de imagenes, en la barra lateral de mi blog en el menú de utiles encontrarás un link al servidor de imagenes que yo utilizo. Espero que te sea de ayuda.Un saludo.
Hola, me encanta tu blog =)
lo que quiero es desactivar esa opción de agrandar las imagenes, porque no quiero que puedan copiar mis fotos para nada, ya hice lo de desactivar el click de lado derecho, pero como le hago para desactivar de lado derecho refiriendose a las fotos? ya que, cada vez que se seleccionan las fotos se agrandan con la posibilidad de copiarlas y eso no me gusta , mil gracias
aLine El tema de desactivar el botón derecho del mouse solo en las fotos... he intentado hacerlo pero no he encontraddo nunca una solución viable. Se puede desactivar pero para toda la pagina pero para un area en concreto no igual que el botón de imprimir pantalla se puede desactivar pero de forma general no para algo especifico.
Hola. Necesito ayuda para solucionar un tema relacionado con el tamaño de las imágenes al hacer click sobr ellas. Cuando creé el blog, en el año 2010, clickeaba sobre las imágenes y éstas se ampliaban mucho sobre un fondo blanco. Esto me convenía, puesto que me interesa particularmente que se vean claros los detalles. Pero un día (hará unos meses), por algún cambio que no dependió de mí, las imágenes se ampliaron notablemente menos y contra un fondo negro. Veo que otros blogs, siguen ampliando las imágenes como antiguamente lo hacía el mío, por lo que supongo que debe haber manera de volver mi blog a su estado original. Agradezco de antemano una respuesta. Analía
Señor administrador porfavor, sería usted tan amable de indicarme porfavor como hacer para que una imagen de fondo no se repita¿? background no-repeat¿? muchas gracias ;)
Publicar un comentario
Haga su comentario
Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.