Hola amigos.

Quiero pedir vuestra ayuda sobre si en los posts de Miarroba se pueden ampliar las fotos al pasar sobre ellas el cursor. Recorrí un montón de foros y las soluciones que encuentro no funcionan. Quizás porque están dirigidas a otros como Blogger, etc.

Me explico, hice un trabajo sobre Diego Velázque en el que incorpor todas sus obras en fotos de 50x50. Y el problema es que no tengo espacio para poner links rediccionando las fotos para verlas ampliadas. Y crear más posts para repartirlas no me gusta. Por lo que, quisiera vuestra ayuda para que me proporcionéis la manera de poder ampliarlas sin ocupar demasiado espacio.

Muchas gracias.

Mi blog es: https://fransaval.blogcindario.com/

Los posts en cuestión son: https://fransaval.blogcindario.com/2[....]158-velaquez-diego-velazquez-i.html
y https://fransaval.blogcindario.com/2[....]60-velaquez-diego-velazquez-ii.html

A cada imagen les agregas una clase, que queden así (por ejemplo):

<img src='kiwi.gif' class='mini'>

y en algún lugar insertas un estilo (una sola vez):

<style type='text/css'>
.mini{width:50px;height:50px;}
.mini:hover{width:100px;height:100px;}
</style>

y cambias el 100px por el valor que deseas o un porcentaje 100%

Muchas gracias Gestion Xls. Lo que me dices que agregue, me lo puedes explicar un poco mejor. Quiero decir, voy a la htlm de modificar artíclo y cojo una foto, por ejemplo: <td valign="top"><span style="font-family: times new roman,times;"><strong><span class="tituloficha"><img alt="Cristo en cas de Marta y María - Velázquez" height="50" src="http://wa3.www.artehistoria.jcyl.es/genios/thumb/VEC00200.jpg" style="float: left;" width="50" /<

¿Dónde coloco los dos apartados que me recomiendas? ¿O es en otro sitio?

Muchas gracias. Saludos.

Desde tu panel de administración, vas a Aspecto - M;odifcar - Hoja de estilos, aquí pones el código que te ha dado (no pongas las etiquetas <style> </style> porque se supone que ya es un documento CSS, por lo tanto, solo pon):

.mini{width:50px;height:50px;}
.mini:hover{width:100px;height:100px;}

Luego, en cada articulo, a las imágenes le añades:

<img alt="Cristo en cas de Marta y María - Velázquez" height="50" src="http://wa3.www.artehistoria.jcyl.es/genios/thumb/VEC00200.jpg" style="float: left;" class="mini" width="50" />

Hola Josepepe033. Como siempre echándonos una estupenda mano. Voy probar. Y luego te digo.

Este:

.mini{width:50px;height:50px;}
.mini:hover{width:100px;height:100px;}

Lo pongo en cualquier sitio de la hoja de estilo...

Algo estoy haciendo mal, que no me funciona. Voy a la hoja de estilos y en que apartado tengo que colocar esto:

.mini{width:50px;height:50px;}
.mini:hover{width:100px;height:100px;}

Por ejemplo:

---

div.menu_izq_contenido a:hover
{
 color: #A8001C;
 text-decoration: none;
}

div.menu_izq_contenido ul
{
 margin: 0px;
 padding: 0px;
 list-style-position: inside;
 list-style-type: none;
}

#menu_izq input.inputText
{
font-size:10px;
font-family:verdana;
color:#707070;
font-weight:normal;
font-style:normal;
font-decoration:normal;
text-transform:none;
text-align:left;
border-width:1px;
border-style:solid;
border-color:#CCCCCC;
background-color:#FFFFFF;
background-image:;
background-position: ;
background-repeat:;
padding:2px;
}

#menu_izq input.inputButton
{
font-size:10px;
font-family:verdana;
color:#808080;
font-weight:normal;
font-style:normal;
font-decoration:normal;
text-transform:none;
text-align:center;
border-width:1px;
border-style:solid;
border-color:#CCCCCC;
background-color:#E2E2E2;
background-image:;
background-position: ;
background-repeat:;
padding:2px;
}

#cuerpo
{
 float: left;
 width: 550px;
 border: 0px;
 padding: 0px;
}

#cuerpo_padding
{
 margin: 0px 10px 0px 10px;
 padding: 5px 0px 0px 0px;
 border: 0px;
}

div.articulos
{
 padding: 0px;
 margin: 0px;
 border: 0px;
}

div.fecha_articulos
{
 padding: 0px;
 margin: 0px 0px 1px 0px;
 border: 0px;
 color: #9F9F9F;
 font-family: verdana, tahoma;
 font-size: 10px;
 line-height: 14px;
 text-transform: capitalize;
 text-decoration: none;
}

div.fecha_articulos_texto
{
 border: 0px;
 text-align: left;
 margin: 0px 0px 0px 4px;
 padding: 2px 0px 2px 0px;
}

div.fecha_articulos_texto a
{
 color: #9F9F9F;
 font-family: verdana, tahoma;
 font-size: 10px;
 line-height: 14px;
 text-transform: capitalize;
 text-decoration: none;
}

div.titulo_articulos
{
 padding: 0px;
 margin: 0px 0px 1px 0px;
 background: url('https://miarroba.st/blogs/skins/37235/fondo_titulo_art_img.jpg') repeat-x left bottom;
 border: 0px;
 color: #006A80;
 font-family: georgia, tahoma;
 font-size: 22px;
 line-height: 26px;
 text-decoration: none;
}

div.titulo_articulos a
{
 color: #006A80;
 font-family: georgia, tahoma;
 font-size: 22px;
 line-height: 26px;
 text-decoration: none;
}

div.titulo_articulos a:hover
{
 color: #A8001C;
 text-decoration: none;
}

div.titulo_articulos_padding
{
 border: 0px;
 text-align: left;
 margin: 0px 0px 0px 4px;
 padding: 10px 0px 5px 0px;
}

div.contenido_articulos
{
 border: 0px;
 padding: 0px;
 margin: 0px;
 border: 0px;
}

div.texto_articulos
{
 border: 0px;
 padding: 0px;
 margin: 0px;
 border: 0px;
}

div.texto_articulos_padding
{
 margin: 0px 10px 0px 5px;
 padding: 5px 0px 30px 0px;
 border: 0px;
 text-align: justify;
 color: #000000;
 font-family: verdana, tahoma;
 font-size: 12px;
 line-height: 16px;
 text-decoration: none;
}

div.texto_articulos_padding a
{
 color: #006A80;
 font-family: verdana, tahoma;
 font-size: 14px;
 line-height: 18px;
 text-decoration: none;
}

div.texto_articulos_padding a:hover
{
 color: #A8001C;
 text-decoration: none;
}

div.texto_articulos_padding img
{
 border: 1px solid #444444;
 margin: 0px 4px 4px 0px;
 padding: 0;
}

div.publicado_por

---

O más arriba ... o abajo... Es que estoy bastante verde en estas cuestiones...

Muchas gracias. Saludos.

Puedes colocarlo, por ejemplo, al final del todo. Es decir, bajas al final de la hoja de estilo, pones un salto de línea y pegas el código.

Muchísismas gracias. Funciona...

Aunque no se si es normal que al poner el cursor sobre la imagen, esta tiembla mucho, aunque luego se queda ampliada y luego vuelve al tamaño que le tengo asignado.

Si es normal, pues vale y no me contestes. Si ves algun problema que se pueda corregir, pues gracias de antemano.

Muy agradecido Josepepe033. Saludos

¿Puedes poner el artículo donde lo has probado?

El artículo es este:

Eso pasa porque el contenido del artículo se reajusta, deja el cursor fuera de la foto y al no estar encima, se vuelve pequeña, al volverse pequeña el contenido se reajusta y el cursor vuelve a estar encima; así que se convierte en un bucle.

Ten en cuenta que al poner el cursor en la foto cambia el tamaño y el cursor queda fuera como te expliqué antes, hasta que el cursor no se mueva nuevamente no se reajustará al tamaño pequeño (porque cuando se vuelva a mover es cuando entonces se dará cuenta de que está fuera de la imagen).

La solución (creo) es añadir un position:absolute;

.mini{width:50px;height:50px;}
.mini:hover{width:100px;height:100px;position:absolute;}

No funciona.

Pongo el código de una imagen que veo (ultima inferior columna izquierda):

<img alt="El barbero del Papa - Velázquez" height="50" src="http://wa5.www.artehistoria.jcyl.es/genios/thumb/VEE00259.jpg" style="float: left;" width="50" />

(aparte, esta línea tiene un " de más)

Debería dejarlo así:

<img alt="El barbero del Papa - Velázquez" class="mini" src="http://wa5.www.artehistoria.jcyl.es/genios/thumb/VEE00259.jpg" style="float: left;" />

----

Es más, en la hoja de estilos puedes poner:

.mini{width:50px;height:50px;float:left;}

y el código de la imagen quedaría:

<img alt="El barbero del Papa - Velázquez" class="mini" src="http://wa5.www.artehistoria.jcyl.es/genios/thumb/VEE00259.jpg" />

Muchas gracias. Comprendido y gracias a ti, comienzo a ser un experto en esto... jajaja...

Muchísimas gracias y mi enhorabuena por ser tan magnífico instructor.

Saludos.

Hola amigos. Encontré este código que la verdad va de maravilla y es muy sencillo de usar. Se aplica directamente sobre la HTML el documento (página, post...) en el que va o van la/s foto/s. Es decir, si ya lo tienes creado, se va Administrar, Panel de Control, Artículos, Modificar, HTML, y se modifica donde se quiere poner la foto o sustituir una.Si se está creando el documento, pues en HTML.

El código:

<img src="URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;"onmouseout="this.width=200;this.height=150;" width="200" height="150" />

1.   "this.width=500;this.height=400;"  > Indica el ancho (width) y el alto (height) de la imagencuando el cursor está encima de la imagen (Cambialo por las medidas de la imagen original).

2. "this.width=200;this.height=150;" width="200" height="150" > Indica el ancho (width) y el alto (height) de la imagencuando el cursor está fuera de la imagen (Cámbialos por las medidas que desees, para que quede mas pequeño que la original).

3. Y por supuesto, cambia URL DE LA IMAGEN, por la dirección correspondiente.

4. También puedes cambiar (aunque no es obligatorio), onmouseover, por onclick, por ejemplo, consiguiendo asi que la imagen se aumente al pinchar sobre ella.

Por ejemplo: En un documento mío con varias fotos, el código de la HTLM de una de ellas es este, incluído el comentario que acompaña a la foto:

 <tr>
<td valign="top"><span style="font-family: times new roman,times;"><strong><span class="tituloficha"><strong><span class="tituloficha"><img alt="Infanta Margarita - Velázquez" height="50" src="http://wa3.www.artehistoria.jcyl.es/genios/thumb/VEI03460.jpg" style="float: left;" width="50" />Margarita</span></strong><br /></span></strong><span class="tituloficha"><span class="etiqueta">Autor:</span></span><span class="tituloficha">Velázquez<br /><span class="etiqueta">Fecha:</span>1650-60 <br /><span class="etiqueta">Museo:Viena</span><br /><span class="etiqueta">Características: </span><br /><span class="etiqueta">Material:</span>Oleo sobre lienzo</span></span></td>
<td valign="top"><span style="font-family: times new roman,times;"><strong><span class="tituloficha"><strong><span class="tituloficha"><img alt="Infanta Margarita - Velázquez" height="50" src="http://wa4.www.artehistoria.jcyl.es/genios/thumb/VEI03461.jpg" style="float: left;" width="50" />Margarita</span></strong><br /></span></strong><span class="tituloficha"><span class="etiqueta">Autor:</span></span><span class="tituloficha">Velázquez<br /><span class="etiqueta">Fecha:</span>1659<br /><span class="etiqueta">Museo:Viena</span><br /><span class="etiqueta">Características: </span><br /><span class="etiqueta">Material:</span>Oleo sobre lienzo</span></span></td

En todos es igual, más o menos. Se sustituye lo que está en rojo por el código que os puse al principio. Luego hacéis las correcciones en URL y en las medidas. Recordad que en 500-400, van las medidas originales o las que creáis oportunas de la imagen original. Mejor las originales que os salen en propiedades. Y las segundas tienen que ser las mismas en los dos campos. Muy importante, respetar los espacios, sino pueden surgir problemas.

Si queréis reducir o ampliar una imagen y que no os salga deformada, emplear esta fórmula:

Ancho original x ancho nuestro / ancho nuestro = a nuevo ancho. El alto, lo mismo.

Bueno, como yo sufro muchísimo buscando estas soluciones, pues os lo pongo aquí.

Sin olvidarme de dar las gracias a los expertos de este foro por su gran ayuda.

Saludos.

Esa sería otra forma de hacerlo (con JavaScript). Pero si quieres simplicarlo, es más facil como te indicó GestionXls con CSS.