How to get images with JS effect to appear in blog?

[foevah]

I'm trying to apply THIS to my blog entry form where the images uploaded will have the expanding image effect attached to them!

 

Ive uploaded an image called cat_small.gif using the form in the code below that I got from a phpfreaks tutorial. I uploaded an image called cat_big.gif using my ftp program because I dont want the bigger image to appear in the blog entries, I only want it to appear on rollover.

 

Right now the images upload to a directory called files and currently they dont appear in my blog entrys alongside text. Can someone tell me how to get the images to appear in the blog entry form alongside the text please!?  ???

 

I hope getting the images to load in the blog entry form is easy because I know my next question is harder!

 

What I'm trying to do is get the javascript that does the expanding image effect on rollover to display all images with the suffix _big.gif on all images entered into the blog!  :o

 

Here's the code for my blog page. I've managed to add my own smiley faces and I hope I can apply something similar achieve this image expand effect! (The image upload form is at the end of the code)

 

<script type="text/javascript">
function addsmiley(string) {

var newtext = string;
document.addthread.entry.value += newtext;
document.addthread.entry.focus();
return;

}

</script>

<?php

if (isset($_POST['submit'])) {

    $title = htmlspecialchars(strip_tags($_POST['title']));
    $entry = $_POST['entry'];
    $entry = nl2br($entry);

    if (!get_magic_quotes_gpc()) {
        $title = addslashes($title);
        $entry = addslashes($entry);
    }

    mysql_connect ('localhost', 'USERNAME', 'PASSWORD') ;
mysql_select_db ('DB_USERNAME');

    $sql = "INSERT INTO php_blog (title,entry) VALUES ('$title','$entry')";

    $result = mysql_query($sql) or print("Can't insert into table php_blog.<br />" . $sql . "<br />" . mysql_error());

    if ($result != false) {
        print "Your entry has successfully been entered into the database.";
    }

    mysql_close();
}
?>

<form name="addthread" method="post" action="<?php echo $_SERVER['../PHP_SELF']; ?>">

<p><strong><label for="title">Title:</label></strong> <input type="text" name="title" name="title" size="40" /></p>

<img src="../images/smile.gif" width="15" height="15" onClick="addsmiley('')"> 

<p><textarea name="entry" cols="80" rows="20" id="entry">  </textarea></p>

<p><input type="submit" name="submit" id="submit" value="Submit"></p>

</form>

<form name="form1" method="post" action="" enctype="multipart/form-data">
<input type="file" name="imagefile">
<br>
<input type="submit" name="Submit" value="Submit"> <?
if(isset( $Submit ))
{
//If the Submitbutton was pressed do:

if ($_FILES['imagefile']['type'] == "image/gif"){ copy ($_FILES['imagefile']['tmp_name'], "files/".$_FILES['imagefile']['name']) 
    or die ("Could not copy"); 
  echo ""; 
        echo "Name: ".$_FILES['imagefile']['name'].""; 
        echo "Size: ".$_FILES['imagefile']['size'].""; 
        echo "Type: ".$_FILES['imagefile']['type'].""; 
        echo "Copy Done...."; 
        } 
	   else {
            echo "<br><br>";
            echo "Could Not Copy, Wrong Filetype (".$_FILES['imagefile']['name'].")<br>";
        }
} 

?> </form>