login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Tekst effecten > Woord highlighter

Woord highlighter

Auteur: Ontani - 27 juni 2006 - 13:42 - Gekeurd door: Maarten - Hits: 5559 - Aantal punten: 5.00 (3 stemmen)




Dit script highlight het woord dat je bij je functie ingeeft.
om een bepaald woord te highlighten gebruik je de functie highlight('woord');
aan te roepen op eender welke plek, via link, knop of onload.

Veel plezier ermee.

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8.  
  9. body, html {
  10. 	font-size: 12px;
  11. 	font-family: Arial, Verdana;
  12. }
  13.  
  14. .highlight {
  15. 	text-decoration: underline;
  16. 	font-weight: bold;
  17. 	color: red;
  18. }
  19. -->
  20. </style>
  21.  
  22. <script type="text/javascript">
  23. <!--
  24.  
  25.  /*
  26.                                  .......
  27.                           ..&MMMMMMMMMMMMMMNa..
  28.   .MMMMMMMa&..        .JMMMMMMMMM""""""WMMMMMMMMN&.        ..&MMMMMMMN.
  29.  JMMD!` .!?""MMa.  .JMMMMMMMY^`           ."WMMMMMMMa. ..MM#""!!  !"MMF
  30.  .MF           ."MMMMMMMMY'                   ?WMMMMMMM"^           JMF
  31.   JM.             .TMMMD                        .YMM"^              J#
  32.    Th         .N&..  .YN.                      ..#^  ..JNMp        .#
  33.     ?h      .MMMMMMM    7N.                  .JD`   JMMMMMMh      .@
  34.      .N.   .MMMMMM@       .Wx              .M"       .MMMMMMN    .D
  35.       .W.  dMMMMMF          .Yx          .#=           WMMMMMh  J^
  36.           JMMMMMF             .Yx      .#^              WMMMMMF
  37.          .MMMMMF                 T`   "!                 MMMMMM
  38.          JMMMMM                                          .MMMMMF
  39.          dMMMMF   JMMa.                           .&MMr   4MMMMF
  40.          MMMMM    MMMMMMa.                     ..MMMMMM   .MMMMF
  41.          MMMMF    MMMMMMMMNJ.               ..MMMMMMMMM    MMMMF
  42.          JMMMF    JMMMMMMMMMMN&.         ..MMMMMMMMMMMF    JMMMF
  43.          JMMM      TMMMMMMMMMM""""     """"MMMMMMMMMM"     JMMM^
  44.           WMMF                                             JMMF
  45.           .MMh                                             MMM!
  46.            JMM,                                           JMM5
  47.             JMM,                                         JMMt
  48.              .MMN.                                    ..MMM^
  49.                4MMMN&..                           ..+MMMMD
  50.                 .WMMMMMMMMMNN&&&&&&&&&&&&&&&NNMMMMMMMMM#'
  51.                   .UMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMY!
  52.                      ?WMMMMMMMMMMMMMMMMMMMMMMMMMMM#^
  53.                         J"WMMMMMMMMMMMMMMMMMMM#"!
  54.                              .7"""""""""""^!
  55.  */
  56. function highlight(woord) {
  57.  if (woord == null) {
  58.   woord = "henk";
  59.  }
  60.  s = new String( document.getElementById('inhoud').innerHTML );
  61.  var woordenArray = new Array();
  62.  var inhoud = "";
  63.  woordenArray = s.split(" ");
  64.  for (i = 0; i < woordenArray.length; i++) {
  65.   if ( woordenArray[i].indexOf( "onclick" ) == -1) {
  66.    woordenArray[i] = woordenArray[i].replace( woord , "<span class=\"highlight\">" + woord + "</span>" );
  67.   }
  68.   inhoud += woordenArray[i] + " ";
  69.  }
  70.  
  71.  document.getElementById('inhoud').innerHTML = inhoud;
  72.  
  73. }
  74.  
  75. -->
  76. </script>
  77. </head>
  78.  
  79. <body>
  80. <div id="inhoud">
  81.  geschenk<br/>
  82.  Klein lief konijntje had een henk op z'n neus.<br/>
  83.  Klein lief konijntje had een henk op z'n neus.<br/>
  84.  Een henk op z'n neus, een henk op z'n neus.<br/>
  85.  <p>
  86.   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus
  87.   luctus porta justo. henk  Curabitur facilisis auctor leo. Vestibulum pretium
  88.   massa. Proin tempor risus nec dolor euismod varius. Pellentesque
  89.   pellentesque nulla vitae nunc. Duis magna sem, scelerisque eget,
  90.   dapibus nec, iaculis vitae, turpis. Integer laoreet varius augue. Donec
  91.   faucibus, neque nec placerat egestas, neque leo sollicitudin dui, a
  92.   tempus lacus nisl sed mauris. Nam est. Aenean viverra lectus eget nisl.
  93.   Fusce elementum. Pellentesque quis erat. Donec fringilla.
  94.  </p>
  95.  <p>
  96.   Pellentesque consectetuer lectus non dolor. Nulla pharetra erat sit
  97.   amet arcu. Vestibulum malesuada, odio id lacinia molestie, ante dui
  98.   aliquam nulla, vitae fringilla lacus orci quis arcu. Aliquam luctus
  99.   urna id nisl. Vestibul henk um euismod eleifend ant henk e. Nunc venenatis orci
  100.   rhoncus tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing
  101.   elit. Suspendisse velit nunc, ullamcorper a, vestibulum ut, ornare
  102.   eget, mi. Morbi rutrum nibh ac nisi elementum pretium. Curabitur varius
  103.   ullamcorper dolor. Nunc ligula risus, pellentesque et, porttitor eget,
  104.   bibendum sit amet, diam. In quis tortor. Curabitur ultricies sem vel
  105.   arcu. Morbi cursus. Nulla a ante. Morbi quam lorem, tincidunt ac,
  106.   congue sed,  henk laoreet quis, tortor. Nulla eu mauris ac massa elementum
  107.   laoreet. Aliquam egestas. Nulla elit.
  108.  </p>
  109.  <p>
  110.   Donec magna leo, viverra sit amet, ultrices id, bibendum nec, elit.
  111.   Sed libero augue, placerat nec, tempor ut, fermentum ac, velit.
  112.   Maecenas placerat dolor in massa euismod vehicula. Etiam pretium.
  113.   Vivamus eget arcu. Maecenas ac enim. Vestibulum tortor. Nam ante erat,
  114.   elem henk entum vitae, euismod ac, mollis non, lacus. Sed id justo vel quam
  115.   egestas pulvinar. Proin libero ipsum, fermentum ac, accumsan sed,
  116.   lobortis sit amet, ante. Donec sed est eget mi pellentesque ornare.
  117.   Suspendisse ultricies. Nulla henk m henk  mi eros, molestie in, fermentum lacinia,
  118.   fermentum sed, pede. Nullam ligula ante, porttitor auctor, scelerisque
  119.   quis, elementum eu, tortor. Nunc lorem pede, eleifend nec, laoreet id,
  120.   malesuada vel, velit. Curabitur dignissim iaculis elit. Vivamus id
  121.   augue. Phasellus egestas. Nunc malesuada malesuada purus. Suspendisse
  122.   enim.
  123.  </p>
  124.  <p>
  125.   Integer vitae nulla. Nullam lobortis fringilla quam. Aenean sit amet
  126.   diam. In quis neque eu arcu interdum cursus. Etiam sem enim, faucibus
  127.   pharetra, condimen henk tum vitae, auctor a, sapien. Pellent henk esque erat pede,
  128.   fringilla laoreet, bibendum eu, consectetuer vel, arcu. Ut dapibus.
  129.   Pellentesque laoreet accumsan nisl. In hac habitasse platea dictumst.
  130.   Quisque semper ipsum non augue. Morbi libero. Curabitur euismod nunc in
  131.   elit. Integer odio.
  132.  </p>
  133.  <p>
  134.   Suspendisse convallis luctus quam. Maecenas et leo a nunc sodales
  135.   pharetra. Nullam fringilla condimentum eros. Maecenas vestibulum magna
  136.   vitae libero. Class aptent taciti sociosqu ad litora torquent per
  137.   conubia nostra, per inceptos hymenaeos. Proin non tellus quis risus
  138.   cursus hendrerit. Duis non lorem. Quisque tortor felis, rhoncus id,
  139.   dictum a, viverra ac, sapien. Cras vitae sem. Duis velit. Fusce
  140.   lobortis. Donec eu nisi. Praesent et erat. Morbi at massa. Nullam
  141.   convallis tellus. Nunc venenatis dolor non diam. Praesent sit amet
  142.   sapien. Fusce venenatis mi vitae leo.
  143.  </p>
  144.  <a href='javascript:;' onclick="highlight();">highlight henk</a><br/>
  145.  <a href='javascript:;' onclick="highlight('et');">highlight et</a>
  146. </div>
  147. </body>
  148. </html>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (7)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.028s