Advanced Search

Return to Snippet

Revision: 8991
at October 16, 2008 12:53 by ezerick
Initial Code 
<style>
.IllumLetter {
float: left;
height: 20px;
width: 25px;
text-indent: -9999px;
}
</style>
<script language="javascript" type="application/javascript">
function textchange() 
{
	var contentDiv = document.getElementById("content");
	var containedDivElements = contentDiv.getElementsByTagName("P");
	for(i = 0; i < containedDivElements.length; i++)
	{
		var oldstring = containedDivElements[i].innerHTML;
		var pos = (oldstring.toUpperCase().charCodeAt(1) - 65) * 25;
		var style = "background: url(/images/letters.jpg) -" + pos +"px 0px no-repeat;";
		var newstring = oldstring.replace(oldstring[1],"<div class='IllumLetter' style='" + style + "'>" + oldstring[1] + "</div>");
		containedDivElements[i].innerHTML = newstring;	
	}
}
</script>
Initial URL 
http://mycodebytes.net/images/letters.jpg
Initial Description 
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
Initial Title 
Paragraph First Letter Swap (Illumination)
Initial Tags 
css
Initial Language 
JavaScript