Monday, October 6, 2008

Asp.Net

This is javascript for Mouse hover image expansion
<script>
// Thumbnail expansion and reduction animation//use expandthumb(
exid = 0;exstep = 0;exwdth = 0;exht = 0;extp = 0;exlft = 0;extot = 0;extotst = 15;
function expandthumb(thumbid, fullwidth, fullheight)
{
if (extot != 0) {
clearTimeout(extot);
}
if (exid > 0 && exid != thumbid) {
restorethumb(); }
if (exid != thumbid) {
img = document.getElementById("screen" + thumbid);
img.style.display = 'block'; exid = thumbid;
exstep = 1;
exwdth = fullwidth;
exht = fullheight;
extp = img.offsetTop;
exlft = img.offsetLeft; }
else if (exstep < 1) { exstep = 1; } expandstep();}
function doexpand() {
img = document.getElementById("screen" + exid);
thumb = document.getElementById("thumb" + exid);
myscroll = getScroll();
if (extp + thumb.height > myscroll.top + myscroll.height) {
finaltop = myscroll.top + myscroll.height - exht; } else { finaltop = extp + thumb.height - exht; }
if (finaltop < myscroll.top) { finaltop = myscroll.top; }
img.style.top = finaltop + ((extp - finaltop) * (extotst - exstep) / extotst) + 'px';
if (exlft + thumb.width > myscroll.left + myscroll.width) {
finalleft = myscroll.left + myscroll.width - exwdth; }
else { finalleft = exlft + thumb.width - exwdth; }
if (finalleft < myscroll.left) { finalleft = myscroll.left; } img.style.left = finalleft + ((exlft - finalleft) * (extotst - exstep) / extotst) + 'px';
img.width = thumb.width + ((exwdth - thumb.width) * exstep / extotst); img.height = thumb.height + ((exht - thumb.height) * exstep / extotst);}

function restorethumb() {
img = document.getElementById("screen" + exid);
img.style.top = ''; img.style.left = '';
img.style.display = 'none'; exid = 0;}

function expandstep() {
extot = 0; doexpand();
if (exstep < extotst) {
exstep++; extot = setTimeout("expandstep()", 20); }}

function reducestep() {
extot = 0; doexpand();
if (exstep > 0) {
exstep--; extot = setTimeout("reducestep()", 20); }
else { restorethumb(); }}

// returns the scroll position and size of the browser
function getScroll() {
if (document.all && typeof document.body.scrollTop != "undefined") {
// IE model
var ieBox = document.compatMode != "CSS1Compat";
var cont = ieBox ? document.body : document.documentElement;
return {
left: cont.scrollLeft, top: cont.scrollTop, width: cont.clientWidth, height: cont.clientHeight }; }
else { return { left: window.pageXOffset, top: window.pageYOffset, width: window.innerWidth, height: window.innerHeight }; }}
<script>

<img src='12.jpg' width="400" height="400" alt='img' border="2" id='screen112' onmouseout='reducethumb(112); return false;' style='position: absolute; display: none;'>
<img src='12.jpg' width="100" height="100" alt='mis' border="2" id='thumb112' onmouseover='expandthumb(112, 500, 449);'>

No comments: