Script Diaries: Lesson 1 - Sexy Widget That Displays a Sexy Quote and a Sexy Picture

Summary
This is lesson 1 of 4. It is the simplest form of widget possible. For this widget we will create some simple javascript that will randomly display an image and a quote. The images and quotes will be held in two arrays. The javascript Math.random function will be used to select an image. View this Widget !!!

Explanation
First let us have a quick look at the code. This is the simplest example so the code is very straigntforward.

 1. /*      scriptdiaries.blogspot.com 
 2.         Righteous Ninja aka Ping Ching.
 3.         Free to use and modify.*/
 4.         
 5. var SXY_cutegirls = new Array("http://codediaries.com/widgets/cutelnka/wid_cutelnka_anarkalli.jpg",
 6.                         "http://codediaries.com/widgets/cutelnka/wid_cutelnka_nadeeka.jpg",
 7.                         "http://codediaries.com/widgets/cutelnka/wid_cutelnka_derana.jpg");
 8. 
 9. var SXY_cutequotes = new Array(
10.     "Sex without love is an empty experience, but as empty experiences go, it's one of the best.",
11.     "Sex is not the answer. Sex is the question. Yes is the answer.",
12.     "Sex without love is an empty experience, but as empty experiences go, it's one of the best.",
13.     "The sex was so good that even the neighbors had a cigarette.",
14.     "The difference between pornography and erotica is lighting.",
15.     "Sex is like a bridge game; if you don't have a good partner, you better have a good hand."
16. );
17. 
18. function SXY_DoSexyWidget(){
19.     document.getElementById('cutelankapanel').innerHTML=
20.         "<center>"+
21.         "<img src=\""+SXY_cutegirls[Math.round((SXY_cutegirls.length-1)*Math.random())]+"\"/>"+
22.         "<br/>"+
23.         SXY_cutequotes[Math.round((SXY_cutequotes.length-1)*Math.random())]+
24.         "</center>";
25. }

Hide line numbers

Now let us look at how you would embed this in a web page

 1. <html>
 2.         <!--    
 3.         scriptdiaries.blogspot.com 
 4.         Righteous Ninja aka Ping Ching.
 5.         Free to use and modify.-->
 6. <head>
 7. 
 8. <style  TYPE="text/css">
 9. .cutelanka_quotes{font-family:arial;font-size:11px;color:#ffffff;}
10. </style>
11. 
12. <script type="text/javascript" src="sexywidget.js"></script>
13. 
14. </head>
15. <body>
16. 
17.     <table border="0" cellpadding="0" cellspacing="0" width="190px">
18.         <tbody>
19.             <tr><td background="frame_top.gif" height="10px"></td></tr>
20.             <tr><td bgcolor="#000000" class="cutelanka_quotes"><div id="cutelankapanel" width="100%"></div></td>
21.             </tr><tr><td background="frame_bottom.gif" height="10px"></td></tr>
22.         </tbody>
23.     </table>
24. <script>
25. SXY_DoSexyWidget();
26. </script>     
27. </body>
28. </html>