My Photo

Andrew's Info

Andrew's Viewpoint

Logistics Viewpoint

Agoge Logistics News & Jobs

Blog powered by TypePad
Member since 09/2006

Java Script for Form to Create Image HTML Code

Image of form

I created a form that allows me to paste in the location of an image,  some text to display on mouse over, and a site to link to. The actual working form is available here

If you want the script see below. Feedback welcome!

Enjoy.

<SCRIPT LANGUAGE="JavaScript">

<!-- Script Available at http://my.agoge.net/blog/html_image_script_for_blo.html
<!-- Original:  Andrew Nicol  -->

<!--  Begin
var RadioSelection= "FLOAT: Left"
function MakeIt(form){
var Amargin= form.vmargin.value+'px';
var txt='<a href="'+form.onclickref.value+'"><img title="Loads from:'+form.loadsfrom.value+'" alt="'+form.loadsfrom.value+'" src="'+form.jpglink.value+'" border="0" style="'+RadioSelection+'"; MARGIN: '+Amargin+' '+Amargin+' '+Amargin+' '+Amargin+'" /></a>\r\n';
form.source.value=txt;
}
function ResetPage(form){
form.loadsfrom.value="";
form.source.value="";
form.onclickref.value="";
form.vmargin.value="";
form.jpglink.value="";
}
// End -->
</SCRIPT>

<head>
<META NAME="DESCRIPTION" CONTENT="HTML Image Script for Blogs: Makes a simple HTML code that allows you to use other sites images on your blog">
<META NAME="KEYWORDS" CONTENT="Blog HTML TypePad Images Link Andrew Nicol www.andrewnicol.net">
<title>HTML Image Script for Blogs</title>
</head>

<BODY>

<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" width="700">
    <tr>
      <td width="100%">
      </center>

  <center>

<FORM ACTION="">

<!-- Script Size:  2.07 KB  --><p align="left"><font face="Tahoma" color="#7F4121">&nbsp;</font>
<TABLE BGCOLOR="F7C483" border="2" cellpadding="4">
<TR>
<TD align="center">
  <p align="left" style="word-spacing: 0; margin: 0"><B><FONT SIZE="3" face="Tahoma" color="#7F4121">Loads from Site</font></b></p>
  <p align="left" style="word-spacing: 0; margin: 0"><font face="Tahoma" size="1" color="#7F4121">Text
  thats displayed on mouse over</font></p>
</TD>
<TD align="center">
  <p align="left"><font face="Tahoma" color="#7F4121"><INPUT TYPE="text" NAME="loadsfrom" value = "Andrew Nicol's Blog" size=32></font></p>
</TD>
</TR>

<TR>
<TD align="center">
  <p align="left" style="word-spacing: 0; margin: 0"><font face="Tahoma" size="3" color="#7F4121"><b>Image Location
  &nbsp;</b></font></p>
  <p align="left" style="word-spacing: 0; margin: 0"><font face="Tahoma" size="1" color="#7F4121">Http
  path of image&nbsp;</font></p>
</TD>

<TD align="center"><font face="Tahoma" color="#7F4121"><input type="text" name="jpglink" value="http://blog.nicol.co.nz/ViewFromNicolHouse.gif" size=70></font></TD>
</TR>

<TR>
<TD>
  <p align="left" style="word-spacing: 0; margin: 0"><b><font size="3" face="Tahoma" color="#7F4121">On Click</font></b></p>
  <p align="left" style="word-spacing: 0; margin: 0"><font face="Tahoma" size="1" color="#7F4121">Site
  or Image to goto if clicked</font></p>
</TD>
<TD align="center">
  <font face="Tahoma" color="#7F4121">
  <input type="text" name="onclickref" value="http://www.andrewnicol.net" size=70>
  </font>
</TD>
</TR>

<TR>
<TD><b><font size="3" face="Tahoma" color="#7F4121">Margin (pxs)&nbsp;&nbsp;&nbsp;</font></b></TD>
<TD align="center">
  <p align="left"><font face="Tahoma" color="#7F4121"><INPUT TYPE="number" NAME="vmargin" size=5 value = 5></font></p>
</TD>
</TR>

<TR>
<TD>
  <p align="left" style="word-spacing: 0; margin: 0"><b><font face="Tahoma" size="3" color="#7F4121">Float
  Position</font></b></p>
  <p align="left" style="word-spacing: 0; margin: 0"><font face="Tahoma" size="1" color="#7F4121">Text
  Wrap Left, Right or Nil</font></p>
</TD>
<TD align="center">
  <p align="left"><font face="Tahoma" color="#7F4121"><b><font size="3">&nbsp; </font></b><INPUT TYPE="radio" NAME="radiobutton" onClick="RadioSelection='FLOAT: Left'" value="1" checked>Left
<INPUT TYPE="radio" NAME="radiobutton" onClick="RadioSelection='FLOAT: Right'" value="2">Right<input type="radio" name="radiobutton" value="3" onClick="RadioSelection=''">No
  Float</font>
</TR>

<TR>
<TD><B><FONT SIZE="3" face="Tahoma" color="#7F4121"><input type="button" value="Create Code" onClick="MakeIt(this.form);"></font></B>
  <p><B><FONT SIZE="3" face="Tahoma" color="#7F4121"><input type="button" value=" Reset Form " onClick="ResetPage(this.form);"></font></B></p>
</TD>
<TD align="center">
  <p align="left"><font face="Tahoma" color="#7F4121">Here is your HTML code. Copy and Paste
  into post<FONT SIZE="2"><B><BR></b></font><B><FONT SIZE="2"><textarea name="source" rows=5 Cols=45></textarea></font></b></font></p>
</TD>
</TR>

</TABLE>
</form>
      </center>
    </td>
  </tr>
  </table>
</div>
<h2 class="module-header"><font face="Tahoma"><br>
</font></h2>
<div class="typelist-note">
  <p> <font face="Tahoma">
  <!-- AddThis Feed Button END -->
  </font>
</div>
<div class="typelist-note">
</div>
<p>&nbsp;</p>

Twitter (Last 5 entries)

Here is some script I customised to show the last 5 Twitter entries. It is based on Jon Aquino's code, but made to display 5 items. I loaded it into Typepad Notes (which enables HTML code).

The result looks like this:

...I have uploaded some code for Twitter at http://my.agoge.net 10 mins ago
..."Come to the edge. We might fall. Come to the edge. It's too high! Come to the edge! And they came, and he pushed...... and they flew." 2 days ago

The code is:

<script type="text/javascript">

            function twitterCallback(obj) {

                        var id = obj[0].user.id;

                        var html = '';

                           html += '...' + obj[0].text + '<span style="font-size: 0.6em;"> (' + obj[0].relative_created_at + ')</span></br>';

                           html += '...' + obj[1].text + '<span style="font-size: 0.6em;"> (' + obj[1].relative_created_at + ')</span></br>';

                           html += '...' + obj[2].text + '<span style="font-size: 0.6em;"> (' + obj[2].relative_created_at + ')</span></br>';

                           html += '...' + obj[3].text + '<span style="font-size: 0.6em;"> (' + obj[3].relative_created_at + ')</span></br>';

                           html += '...' + obj[4].text + '<span style="font-size: 0.6em;"> (' + obj[4].relative_created_at + ')</span></br>';

                        document.getElementById('my_twitter_status').innerHTML = html;

            }

            

</script>

<span id="my_twitter_status"></span> <span id="my_twitter_status_time"></span>

<script type="text/javascript" src="http://www.twitter.com/t/status/user_timeline/1368091?callback=twitterCallback&count=5"></script>

Warning:

- You must have at least 5 notes in twitter for it to work.

- You must change your user id number (Shown in red above)

Have fun. Post a comment if you find it helpful.