Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
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" >