Cómo agregar margen con onmouseout y onmouseover en HTML

hola, me gustaría saber como poner margen a la derecha y a la izquierda con onmouseout y onmouseover, porque con CSS no me sirve ya que es para unas imágenes y no quiero que le afecte a una imagen por eso necesito saber como se hace por HTML con onmouseout y onmouseover

saludos

Por html no se puede, son eventos de javascript, salvo que estés programando como en el año 2000 :witless:

Lo más sencillo es usar jquery, por ejemplo

$('#imagen').mouseover(function() {
$('#imagen').css('margin','5px');
});

reflejandome dijo:

Por html no se puede, son eventos de javascript, salvo que estés programando como en el año 2000 :witless:

Lo más sencillo es usar jquery, por ejemplo

$('#imagen').mouseover(function() {
$('#imagen').css('margin','5px');
});

Hacer clic para expandir...

pfff pues de eso no tengo ni idea, yo es que antes lo tenia todo puesto por CSS pero también tenia para que al pasar el ratón la imagen se agrandase, pero avía una imagen que no quería que se agrandase, ya que esa imagen esta puesta mas grande de lo normas así que dicha imagen lo que hace es achicarse al pasar el ratón por ser mas grande y yo lo que quería es que esa imagen no hiciera nada, que se quedara tal cual, te copio y pego la explicación que di sobre eso en otro hilo:

tengo un código en CSS para darle un tamaño a unas imágenes y otro para cuando pasas el ratón por encima de la imagen esta se agrande, pero una de las imágenes le tengo puesto un tamaño distinto, el tamaño es mas grande que las demás imágenes cuando le pasas el ratón por encima y el problema es que no consigo que esa imagen grande se quede con el mismo tamaño al pasarle el ratón por encima, ya que al pasarle el ratón por encima la imagen se encoje para ponerse a la medida que se ponen las demás imágenes al pasarle el ratón, os dejo un ejemplo

imagen1 imagen2 imagen3 imagen 4
al pasarle el ratón por ejemplo a la imagen 3 quedaría así:
imagen1 imagen2 imagen3 imagen 4
pero al pasarle el ratón a la imagen 1 quedaría así:
imagen1 imagen2 imagen3 imagen 4
y yo no quiero que esa imagen cambie de tamaño, yo lo que quiero es que la imagen 1 siga igual que estaba de grande

os dejo los códigos del CSS:

#imagenes img {
width: 80px;
border: 0;
}
#imagenes img:hover {
width: 180px;
padding: 1px 0 1px 0;
}

y aquí os dejo el código HTML

<div id="imagenes">
<center>
<a href="http://www.midominio.com" title="aquí la descripcion"><img src="enlace de la imagen" height="250"></a>
<a href="http://www.midominio.com" title="aquí la descripcion"><img src="enlace de la imagen"></a>
<a href="http://www.midominio.com" title="aquí la descripcion"><img src="enlace de la imagen"></a>
<a href="http://www.midominio.com" title="aquí la descripcion"><img src="enlace de la imagen"></a>
</center>
</div>

pero al final lo que hice fue quitarle el CSS y hacerlo casi todo por onmouseout y onmouseover y ya lo tengo todo bien excepto el margen porque al poner el ratón en lo alto de la imagen poniéndole un margen en onmouseout y otro margen en onmouseover no se desplaza ninguna imagen hacia un lado u otro pero como una imagen no se agranda al poner el margen por CSS y al pasar el ratón por la imagen que no se agranda todas las imágenes se mueven hacia un lado por eso necesitaría poner el margen con onmouseout y onmouseover, no se si me explico bien

saludos

versión rápida, crea dos clases con los margenes que quieres, por ejemplo, esto lo pones en el head (mejor) o body

<style>
.margenOver { width: 180px; padding: 1px 0 1px 0;}
.margenOut { width: 80px; border: 0;}
</style>

y en los enlaces pones

<a href="http://www.midominio.com" title="aquí la descripcion" onmouseover='this.className = margenOver' onmouseout='this.className = margenOut '>

de esta forma con los eventos aplicas una clase a los enlaces en funcion del evento, debería funcionar, creo xD