[HTML] Anklickbare Listen-Icons - Schnipseldatenbank

(11.04.2010 19:47) Mit diesem kleinen JavaScript Hack kann man die Listen-Icons einer ol-Liste anklickbar machen.
Ist JavaScript deaktiviert, kann nur der Text des Listen Elementes angeklickt werden. Ist JavaScript aktiviert, wird durch das return false; im Link verhindert, dass sich die Seite zweimal öffnet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Just a Test</title>
 
      <script type="text/javascript">
      //<![CDATA[
         function openwin(url) {
            win = window.open(url);
            win.focus();
         }
      //]]>
      </script>
      <style type="text/css">
         * { color:black!important; text-decoration:none!important; }
         ol li { cursor:pointer; }
      </style>
   </head>
 
   <body>
 
      <h1>Einen Eintrag in der Liste anklicken:</h1>
      <ol>
         <li onclick="openwin('http://www.unixboard.de')"><a href="http://www.unixboard.de" onclick="return false;" target="_blank">unixboard.de</a></li>
         <li onclick="openwin('http://blog.sim4000.de')"><a href="http://blog.sim4000.de" onclick="return false;" target="_blank">blog.sim4000.de</a></li>
      </ol>
 
   </body>
</html>

Anklickbare Listen-Icons

Quellcode (ausblenden | aufklappen)

Vorschau (ausblenden | aufklappen)