Normalmente, las flechas gráficas en los sitios web se utilizan para organizar la navegación. Cuando hace clic en dicho puntero, va a otra página oa otra sección de la página actual. A veces, algunas acciones están vinculadas a ellas: resaltar el contenido del campo de la etiqueta, lanzar un script JavaScript, etc. Para enfatizar que esta flecha es un elemento activo, use el efecto "resaltar", es decir cambios en la apariencia al pasar el mouse.
Necesario
Conocimientos básicos de lenguajes HTML y CSS
Instrucciones
Paso 1
Determine qué mecanismo para implementar el resaltado de flechas es mejor para usted. Hay varios de ellos, dos simples se dan en los pasos siguientes de esta instrucción. Ambos usan la pseudoclase CSS hover. Cuando el cursor del mouse está sobre un elemento gráfico (flecha), se le aplica el estilo descrito en esta pseudoclase y el resto del tiempo este estilo no está activo. Para las dos opciones descritas a continuación, puede usar el mismo código HTML código, pero descripciones de estilo diferentes. El código de flecha en la fuente de la página se puede escribir de la siguiente manera: El atributo id especifica el identificador del enlace (flechaA), mediante el cual el navegador determinará cuál de las descripciones de estilo se le debe aplicar.
Paso 2
La primera opción requerirá que prepare dos imágenes de flechas, con y sin retroiluminación. Guárdelos en archivos con nombres como arrON.
una # flechaA, una # flechaA: visitado {
bloqueo de pantalla;
altura: 30px;
ancho: 100px;
fondo: url (arrOFF.gif) sin repetición;
borde: 0;
}
a # arrowA: hover {
fondo: url (arrON.gif) sin repetición;
borde: 0;
}
El primer bloque contiene las dimensiones de la flecha (alto: 30px; ancho: 100px;); reemplácelas con las dimensiones de las imágenes de flecha preparadas.
Paso 3
La segunda opción le permite arreglárselas con un solo archivo de imagen. Debe colocar ambas imágenes de la flecha en él, tanto resaltadas como inactivas. Puede colocarlos uno al lado del otro, puede uno encima del otro. En el código de muestra, asumiremos que la flecha resaltada se coloca debajo de la inactiva, y el archivo se llama arr.
una # flechaA, una # flechaA: visitado {
bloqueo de pantalla;
ancho: 100px;
altura: 30px;
fondo: url (arr.gif) sin repetición;
borde: 0;
}
a # arrowA: hover {
fondo: url (arr.gif) sin repetición 31px;
borde: 0;
}
No olvide cambiar el tamaño aquí también.
