Display full image on mouse click and mouse use using javascript and filters

function doImageShow(vImg)
{
if (navigator.product != "Gecko")
document.getElementById('imgCon').filters.item(0).Apply();

document.getElementById('imgShow').setAttribute('src',vImg.src);
document.getElementById('imgShow').setAttribute('alt', 'Click the image to close.');
document.getElementById('imgCon').style.display = "";
var newImg = document.getElementById('imgShow');
if (self.innerWidth)
{
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
}
else if (document.documentElement &&document.documentElement.clientWidth)
{
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
}
else if (document.body)
{
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
}
else
{
frameWidth = screen.availWidth;
frameHeight = screen.availHeight;
}
iWidth = newImg.width;
iHeight = newImg.height;
if(iWidth == 0) iWidth = 500;
if(iHeight == 0) iHeight = 500;
imgPosLeft = frameWidth/2 - iWidth/2 + document.body.scrollLeft;
imgPosTop = frameHeight/2 - iHeight/2 + document.body.scrollTop;
document.getElementById('imgCon').style.position = "absolute";
document.getElementById('imgCon').style.left = imgPosLeft;
document.getElementById('imgCon').style.top = imgPosTop;
if (navigator.product != "Gecko")
document.getElementById('imgCon').filters.item(0).Play();
}
function doImageClear()
{//clear the image
document.getElementById('imgShow').removeAttribute('src');
document.getElementById('imgCon').style.display = "none";
}

place the above script in head section of html

Now place one div with syle as none, and one image with fixed width and height.
when you click on the image, the showPic function will call, which will resize your image to big one.

<div id="imgCon" style="display: none; z-index: 100;filter:progid:DXImageTransform.Microsoft.Fade(duration=0.7);
        left: 10px; overflow: auto; position: absolute; top: 10px">
        <div class="closeLnk" onclick="doImageClear();">
            close</div>
        <div id="picLibImgHolder">
           <img class="imageStyle" class="galleryImg" id="imgShow" style="cursor: pointer" onclick="doImageClear();"
                border="0" name="imgShowN"></div>
    </div>

<img class="imageStyle" src="/PublishingImages/CFMR.jpg" width='100' height='80' id="imgCF" onclick="javascript:return showPic(this);"  />

Expanding image on mouseover

This code project artical is just a javascript, that will help you to animate your image or any display article, like a div from some specified size to another size. Thus enable you to make a dynamic web page were the pictures glows from thumbnail view to a full image.

http://www.codeproject.com/KB/scripting/Expanding_Image_Animator.aspx

Using BeforeProperties and AferProperties of ListItem Event Handler

Accessing Property of a list item directly

Public override void ItemAdded(SPItemEventProperties property)
{
string titlePro=properties.AfterProperties["Title"].toString();
int idProperty=conver.toInt32(properties.AfterProperties["Title"].toString());
}

Looping through property collection

Public override void ItemAdded(SPItemEventProperties property)
{
SPItemEventDataCollection propertyCollection=properties.AfterProperties;
foreach(DictionaryEntry entry in propertyCollection)
{
string filedName=entry.key.toString();
string fieldValue=entry.Value.toString();
}
}

Sharepoint SPField InternalName vs DisplayName

Following is the list of common spfieldcollection/spfield methods
and name they require (Display Name / Internal Name).

• SPFieldCollection[name] : SPField
  name: DisplayName
  
• SPFieldCollection.GetField(name) : SPField
  name: internalName, displayName or internalName and displayName from the current context
  
• SPFieldCollection.GetFieldByInternalName(name) : SPField
  name: internalName
  
• SPFieldCollection.ContainsField(name) : bool
  name: displayName or internalName
  
• SPListItem[name] : object
  name: internalName, displayName or internalName and displayName from the current context
  
• SPListItem.GetFormattedValue(name) : string
  name: internalName, displayName or internalName and displayName from the current context