CURSO COMPLETO DE DREAMWEAVER 8

--MEDIOS--


12 - CAMBIANDO EL PUNTERO

Partiendo de la base de que usamos windows, debemos tener consciencia de que nuestro sistema operativo trae multiples cursores por defecto, podemos observar mientras trabajamos con nuestro pc, como cambian los cursores, al pasar por ciertas zonas de nuestra pantalla, como por ej. cuando pasamos con nuestro puntero, sobre un link, la flecha (denominada default en CSS) cambia por la manito (pinter).

En este tema vamos a ver, como "forzar" nuestro sistema operativo, de forma que no se deje llevar por las normas convencionales de los punteros. Por supuesto, para ello vamos a emplear las hojas de estilo.

A continuación os pongo la la lista de los cursores disponibles por defecto en Windows:

default (flecha)
crosshair (cruz)
e-resize (flecha que apunta a la derecha)
hand
(mano)
help (signo de pregunta)
move (cruz con flechas en los extremos)
n-resize (flecha que apunta hacia arriba)
ne-resize (flecha que apunta al noreste)
nw-resize (flecha que apunta al noroeste)
pointer (mano)
s-resize
(flecha que apunta hacia abajo)
se-resize (flecha que apunta hacia el sudeste)
sw-resize (flecha que apunta hacia el sudoeste)
text (I-beam)
w-resize (flecha que apunta a la izquierda)
wait (reloj de arena)


Para ello, nos vamos a crear un nuevo estilo css, "Nueva regla css"


Esta vez, nos vamos a configurar "Avanzadas"



Seleccionamos en Selector,uno de los cuatro estados que tiene un vinculo.

Aceptamos y se nos abre la ventana de "Definición de regla para:..."

Nos vamos a la pestaña de Extensiones y ponemos ahí el cursor que queremos:



Tambien es posible dar un cursor personalizado, indicando la url, pero esto lo debemos hacer modificando el código de nuestro documento, la forma más limpia es o bien pegando el código correspondiento, o en el caso de que no sepamos nuestro código, primero seleccionamos un cursor cualquiera, como hemos explicado anteriormente, creando una nueva regla de estilo, y luego modificamos el código de tal forma:





Podemos dar efecto a los 4 estados de vinculos, o a diferentes partes de nuestro documento, todo ello siempre a través de las hojas de estilo .css

A continuación y a modo de referencia, os pongo varios códigos, para que veais su funcionamiento:


A todo el documento:

<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor: pointer}
-->
</style>
</head>
<body>
</body>
</html>


A algunos sectores del documento:

<html>
<title>Cambiar el cursor</title>
<head>
</head>
<body>
<h4 style="cursor: default">default</h4>
<h4 style="cursor: crosshair">crosshair</h4>
<h4 style="cursor: pointer">pointer</h4>
<h4 style="cursor: move">move</h4>
<h4 style="cursor: nw-resize">nw-resize</h4>
<h4 style="cursor: ne-resize">ne-resize</h4>
<h4 style="cursor: n-resize">n-resize</h4>
<h4 style="cursor: e-resize">e-resize</h4>
<h4 style="cursor: help">help</h4>
<h4 style="cursor: text">text</h4>
<h4 style="cursor: wait">wait</h4>
</body>
</html>


Cursor personalizado:

<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor : url("find.cur")}
-->
</style>
</head>
<body>
</body>
</html>


Ejemplo.



2007©By Almaweb.es

subir

Ir al menú de tutoriales de DREAMWEAVER

Todos los tutoriales son de mi completa autoría,

cualquier parecido con otros, es pura coincidencia.

Queda totalmente prohibida su reproduccion, total o parcial.

Si quieres enlazar mis tutoriales, no hay problema,

solo mandame un e-mail, para comunicarmelo.

Cualquier duda o sugerencia:

Tutoriales registrados

 

Alma Web

Design Sensation by almaweb.es

Foro Design Sensation