Full version: jsB@nk » Image » Pictures in Layers
URL: https://www.javascriptbank.com/pictures-in-layers-index.html
This JavaScript will display picture in a layer when visitors click images and this layer will disappear when it is clicked.
Full version: jsB@nk » Image » Pictures in Layers
URL: https://www.javascriptbank.com/pictures-in-layers-index.html
<SCRIPT language=javascript>// There is no layer created as yetvar trigger=0// There is no activated Layervar vis=0function initthumb(){document.onmousemove = sniffdocument.onmouseup = sniffdocument.onmousedown = sniff// Trigger Netscape Mouse Checkif (document.layers){document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}// Call dummy to help IE get width + heightif (document.all)dopic('dummy','',1,1,1,1)}function sniff(e){// GETS Mousepositionif (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/offsetsvar oldpicx=100;var oldpicy=100;//border-colorvar rahmen='silver'// Alt-textvar 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){//Piclayerdocument.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 Explorerelse 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"} //Netscapeif (document.all){picarea.style.visibility="hidden"}}// Define the layer's contentcontent="<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 picyif (picx != null && auto == ''){ document.layers['picarea'].left = picx;document.layers['picarea'].top = picy;}// If auto is set:if (auto != ""){ // get the picture width/heightxw=document.layers['picarea'].document.images['pic'].width yw=document.layers['picarea'].document.images['pic'].height// center the picture at mousepositionnewpicx = fx - (xw/2) newpicy = fy - (yw/2)// if there are offsets, set themif (picx) {newpicx=newpicx + picx}if (picy) {newpicy=newpicy + picy} // place layerdocument.layers['picarea'].left = newpicx;document.layers['picarea'].top = newpicy;}// show layerdocument.layers['picarea'].visibility="show";// set trigger vor visible layervis=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 picyif (picx != null && auto == ''){picarea.style.top=picypicarea.style.left=picx;}// If auto is set:if (auto != ""){ // get the picture width/heightxw=document.all['pic'].widthyw=document.all['pic'].height// center the picture at mouseposition newpicx = fx - (xw/2) newpicy = fy - (yw/2)// if there are offsets, set themif (picx) {newpicx=newpicx + picx}if (picy) {newpicy=newpicy + picy} // place layerpicarea.style.top=newpicy;picarea.style.left=newpicx;}// show layer// name is not dummy if (name != "dummy") {picarea.style.visibility="visible";// set trigger vor visible layervis=1}}// Older javascript able browser, show the picelse if (document.layers == null && document.all == null) {self.location=name};}}// Hide layers on clickfunction clearpic(){// deactivate visible trigger vis=0if (document.layers){document.layers['picarea'].visibility="hide"};if (document.all){picarea.style.visibility="hidden"};}//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=initthumb()>dopic('01257.jpg',1,0,200)<BR><A href="javascript:dopic('01260.jpg',0,%200,300)"><IMG height=72 alt="" src="tn_01257.jpg" width=96 border=0></A><BR><BR>dopic('01260.jpg',1,200,100)<BR><A href="javascript:dopic('01260.jpg',0,%20400,%20100)"><IMG height=72 alt="" src="tn_01260.jpg" width=96 border=0></A><BR><BR>dopic('01260.jpg',0,20,10)<BR><A href="javascript:dopic('01260.jpg',0,20,10)"><IMG height=72 alt="" src="tn_01260.jpg" width=96 border=0></A></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/image/Pictures_in_Layers/01260.jpghttp://javascriptbank.com/javascript/image/Pictures_in_Layers/tn_01257.jpghttp://javascriptbank.com/javascript/image/Pictures_in_Layers/tn_01260.jpg