CÓDIGO MULTICOLOR PARA FONDOS, EN UNA PÁGINA WEB
EL EJEMPLO CONSTA DE 6 COLORES, ELABORA 6 MÁS.
PARA REALIZAR LA PRÁCTICA NECESITAS CREAR CUADROS DE COLORES COMO SE VISUALIZAN.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imágenes con Cambio de Fondo</title>
<style>
/* Centrar la tabla y su contenido */
.n {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
table {
border-collapse: collapse;
width: 80%;
}
td {
padding: 5px;
text-align: center;
}
img {
border: 2px solid transparent;
transition: transform 0.3s ease, border-color 0.3s ease;
max-width: 100%;
height: auto;
cursor: pointer;
}
/* Efecto al pasar el mouse sobre la imagen */
td span:hover img {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="n">
<table>
<tr>
<td>
<span
onmouseover="document.body.style.backgroundColor='#d9d13f';"
onmouseout="document.body.style.backgroundColor='';">
<img src="Amarillo.png" alt="Amarillo" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#3f6dd9';"
onmouseout="document.body.style.backgroundColor='';">
<img src="azul.png" alt="Azul" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#d9993f';"
onmouseout="document.body.style.backgroundColor='';">
<img src="mostaza.png" alt="Mostaza" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#cccccc';"
onmouseout="document.body.style.backgroundColor='';">
<img src="gris.png" alt="Gris" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#000000';"
onmouseout="document.body.style.backgroundColor='';">
<img src="negro.png" alt="Negro" />
</span>
</td>
<td>
<span
onmouseover="document.body.style.backgroundColor='#279b1c';"
onmouseout="document.body.style.backgroundColor='';">
<img src="verde.png" alt="Verde" />
</span>
</td>
</tr>
</table>
</div>
</body>
</html>
No hay comentarios.:
Publicar un comentario