Images in Layers - JavaScript Made Easy

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Images in Layers		[View Sample]

An interesting method of picture viewing. In this script you can specify the coordinates of picture and after clicking on thumbnale of picture it'll appear in specified coordinates


Insert into <HEAD>
<script language="javascript"> // There is no layer created as yet var trigger=0 // There is no activated Layer var vis=0 function initthumb() { document.onmousemove = sniff document.onmouseup = sniff document.onmousedown = sniff // Trigger Netscape Mouse Check if (document.layers){document.captureEvents(Event.MOUSEDOWN \| Event.MOUSEMOVE \| Event.MOUSEUP)} // Call dummy to help IE get width + height if (document.all)dopic('dummy','',1,1,1,1) } function sniff(e){ // GETS Mouseposition if (document.layers) {var mousex=e.pageX; var mousey=e.pageY;fx=mousex;fy=mousey;} else if (document.all) {var mousex=event.x; var mousey=event.y+document.body.scrollTop;fx=mousex;fy=mousey} } function dopic(name,auto,picx,picy) { if (vis == 0) // No layer active, as double layers would bug :( { // Default coordinates/offsets var oldpicx=100; var oldpicy=100; //border-color var rahmen='silver' // Alt-text var alttext="Click to close the picture" // When there is no layer... if (trigger!=1) { trigger=1 // There is a layer now! // Create hidden layer (Netscape) if(document.layers){ //Piclayer document.layers['picarea'] = new Layer(1); document.layers['picarea'].left = oldpicx; document.layers['picarea'].top = oldpicy; document.layers['picarea'].height = 20; document.layers['picarea'].visibility = "hidden"; } // Create hidden Layer in Internet Explorer else if (document.all){ document.body.insertAdjacentHTML("BeforeEnd",'<DIV ID="picarea" STYLE="z-index:200;position:absolute;left:"+picx+";top:"+picy></DIV>'); } } // If there is a layer, hide it! if (trigger != 0){ if (document.layers){document.layers['picarea'].visibility="hide"} //Netscape if (document.all){picarea.style.visibility="hidden"} } // Define the layer's content content="<a href=\"javascript:clearpic()\" style=\"color:"+rahmen+"\"><img src=\""; content=content+name+"\" name=\"pic\" alt=\""+alttext+"\" border=1"; content=content+"></A>"; // Write content into layer and show it (Netscape) if (document.layers) { sprite=document.layers['picarea'].document; sprite.open(); sprite.write(content); sprite.close(); // If there is no auto set, place the layer at picx and picy if (picx != null && auto == ''){ document.layers['picarea'].left = picx; document.layers['picarea'].top = picy; } // If auto is set: if (auto != "") { // get the picture width/height xw=document.layers['picarea'].document.images['pic'].width yw=document.layers['picarea'].document.images['pic'].height // center the picture at mouseposition newpicx = fx - (xw/2) newpicy = fy - (yw/2) // if there are offsets, set them if (picx) {newpicx=newpicx + picx} if (picy) {newpicy=newpicy + picy} // place layer document.layers['picarea'].left = newpicx; document.layers['picarea'].top = newpicy; } // show layer document.layers['picarea'].visibility="show"; // set trigger vor visible layer vis=1 } // Write content into layer and show it (Internet Explorer) if (document.all) { document.all['picarea'].innerHTML = content; // If there is no auto set, place the layer at picx and picy if (picx != null && auto == ''){ picarea.style.top=picy picarea.style.left=picx; } // If auto is set: if (auto != "") { // get the picture width/height xw=document.all['pic'].width yw=document.all['pic'].height // center the picture at mouseposition newpicx = fx - (xw/2) newpicy = fy - (yw/2) // if there are offsets, set them if (picx) {newpicx=newpicx + picx} if (picy) {newpicy=newpicy + picy} // place layer picarea.style.top=newpicy; picarea.style.left=newpicx; } // show layer // name is not dummy if (name != "dummy") { picarea.style.visibility="visible"; // set trigger vor visible layer vis=1 } } // Older javascript able browser, show the pic else if (document.layers == null && document.all == null) {self.location=name}; } } // Hide layers on click function clearpic() { // deactivate visible trigger vis=0 if (document.layers){document.layers['picarea'].visibility="hide"}; if (document.all){picarea.style.visibility="hidden"}; } //--> </SCRIPT>

Insert into <BODY>
<CENTER> <font face="arial" size=2> <BR><BR><B>Pictures in layers</B><BR><BR> dopic('01257.jpg',1,0,200)<br> <a href="javascript:dopic('01257.jpg',0, 0,300)"><IMG SRC="tn_01257.jpg" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR> dopic('01260.jpg',1,200,100)<br> <a href="javascript:dopic('01260.jpg',0, 400, 100)"><IMG SRC="tn_01260.jpg" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR> dopic('01260.jpg',0,20,10)<br> <a href="javascript:dopic('01260.jpg',0,20,10)"><IMG SRC="tn_01260.jpg" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A> </FONT> </CENTER>

Other Options
<body bgcolor="#FFFFFF" text="#000000" link="#000000" onload="initthumb()" alink="#000000" vlink="#000000" >