1

introducir la descripción de la imagen aquí

Tengo un problema revise todo el foro y probé varios codigos pero o son de versiones anteriores al html5 o son medios complicados. Parece que funcionan pero dan ciertos errores.

Lo que yo quiero hacer es muy simple es hacer un botón con una imagen y que tenga los 3 estados:

  • es la foto 1
  • cuando el mouse está sobre el botón es la foto 2
  • y cuando presiono es la foto 3

Es del HTML 2.0 pero no encuentro nada les dejo mi codigo en HTML 5. Por favor evitar el CSS, lo mio es HTML pero si no queda otra diganme. Aca va el código

body {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Arial;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.1875;
  margin: 0;
  padding: 0;
}

#Button1 {
  border: 1px solid #2E6DA4;
  border-radius: 4px;
  background-color: transparent;
  background-image: url('images/a.jpg');
  background-repeat: repeat;
  background-position: left top;
  color: #FFFFFF;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  font-size: 13px;
  padding: 1px 6px 1px 6px;
  text-align: center;
  -webkit-appearance: none;
  margin: 0;
}

#Button1:focus {
  outline: 0;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Page</title>
  <link href="Untitled1.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">
</head>

<body>

  <input type="submit" id="Button1" name="" value="" style="position:absolute;left:510px;top:368px;width:88px;height:91px;z-index:0;">

</body>

</html>

1
  • Luis, si la respuesta fue útil se sugiere marcarla como aceptada y darle al upvote, así servirá de referencia para futuros visitantes y de paso ambos ganamos reputación en la comunidad. Si no fue útil, deja un comentario en la parte inferior de la respuesta dando detalles para tratar de mejorar la respuesta. También te sugiero hacer el recorrido para que conozcas el funcionamiento de la comunidad.
    – DjCrazy
    Commented el 16 may. a las 2:17

1 respuesta 1

0

Puedes usar la pseudoclase :hover para cambiar la imagen cuando el mouse esté posicionado sobre el botón y la pseudoclase :active para cambiar la imagen cuando se haga click el botón. Deja sostenido el click para que notes el cambio.

No es posible cambiar los atributos del botón al hacer click usando solo HTML. Para lograrlo necesitas usar CSS o JavaScript.

body {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Arial;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.1875;
  margin: 0;
  padding: 0;
}

#Button1 {
  border: 1px solid #2E6DA4;
  border-radius: 4px;
  background-color: transparent;
  /*URL de la imagen normal*/
  background-image: url('https://picsum.photos/50/50?random=1');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFFFFF;
  font-family: Arial;
  font-weight: normal;
  font-style: normal;
  font-size: 13px;
  padding: 1px 6px 1px 6px;
  text-align: center;
  -webkit-appearance: none;
  margin: 0;
}


/* Estilo cuando el mouse está sobre el botón */

#Button1:hover {
  background-image: url('https://picsum.photos/50/50?random=2');
}


/* Estilo cuando se hace clic en el botón */

#Button1:active {
  background-image: url('https://picsum.photos/50/50?random=3');
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Page</title>
  <link href="Untitled1.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">
</head>

<body>

  <input type="submit" id="Button1" name="" value="" style="position:absolute;left:510px;top:100px;width:88px;height:91px;z-index:0;">

</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.