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
JavaScript Tips Tips
All Variables in RED
 
You can download a "Zipped" file with the STYLE.CSS file Click Here (2kb)
 
1. To set the page Colour and and Background
body {
background-color: #EFEFEF;
background-image: url("images/bg.jpg");
}
 
2. To set the default for the Text
P { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: justify
}

DT { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: justify
}
 
3. To override the default text format, eg: (in the HTML file) <P class="left">
P.right { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: right
}

P.left { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: left
}

DT.left { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: left
}

DT.right { color: Black;
font-size: medium;
font-family: "Times New Roman", serif;
text-align: right
}

Better Looking Photos

.frame {
border: 1px solid #000;
border-radius: 20px;
padding: 3px;
}
Adding a Frame to Your Photos
<IMG class="frame" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr {
border: 2px solid transparent;
padding: 2px;
border-radius: 25px;
}
Adding a Radius (No border)
<IMG class="imgbr" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr2 {
border: 1px solid black;
padding: 0px;
border-radius: 15px;
}
Adding a Radius (with border)
<IMG class="imgbr2" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr3 {
border: 0px solid transparent;
padding: 0px;
border-radius: 8px;
}
Adding a Small Radius (No border)
<IMG class="imgbr3" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

.imgbr4 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
}

.imgbr4:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Adding Radius & DIM Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr4" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr5 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr5:hover {
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}
Adding Radius & BIG Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr5" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr5a {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr5a:hover {
transform: scale(0.9, 0.9);
opacity: 1;
z-index: 1;
}
Adding Radius & SMALL Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr5a" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr6 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr6:hover {
transform: rotate(15deg);
opacity: 1;
z-index: 1;
}
Adding Radius & ROTATE Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr6" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr7 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr7:hover {
transform: rotate(360deg);
opacity: 1;
z-index: 1;
}
Adding Radius & SPIN Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr7" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr8 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}

.imgbr8:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Radius & BLACK & WHITE Effect
(with border and Mouse Over)
(You could also add link)

<IMG class="imgbr8" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgbr9 {
border: 1px solid black;
padding: 0px;
border-radius: 8px;
transition: 0.3s ease;
}
.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
}
Radius & Shake a Photo (with Mouse Over)
(You could also add link)

<IMG class="imgbr9" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.gallery {
display: inline-block;
border: 1px solid #0b610b;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
opacity: 1;
filter: alpha(opacity=100);
}

.gallery:hover {
box-shadow: 0 0 2px 3px rgba(256, 0, 0, 1);
opacity: 0.5;
filter: alpha(opacity=50);
}
Gallery Thumbnails (with Mouse Over)
(You could also add link)

<IMG class="gallery" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.big {
position: relative;
opacity: 1;
transform: scale(1, 1);
transition: 0.3s ease;
}

.big:hover {
transform: scale(1.1, 1.1);
opacity: 1;
z-index: 1;
}
Adding a BIG Effect (with Mouse Over)
(You could also add link)

<IMG class="big" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.small {
position: relative;
opacity: 1;
transform: scale(1, 1);
transition: 0.3s ease;
}

.small:hover {
transform: scale(0.9, 0.9);
opacity: 1;
z-index: 1;
}
Adding a SMALL Effect (with Mouse Over)
(You could also add link)

<IMG class="small" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.dim {
opacity: 1.0;
filter: alpha(opacity=100);
transition: 0.3s ease;
}

.dim:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Adding a DIM Effect (with Mouse Over)
(You could also add link)

<IMG class="dim" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.rotate {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.rotate:hover {
transform: rotate(-15deg);
opacity: 1;
z-index: 1;
}
Adding a ROTATE Effect (with Mouse Over)
(You could also add link)

<IMG class="rotate" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.spin {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.spin:hover {
transform: rotate(360deg);
opacity: 1;
z-index: 1;
}
Adding a SPIN Effect (with Mouse Over)
(You could also add link)

<IMG class="spin" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.bw {
position: relative;
opacity: 1;
transition: 0.3s ease;
}

.bw:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Adding a BLACK & WHITE Effect
(with Mouse Over)
(You could also add link)

<IMG class="bw" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.shake {
.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
}
Shake a Photo (with Mouse Over)
(You could also add link)

<IMG class="shake" SRC="xxxxx.xxx">

Waverley Abbey, Surrey

Move Mouse Over

.imgl
{margin-right: 2%;
}

.imgr
{margin-left: 2%;
}
Adding a Margin to the Right or Left
<IMG class="imgl" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here

<IMG class="imgr" SRC="xxxxx.xxx">

Waverley Abbey, Surrey
Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here

Buttons

In the HTML file
<A class="button" HREF="xxxx.html">Button</A>
<A class="button1" HREF="xxxx.html">Button1</A>
<A class="button2" HREF="xxxx.html">Button2</A>
<A class="button3" HREF="xxxx.html">Button3</A>
<A class="button4" HREF="xxxx.html">Button4</A>
With the CSS file downloaded

Button

Button1

Button2

Button3

Button4

Links

.link:link {color:#0000ff;text-decoration: none;}
.link:visited {color:#29088A;text-decoration: none;}
.link:hover {color:#ff0000;text-decoration: underline;}
.link:active {color:#ff0000;text-decoration: none;}

In the HTML file
<A class="link" HREF="xxxx.html"><B>New Link</B></A>

New Link

Visited Link

 
You can download a "Zipped" file with the STYLE.CSS file Click Here (2kb)

Top of 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();">........
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
Link

Button Link
Link

Photo Link
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

In the HTML file
In heard
<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:-
<script type="text/javascript">
function closeWindow() {
setTimeout(function() {
window.close();
}, 5000);
}
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

A.J.H. Computer Services - Home Page From this to this

Waverley Abbey, Surrey

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

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="xxx.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>

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

Download for 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(2018,12,25)
</script>

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>
</script>
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>
</script>
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
Waverley Abbey, Surrey

Night Photo
Waverley Abbey, Surrey

Flash Clock

Download Flash Clock (Zipped file)
Flash Clock
 
 
 

PHP Mailer Validator

 
 
 
Download PHP Mailer Validator (Zipped file)

Name:                              

Email:                              

Message:


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