La retroiluminación de los botones en las páginas web se suele organizar mediante dos imágenes. Cuando pasa el cursor del mouse sobre el elemento correspondiente del documento (enlace o botón), se genera un evento que, de acuerdo con las instrucciones escritas en el lenguaje CSS, solicita al navegador que cambie una imagen a otra. Cuando el cursor del mouse se aleja del botón, se produce el reemplazo inverso.
Necesario
Conocimientos básicos de lenguajes HTML y CSS
Instrucciones
Paso 1
Hay varias opciones para implementar tal mecanismo de resaltado. Para cualquiera de ellos, puede utilizar el mismo código HTML, cambiando solo la descripción de estilo correspondiente. El código HTML del botón puede verse así: texto en el botón Aquí está el identificador de este elemento de página (id = "btnA") al que se adjuntará la descripción de estilo.
Paso 2
Para implementar una de las opciones, debe preparar dos imágenes, una de las cuales muestra el botón en estado inactivo y la segunda con luz de fondo. Se utilizarán como imagen de fondo del enlace. Las instrucciones de CSS para este botón podrían verse así:
a # btnA, a # btnA: visitado {
bloqueo de pantalla;
ancho: 50px;
altura: 20px;
fondo: url (btnA.gif) sin repetición;
borde: 0;
}
a # btnA: hover {
fondo: url (btnA_hover.gif) sin repetición;
borde: 0;
}
Aquí, en el primer bloque, se indican las dimensiones de la imagen que representa el botón (ancho: 50px; alto: 20px;). Debe reemplazarlos con las dimensiones de su imagen. Los nombres de los archivos de imagen deben cambiarse de la misma manera: btnA.
Paso 3
Una alternativa es poner ambas imágenes en una sola imagen. Pueden estar uno encima del otro o pueden estar uno al lado del otro. También se utilizará como fondo para el enlace. Dado que los tamaños de los botones se especifican en la descripción del estilo del botón, todo lo que no encaje en ellos no será visible. En este caso, las instrucciones colocadas en la descripción CSS deben, al pasar el cursor del mouse, desplazar la imagen de fondo para que el área con la imagen del botón resaltado caiga dentro del marco. Para esta opción, el código del paso anterior debe cambiarse de la siguiente manera:
a # btnA, a # btnA: visitado {
bloqueo de pantalla;
ancho: 50px;
altura: 20px;
fondo: url (btnA.gif) sin repetición;
borde: 0;
}
a # btnA: hover {
fondo: url (btnA.gif) sin repetición 21px;
borde: 0;
}
Esto supone que ha colocado las imágenes una encima de la otra (resaltadas en la parte inferior) y las ha guardado en un archivo llamado btnA.gif. La altura de los botones es de 20 px, el ancho es de 50 px; debes reemplazar estos valores por los tuyos.
