[HTML-CSS] Zmiana kursora, własny kursor

Porady HTML, Porady CSS | 21 maj 2008 | Wizyt: 119163

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Deprecated: Function eregi() is deprecated in /blog/wp-content/plugins/tpbc.php on line 96

Aby zmienić standardowy wygląd kursora pojawiającego się np. podczas najeżdzania myszą na odnośnik lub zwykły tekst należy zastosować odpowiednie style. Można zapisać oddzielnie przy każdym ze znaczników lub jednorazowo dla wszystkich znaczników a lub p itd. Prócz kursorów udostępnianych przez style css, można również użyć własnych.

Przykład 1 - kursor dla pojedynczego znacznika:

Kod: html4strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>

  <title>Tytuł strony</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

  </head>

    <body>

    <!– Kursor dla pojedynczego odnosnika –>

    <a style="cursor:crosshair" href="index.html">egrafik.pl</a>

    <!–  Kursor dla pojedynczego akapitu –>

    <p style="cursor:help">egrafik.pl</p>

    </body>

</html>

Przykład 2 - kursor dla wszystkich znaczników a lub p:

Kod: html4strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>

  <title>Tytuł strony</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
    <style type="text/css">

    <!– Kursor dla wszystkich odnosnikow –>

    a {

    cursor:crosshair;

    }
    <!– Kursor dla tekstu w ramach elementu P –>

    p {

    cursor:help;

    }

    </style>
  </head>

   <body>

   </body>

</html>

Przykład 3 - własny kursor:

Kod: html4strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>

  <title>Tytuł strony</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

  </head>

   <body>

     <!– Wlasny kursor statyczny –>

     <a style="cursor:url("kursor.cur");" href="index.html">egrafik.pl</a>
     <!– Wlasny kursor animowany –>

     <a style="cursor:url("kursor.ani");" href="index.html">egrafik.pl</a>

   </body>

</html>

Poniżej lista dostępnych w css kursorów:

auto, croshair, default, e-resize, help, inherit, move, ne-resize, n-resize, nw-resize, pointer, se-resize, s-resize, se-resize, text, wait, w-resize.

Opracowanie: Adam Suchowski

nowe Porady CSS » zobacz wszystkie