Hi guys! I don't know if what I want done is doable but... Here s the thing: I'm trying to create a theme for my site that will look like an ancient illuminated book (or so I try ). I was thinking then if it would be any way to automatically replace the first letter in the posts or posts title (talking Wordpress here) with a set of corresponding illuminated letter images uploaded on my server. I found something (as I suspected java would be the thing for it) that may do the trick. Or so I think, as I'm not really familiar with java I'm afraid. http://snipplr.com/view/9062/paragraph-first-letter-swap-illumination/ Code (markup): So here is the challenge now. Can any of you tell me if this the thing I am looking for, and if yes how should I implement it? The guy's explanation is not really clear and the image set is missing so I don't really understand how this should look. Brainstorming time!
First to mention that it is not JAVA. Java and javscript are two differnt entities. While javascript is a scripting language , java is a full-fledged programming language. Then about the script. The script doesn't seem to work properly. There are one or two small mistakes. The corrected one including html is following. [LIST=1] [*]<html> [*]<head> [*]<style> [*].IllumLetter [*]{ [*] float: left; [*] height: 40px; [*] width: 20px; [*]} [*]</style> [*]<script language="javascript"> [*]function textchange() [*]{ [*] try [*] { [*] var contentDiv = document.getElementById("content"); [*] var containedDivElements = contentDiv.getElementsByTagName("span"); [*] for(i = 0; i < containedDivElements.length; i++) [*] { [*] var oldstring = containedDivElements[i].innerHTML; [*] var pos = (oldstring.toUpperCase().charCodeAt(0) - 65) * 30 + 10; [*] var style = "background: url(letter.jpg) -" + pos +"px -15px no-repeat;"; [*] var newIllumChar = "<div class='IllumLetter' style='" + style + "'> </div>"; [*] var newstring = oldstring.replace(oldstring.charAt(0),newIllumChar); [*] containedDivElements[i].innerHTML = newstring; [*] } [*] } [*] catch(err) [*] { [*] alert(err); [*] } [*]} [*]</script> [*]</head> [*]<body onLoad="textchange()"> [*]<div id="content"> [*]<span>Dost JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.</span> [*]<br> [*]<br> [*]<span>For 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.</span> [*]</div> [*]</body> [*]</html> [/LIST] Code (markup): Lines 3 to 10 define the style of the illuminated letter image. This keeps the image to be of a fixed width and height. I have made just a sample image(not so correct).The image consists of letters from A to Z , each of which has a 30px span. So the image has to be total 26*30 = 780 px wide(format it - with each letter spanning 30px). Note that there is only a single image with letters written horizontally and in alphabetical order. The script gets the value of the 'content' div(you can give it any name). This tag may contain one or more spans(paragraphs wont work). Now using a loop, take one span at a time and replaces the first letter of the span with its corresponding letter image. In line 21, the ascii code of the first char of the span is retrieved and its position in the image is found out. A div with the positioned image as bg is created and added to the span. I have attached the image file along with the post. Hope this helps
Heh, excuse me for the confusion please. I know the difference between Java and javascript, just because I'm a lazy ass I sometimes "abreviate" words when I shouldn't. As for your post, thank you for taking the time to explain me so clear and correcting the code. Meanwhile I found out that this can be easily done with CSS and already using it to get that "illuminated" effect. And I somehow think the CSS method has less limitations than the java(script ) one. Anyway, thank you for taking your time with this and rep added. Maybe I'll get as smart as you are one day.