Advanced Search

Paragraph First Letter Swap (Illumination)

/ Published in: JavaScript
Save to your folder(s)
this is a combination of javascript and css and an image called letters.jpg that allows you to use any font you want for the first letter of each paragraph. Letters.jpg needs to have all the letters in uppercase in a row. See the link for a sample letters image. This function should be called on body load

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. .IllumLetter {
  3. float: left;
  4. height: 20px;
  5. width: 25px;
  6. text-indent: -9999px;
  7. }
  8. </style>
  9. <script language="javascript" type="application/javascript">
  10. function textchange() 
  11. {
  12. 	var contentDiv = document.getElementById("content");
  13. 	var containedDivElements = contentDiv.getElementsByTagName("P");
  14. 	for(i = 0; i < containedDivElements.length; i++)
  15. 	{
  16. 		var oldstring = containedDivElements[i].innerHTML;
  17. 		var pos = (oldstring.toUpperCase().charCodeAt(1) - 65) * 25;
  18. 		var style = "background: url(/images/letters.jpg) -" + pos +"px 0px no-repeat;";
  19. 		var newstring = oldstring.replace(oldstring[1],"<div class='IllumLetter' style='" + style + "'>" + oldstring[1] + "</div>");
  20. 		containedDivElements[i].innerHTML = newstring;	
  21. 	}
  22. }
  23. </script>

URL: http://mycodebytes.net/images/letters.jpg

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.