Phiên bản đầy đủ: jsB@nk » Hình ảnh » Hình ảnh trong khung
URL: https://www.javascriptbank.com/pictures-in-layers-index.html
Đoạn mã này sẽ hiển thị hình ảnh trong một khung khi người dùng nhấn vào ảnh và khung chứa ảnh này sẽ biến mất khi nó được click thêm lần nữa.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Hình ảnh trong khung
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