A.J.H. Computer Services - JavaScript Tips

Tips
As used on this website
All Variables in RED
Click Here

Body Text Photos Mouse Over Photos with Radius Radius+Mouse Over Pop-in Photos Adding Margin Mini Slideshow Bullet Zoom Scroll Links Buttons Drop Down Button Text Over Image Image Over Image

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

Sound Types

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

Pop-Up Window

In the HTML file
In Header
<SCRIPT TYPE="text/javascript">

</SCRIPT>
In the body at the link:-
<A HREF="xxx.html" onClick="return popup(this, 'Pop_Up')">Button</A>

Popup Image or Text
(Click Photo to Close Window)

(With Auto Close in 25 Second)

In Popup html:-
In the body at the link:-
You Can Also Auto Close Popup (In Header):-
<script type="text/javascript">
function closeWindow() {
setTimeout(function() {
window.close();
}, 25000); //set delay in miliseconds
}
window.onload = closeWindow();
</script>

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)

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

Mouse Over
From this to this

From This
Waverley Abbey, Surrey
To This

(with or without Link)

IN HEADER
<SCRIPT TYPE="text/javascript">

</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">
</SCRIPT>

Mouse Over Buttons

Download Buttons Zipped file (426kb)

Download Buttons Zipped file (113kb)

Welcome

Copy to HTML Body
<font color="#ff0000" size="5" face="Arial">
<script language="JavaScript"></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(2024,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>

If you can see this, your browser doesn't understand 'IFRAME'. <A HREF="frame4.html">Back to Home Page

Copyright Message on Image

Copy to HTML Header

<script language="JavaScript" Type="text/javascript">

</script>

In the body at the Image:-
<IMG SRC="xxxxx.xxx" onMouseDown="popupMsg('This image is Copyrighted')">

If you can see this, your browser doesn't understand 'IFRAME'. <A HREF="frame5.html">Back to Home Page

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>

If you can see this, your browser doesn't understand 'IFRAME'. <A HREF="frame6.html">Back to Home Page

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

If you can see this, your browser doesn't understand 'IFRAME'. <A HREF="frame3.html">Back to Home Page

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

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

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

HTML Analogue Clock

Download Full Code and Clock Faces
Zipped (114kb)

00 : 00 : 00 --

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>

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>

Drop Down Links With "GO" Button

In the HTML file
In body
<select name="list" id="list" accesskey="target">
<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>
<input type=button value="Go" onclick="goToNewPage()" />
<script>
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</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.

Contact Me

© A.J.H. Computer Services