Sophie Leetmaa	Gallery	Categories	About	Contact

This is the index / guide for the html / css / javascript I used on this site.

	Tables	rollover / hover	random image	random link	dividers / hr	Favicons
Floats	drop shadow	text shadow	shuffle content	scripts	Image Maps

_{^{Click to randomly cycle through images (without page reload)}}	X	1st section in header; place 2nd in body / table <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Nicholas Lupien (smylex@aol.com) --> <!-- Begin var rand1 = 0; var useRand = 0; images = new Array; images[1] = new Image(); images[1].src = "images-248.jpeg"; images[2] = new Image(); images[2].src = "images-252.jpeg"; images[3] = new Image(); images[3].src = "images-379.jpeg"; images[4] = new Image(); images[4].src = "images-239.jpeg"; images[5] = new Image(); images[5].src = "images-253.jpeg"; images[6] = new Image(); images[6].src = "images-242.jpeg"; images[7] = new Image(); images[7].src = "images-316.jpeg"; images[8] = new Image(); images[8].src = "images-235.jpeg"; images[9] = new Image(); images[9].src = "images-286.jpeg"; images[10] = new Image(); images[10].src = "images-237.jpeg"; images[11] = new Image(); images[11].src = "images-325.jpeg"; images[12] = new Image(); images[12].src = "images-150.jpeg"; images[13] = new Image(); images[13].src = "images-153.jpeg"; images[14] = new Image(); images[14].src = "images-147.jpeg"; images[15] = new Image(); images[15].src = "images-307.jpeg"; function swapPic() { var imgnum = images.length - 1; do { var randnum = Math.random(); rand1 = Math.round((imgnum - 1) * randnum) + 1; } while (rand1 == useRand); useRand = rand1; document.randimg.src = images[useRand].src; } // End --> </script> <a onclick="swapPic();"><img 16.jpg="" name="randimg" src="images-286.jpeg" style="height:560px;" /></a>
Key-shortcut to leave a page, or could be used as a hidden link		<p><script language="Javascript1.2"> <!-- // please keep these lines on when you copy the source // made by: Nicolas - http://www.javascript-page.com var quickkey = 110 var url = "https://sophieleetmaa.com/compressionartifact/compressionindex.html" if(navigator.appName == "Netscape") { document.captureEvents(Event.KEYPRESS); } function qk(keyp){ if(navigator.appName == "Netscape") { if (keyp.which == quickkey) window.location = url; } if (navigator.appVersion.indexOf("MSIE") != -1){ if (keyp.keyCode == quickkey) window.location = url; } } document.onkeypress = qk //--> </script>Press N to leave the /n/___.html path</p>
The page's tile background changes when you hover over an image- _{Desktop Only}	X	<a href="#" onmouseover="changeWall('/gr/bg_mild/MT06.jpg')"><img border="0" height="70" src="/gr/bg_mild/MT06.jpg" width="70" /> _ <SCRIPT LANGUAGE="JavaScript"> function changeWall(wallName) { document.body.background = wallName; } </SCRIPT>

Hovering functions as a click	X	<a [...] href="/page.html" onmouseover="window.location=this.href" shape="poly" target="" title="" />
Hovering functions as a click	X

Changing picture on a specific time / day		<body> <script type="text/javascript"> var now = new Date(); var today = now.getDay(); var startTime = new Date(); startTime.setHours(08); startTime.setMinutes(23); startTime.setSeconds(00); var endTime = new Date(); endTime.setHours(14); endTime.setMinutes(43); endTime.setSeconds(00); if (today > 0 && today < 6) { if (startTime < now && endTime > now) {document.write('<img src="image2.jpg">');} else {document.write('<img src="image1.jpg">');} } else {document.write('<img src="image1.jpg">');} </script> </body> ------(https://www.sitepoint.com/community/t/changing-picture-based-on-time/6073/7)

Slowly drifting div container; can be made transparent by just removing the color value from background-color: ;	X	<style type="text/css">div.a { width: 50px; height:50px; background-color:red; position:fixed; } </style> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> <link href="/css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/css/result-light.css" rel="stylesheet" type="text/css" /> <style id="compiled-css" type="text/css">div.a { width: 50px; height:50px; background-color:red; position:fixed; } </style> <!-- TODO: Missing CoffeeScript 2 --><script type="text/javascript"> $(window).load(function(){ $(document).ready(function(){ animateDiv(); }); function makeNewPosition(){ // Get viewport dimensions (remove the dimension of the div) var h = $(window).height() - 20; var w = $(window).width() - 30; var nh = Math.floor(Math.random() * h); var nw = Math.floor(Math.random() * w); return [nh,nw]; } function animateDiv(){ var newq = makeNewPosition(); var oldq = $('.a').offset(); var speed = calcSpeed([oldq.top, oldq.left], newq); $('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){ animateDiv(); }); }; function calcSpeed(prev, next) { var x = Math.abs(prev[1] - next[1]); var y = Math.abs(prev[0] - next[0]); var greatest = x > y ? x : y; var speedModifier = 0.04; var speed = Math.ceil(greatest/speedModifier); return speed; } }); </script> </head> <body> <div class="a">imgs</div> <p>---</p> </body> </html>

How I made my 404 pages





how to upload font, or use a public web safe font