Menu
hi there my program is just to demonstrate items that can be done in javascript, onclick etc i have to create a link that will increase the size of the text but it has to only work after one click
e.g click large once then it will no longer work if clicked
here is the program:
<html>
<head>
// this is the image that is used for the moving graphic on the site
<div id=”boat” style=”width:120px;height:105px;background:url(
</div>
<Script language =”JavaScript”>
var obj, w, godown, goright;
function gomonkeygo()
{
var pos = parseInt( obj.style.left, 10);
( goright ) ? pos++ : pos– ;
obj.style.left = pos + “px”;
if( pos > (w + 400) )
{
obj.style.background=”url(
goright = false;
}
if( pos < – 100 )
{
obj.style.background=”url(
goright = true;
}
var neg = parseInt( obj.style.top, 10 );
( godown ) ? neg++ : neg– ;
obj.style.top = pos + “px”;
if( neg > (w + 60) )
{
obj.style.background=”url(
godown = false;
}
if( neg < -80 )
{
obj.style.background=”url(
godown = true;
}
setTimeout( gomonkeygo , 10 );
}
function init()
{
var preload=new Image();
preload.src=”
obj = document.getElementById(“boat”);
w = document.body.clientHeight;
goright = true;
obj.style.position=”absolute”;
obj.style.left=”10px”;
obj.style.top=”100px”;
gomonkeygo();
}
onload=init;
// this activates the function that will allow the size of the text to be increased or decreased by using the document.body.style and parsefloat it will calculate the increase or decrease of the text and do the selected action
function resize(multiplier)
{
if (document.body.style.fontSize == “”)
{ document.body.style.fontSize = “1.0em”; }
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + “em”;
}
//these are the rgb codes to change the colour of the background of the image in the program
var backColor = new Array();
backColor[0] = ‘#ff0000’;
backColor[1] = ‘#0000ff’;
backColor[2] = ‘#228b22’;
backColor[3] = ‘#ffff00’;
backColor[4] = ‘#FFFFFF’;
//this function allows the changing of the colour on the program
function changeBG(whichColor)
{
document.bgColor = backColor[whichColor];
}
</script>
// these change the size of any text on the page by 1 for large and 0.5 for medium it also decreases the size by 1 is decrease is clicked
<a href=”javascript:void(0);” onclick=”resize(1)”>Increase font size (large)</a>
<a href=”javascript:void(0);” onclick=”resize(0.5)”>Increase font size (medium)</a>
<a href=”javascript:void(0);” onclick=”resize(-1)”>Decrease font size</a>
<br>
</head>
<body>
<br>
//this displays the text that can be clicked in order to change the colour of the background
<a href=”javascript:changeBG(4)”>Click here to make background white</a>
<br>
<a href=”javascript:changeBG(3)”>Click here to make background yellow</a>
<br>
<a href=”javascript:changeBG(2)”>Click here to make background Green</a>
<br>
<a href=”javascript:changeBG(1)”>Click here to make background Blue</a>
<br>
<a href=”javascript:changeBG(0)”>Click here to make background Red</a>
<br>
<br>
<br>
<br>
// this creates a mouse over that when hovered over the text it will activate and a pop up will say HIYA!
<a href=”” onMouseOver=”alert(‘HIYA!’);return true;”>This is a mouseover function</a
<br>
<br>