Top of Page

A.J.H. Computer Services - Home Page A.J.H. Computer Services - Home Page

 AJH Sites  
Useful Files   Links to Good Sites
Other AJH Pages   Internet Tools

 CSS Tips Tips
As used on this website
All Variables in RED
Click Here
JavaScript Tips Tips
Some used on this website
All Variables in RED
This Page

Compare Two Images

Download for Header
Text file to put in HEADER Zipped
You will need to update the fourth line (height:)
In the HTML file
<div class="img-comp-container">
<div class="img-comp-img">
<img src="photo1.jpg" width="250" height="166" border="1" alt="Photo 1" title="Photo 1">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="photo2.jpg" width="250" height="166" border="1" alt="Photo 2" title="Photo 2">
</div>
</div>
<script>initComparisons();</script>
Compare Two Images Effect
(Move the blue slider)

Waverley Abbey, Surrey Photo 1
Waverley Abbey, Surrey Photo 2

Move the blue slider

Zoom Images

Download for Header
Text file to put in HEADER Zipped
You will need to update the first few lines
 
 
In the HTML file
<div class="img-zoom-container">
<img id="myimage" src="photo.jpg" width="250" height="166" border="1">
<div id="myresult" class="img-zoom-result" border="1" alt="photo" title="photo"></div>
</div>
<script>imageZoom("myimage", "myresult");</script>
Zoom Images Effect
(Move the Mouse Over Top Photo)

Move the Mouse Over Top Photo

Sound On Mouse Over

Download JS file sound-mouseover Zipped file (1kb)
Download Sounds files sounds Zipped file (43kb)
 
  In the HTML file
In header
<script type="text/javascript" src="sound-mouseover.js"></script>
In the body at the link:-
<A HREF="link.html" onmouseover="playclip();">........
or
<A HREF="link.html" onmousedown="playclip();">........
At the bottom of the body:-
<audio>
<source src="click.mp3"></source>
<source src="click.ogg"></source>
</audio>
<div id="sounddiv"><bgsound id="sound"></div>
Standard Link
Mouse Over - On Click

Button Link
Mouse Over On Click

Photo Link
Waverley Abbey, Surrey Waverley Abbey, Surrey

Wot No Flash Player?
Wot No Flash Player?
Wot No Flash Player?

Full-Screen

In the HTML file
At the bottom of the body:-
<style>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
</style>

Fullscreen
 

<A onclick="openFullscreen();">Button</A>

Open Fullscreen

<A onclick="closeFullscreen();">Button</A>

Close Fullscreen

Full-Screen Pop-Up

In the HTML file
In Header
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=yes');
}
</script>
In the body at the link:-
<A HREF="javascript:void(0);" onclick="fullScreen('xxx.html');">Button</A>
In Popup html:-
<A HREF="javascript:window.close()%3B">Image</A>
You Can Also Auto Close Popup (In Header):-
<script type="text/javascript">
function closeWindow() {
setTimeout(function() {
window.close();
}, 5000); //set delay in miliseconds
}
window.onload = closeWindow();
</script>

Full Screen Popup Image
(Click Photo to Close Window)

Waverley Abbey, Surrey

Full Screen Popup Image
(Click Photo to Close Window)
(With Auto Close in 5 Second)

Waverley Abbey, Surrey

Mouse Over

Home Page From this to this

Waverley Abbey, Surrey

From This
Waverley Abbey, Surrey
To This
Waverley Abbey, Surrey
(with or without Link)

IN HEADER
<SCRIPT TYPE="text/javascript">
<!--
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>

IN BODY
<A
HREF="../index.html"
onMouseOver = "rollover('home')"
onMouseOut = "rollout('home')"
><IMG
SRC="home.gif"
NAME="home"
ALT="Home Page" TITLE="Home Page" BORDER=0
HEIGHT=31 WIDTH=125
></A><SCRIPT TYPE="text/javascript">
<!--
setrollover("homea.gif");
//--></SCRIPT>

Mouse Over Buttons

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z None
1 2 3 4 5 6 7 8 9 0
Left Right Up Down Blank Numbers And @ Question
Download Buttons Zipped file (281kb)

A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z None
1 2 3 4 5 6 7 8 9 0 Numbers
Left Right Up Down Blank And @ Question
Download Buttons Zipped file (110kb)

Welcome

Copy to HTML Body
<font color="#ff0000" size="5" face="Arial">
<script language="JavaScript"><!--
now = new Date
if (now.getHours() < 5) {document.write("Hello")}
else if (now.getHours() < 12) {document.write("Good morning")}
else if (now.getHours() < 18) {document.write("Good afternoon")}
else {document.write("Good evening")}
// --></script></FONT>

Welcome2

Copy to HTML Body

Text file to put in HTML Body

Zipped
Welcome

Days To Go

Copy to HTML Body
<FONT SIZE=+2 color=#ff0000><B><CENTER><script>
var before="Christmas Day!"
var current="Today is Christmas Day!"
var montharray=new Array("Jan","Feb","Mar","Apr",
"May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countdown(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var futurestring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)
if (difference==0)
document.write(current)
if (difference==1)
document.write("Tomorrow is "+before)
else if (difference>0)
document.write("Only "+difference+" days until "+before)
}
//enter the count down date using the format year/month/day
countdown(2019,12,25) //set date
</script> </FONT>

Disable Select

Copy to HTML Header
 
<script language="JavaScript">
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Copyright Message on Image

Copy to HTML Header
 
<script language="JavaScript" Type="text/javascript">
<!--
function popupMsg(theMsg) {
alert(theMsg);
}
//-->
</script>
 
In the body at the Image:-
<IMG SRC="xxxxx.xxx" onMouseDown="popupMsg('This image is Copyrighted')">

Disable Right Click

Copy to HTML Header
 
<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>

One of the best ways to protect the contents of your web page is to have an opening page (it's best to Encrypt both pages (See Internet Tools) and from here have a pop-up using the above scripts "Disable Select" and "Disable Right Click" (useing these in the pop-up HTML) also add to the Header of the pop-up these lines:-

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<style type="text/css"> @media print { body { display:none } } </style>

But remember this isn't foolproof.

See Test Page

Snow

Download for HTML Header

Text file to put in HTML Header

Zipped

Marquee

Copy to HTML Body
<MARQUEE direction="left" scrollAmount=3 scrollDelay=44 align="BOTTOM" WIDTH="600"><B><FONT color=#ff0000 size=+1>Text/Photos Here</B></FONT></MARQUEE>
 
Stop on mouse over add this (Not all Browser)
onmouseover='this.stop();' onmouseout='this.start();'
Your Text Here
Waverley Abbey, Surrey Waverley Abbey, Surrey

Marquee2

Copy to HTML Body
<MARQUEE behavior=alternate height=26 width=300><B><FONT color=#ff0000 size=+1>Text/Photos Here</B></FONT></MARQUEE>
 
Stop on mouse over add this (Not all Browser)
onmouseover='this.stop();' onmouseout='this.start();'
Your Text Here
Waverley Abbey, Surrey Waverley Abbey, Surrey

Day and Night Photos

Copy to HTML Body
<noscript>
<img src='day.jpg' WIDTH="150" HEIGHT="100" BORDER="1">
</noscript>
<SCRIPT language="JavaScript">
var current= new Date()
var day_night=current.getHours()
if (day_night<=18)
document.write("<img src='day.jpg' WIDTH='150' HEIGHT='100' BORDER='1'>")
else
document.write("<img src='night.jpg' WIDTH='150' HEIGHT='100' BORDER='1'>")
</script>
 

Day Photo           Night Photo
Waverley Abbey, Surrey       Waverley Abbey, Surrey

Flash Clock

Download Full Code and Clock Faces
Zipped (172kb)
Flash Clock

Scroll to Top of Page (as used on this page)

In the HTML file
In Header
<style>
#myBtn {
display: none;
position: fixed;
z-index: 99;
}
</style>
In body
<A HREF="#top"><IMG SRC="xxxxx.xxx" ALT="Top of Page" TITLE="Top of Page" BORDER="0" HEIGHT="30" WIDTH="30" onclick="topFunction()" id="myBtn" >
At the bottom of the body
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

Top of Page Button

Drop Down Links to Other Pages

In the HTML file
In body
<select id="gotopage">
    <option value='none' selected>Go To Page</option>
    <option value="xx1.html">Page 1</option>
    <option value="xx2.html">Page 2</option>
    <option value="xx3.html">Page 3</option>
    <option value="xx4.html">Page 4</option>
    <option value="xx5.html">Page 5</option>
<select>
<script>
document.getElementById("gotopage").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
 
 
 
 
 
 

Popup Boxes

Alert Box
In the HTML file
<button onclick="myFunction()">Alert Box</button>
<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>
 
 
 
Confirm Box
In the HTML file
<button onclick="myFunction()">Confirm It</button>
<p id="demoyesno"></p>
<script>
function myFunction() {
    var txt;
    if (confirm("Press a button!")) {
    txt = "You pressed OK!";
    } else {
    txt = "You pressed Cancel!";
    }
    document.getElementById("demoyesno").innerHTML = txt;
    }
</script>
 
 
 

Enter Your Name
In the HTML file
<button onclick="myFunction()">Enter Your Name</button>
<p id="demoname"></p>
<script>
function myFunction() {
    var txt;
    var person = prompt("Please enter your name:", "");
    if (person == null || person == "") {
    txt = "User cancelled the prompt.";
    } else {
    txt = "Hello " + person + "! How are you today?";
    }
    document.getElementById("demoname").innerHTML = txt;
}
</script>
 
 
 

Random Image and Reload Button

In the HTML file
<img id=a ALT="Photo" TITLE="Photo" WIDTH="300" HEIGHT="200" BORDER="1"> <script>;document.getElementById('a').src="./images/"+Math.abs( Math.round(Math.random()*20))+".jpg";</script>
 
Reload Button
<button onclick="myFunction()">Reload Page</button>
<script>
function myFunction() {
location.reload();
}
</script>
Random Image when Page Loaded
(Images 0.jpg to 19.jpg (20 photos)
 
Waverley Abbey, Surrey
 

Random Image With Timer

Random Image with Timer
(All 20 Images Randomly)
 
In the HTML file
<script language="javascript">
var delay=50000 //set delay in miliseconds
var curindex=0
var randomimages=new Array()
randomimages[0]="1.jpg"
randomimages[1]="2.jpg"
randomimages[2]="3.jpg"
(and so on)
var preload=new Array()
for (n=0;n{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'(properties of images)>')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
 
CSS Tips

These website files are given here "as is" basis. A.J.H. Computer Services makes no representations or warranties of any kind, express or implied, as to the operation of the sites. The information, content, materials or products, included with these files. To the full extent permissible by applicable law, A.J.H. Computer Services disclaims all warranties, express or implied, including but not limited to, implied warranties of merchantability and fitness for a particular purpose. A.J.H. Computer Services will not be liable for any damages of any kind arising from the use of these files, including but not limited to direct, indirect, incidental punitive and consequential damages.

Top of Page


A.J.H. Computer Services - Home Page
Contact Me
© A.J.H. Computer Services