Magic picture effect - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Magic picture effect

A new, exciting and funny way to unveil the truth behind your images. Cross-browser.


Insert into <HEAD>
<SCRIPT LANGUAGE="JavaScript"> // CREDITS: // Magic unveiling effect script by Urs Dudli and Peter Gehrig // Copyright (c) 1999 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.ch. // info@24fun.ch // 1/19/2000 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a link to http://www.24fun.ch on the webpage // where the Magic unveiling effect script will be running. var isNav, isIE var offsetX, offsetY var selectedObj var dragimg_width=64 var dragimg_height=64 var dragimg_startx=410 var dragimg_starty=80 var clipLeft=dragimg_startx var clipTop=dragimg_starty var clipRight=clipLeft+dragimg_width var clipBottom=clipTop+dragimg_height if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } function setZIndex(obj, zOrder) { obj.zIndex = zOrder } function shiftTo(obj, x, y) { if (isNav) { obj.moveTo(x,y) document.bgimage.clip.top=y document.bgimage.clip.left=x document.bgimage.clip.bottom=y+dragimg_height document.bgimage.clip.right=x+dragimg_width } else { clipTop=y clipLeft=x clipBottom=y+dragimg_height clipRight=x+dragimg_width document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")" obj.pixelLeft = x obj.pixelTop = y } } function setSelectedElem(evt) { if (isNav) { var testObj var clickX = evt.pageX var clickY = evt.pageY for (var i = document.layers.length - 1; i >= 0; i--) { testObj = document.layers[i] if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height) && (testObj.name=="picture1")) { selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { var imgObj = window.event.srcElement if (imgObj.parentElement.id.indexOf("picture") != -1) { selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } selectedObj = null return } function dragIt(evt) { if (selectedObj) { if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) return false } } } function engage(evt) { setSelectedElem(evt) if (selectedObj) { if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } return false } function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } function setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN \| Event.MOUSEMOVE \| Event.MOUSEUP) } } function init() { if (isNav) { setNavEventCapture() } document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release if (document.all) { clipTop=dragimg_starty clipLeft=dragimg_startx clipBottom=clipTop+dragimg_height clipRight=clipLeft+dragimg_width document.all.picture1.style.posLeft=dragimg_startx document.all.picture1.style.posTop=dragimg_starty document.all.bgimage.style.posLeft=0 document.all.bgimage.style.posTop=0 document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")" } if (document.layers) { document.bgimage.clip.left=dragimg_startx document.bgimage.clip.right=clipLeft+dragimg_width document.bgimage.clip.top=dragimg_starty document.bgimage.clip.bottom=clipTop+dragimg_height document.picture1.left=dragimg_startx document.picture1.top=dragimg_starty document.bgimage.left=0 document.bgimage.top=0 } } // - End of JavaScript - --> </SCRIPT> <style type="text/css"> A, A:Visited, A:Active { color:000000; } A:Hover { color:FF0000; } .baselinestyle { position: absolute; left:10px; top:200px; font-size:8pt; font-family:Verdana; } </STYLE>

Insert into <BODY>
<BODY onLoad="init()"> <DIV ID="bgimage" style="position:absolute;left:0px;top:-3000px;"><IMG NAME="bgimagpic" SRC="pic191.jpg"></DIV> <DIV ID="picture1" style="position:absolute;left:0px;top:-3000px;"><IMG NAME="picturePic1" SRC="dragpic191.gif"></DIV>

Other Options