Monday, January 5, 2009

Simple advertisement in web page?

We can find few web sites that display simple advertisements in a small rectangular box and moves across the page.
I would like to share this code which does the same.
For advertising such box we need to create an image file that is encapsulated with in that rectangular box.
I am creating a custom image created by my self in paint brush to advertise this blog “Programmer findings”.
My Advertisement image




Saving the above image as “myAdd.bmp”.
Close advertisement image




Saving the above image as “Close.gif”.
Html page:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Advertisement</title>

</head>
<body >
<table style="width:100%;height:100%">
<tr><td>
<h2>A sample web site just for demo. Assume this web site is related to .NET material or technical help.
So this web page may need to show different advertisments,here advertisement is regarding http://programmerfindings.blogspot.com/ blog.
</h2>
<h1>Observe the advertisement that is moving accross the browser</h1>
<div id="divAdd1" style="position:absolute;background:lightyellow;border:1px solid gray;" onmouseover="pauseAdd();this.style.cursor='hand';" onclick="clk('http://programmerfindings.blogspot.com/');" ></div>

</td></tr>
</table>

<br /><br />
<script type="text/javascript" language="javascript">
var addx=0;
var addy=0;
function displayAdv(imgUrl,ht,wd)
{
document.getElementById('divAdd1').style.display='block';
document.getElementById('divAdd1').style.height=ht;
document.getElementById('divAdd1').style.width=wd;
document.getElementById('divAdd1').style.top=addy;
document.getElementById('divAdd1').style.left=addx;
var cls="<img src='Images/Close.gif'; onclick='stopAdd();'/>";
var img="<img src='"+imgUrl+"';/>";
document.getElementById('divAdd1').innerHTML="<table><tr><td>"+cls+"</td></tr></tr><td>"+img+"</td></tr></table>";
newx=addx+5;
newy=addy+5;
moveAdd();
}
var newx;
var newy;
var drctDown=true;
var tmr;
function moveAdd()
{
newx=newx+10;
newy=newy+10;
if(drctDown)
{
if(newy>=500 && newx>=500)
{
newx=0;
newy=0;
drctDown=true;
}
else if(newy>=500)
{
drctDown=false;
}
else if(newx>=500)
{
newx=0;
newy=0;
drctDown=true;
}
}
if(!drctDown)
{
newy=newy-10;
if(newy<=0 && newx<=0)
{
newx=0;
newy=0;
drctDown=true;
}
if(newy<=0)
{
newy=0;
drctDown=true;
}
}

document.getElementById('divAdd1').style.top=newy;
document.getElementById('divAdd1').style.left=newx;
tmr=setTimeout("moveAdd();",200);
}

function stopAdd()
{
document.getElementById('divAdd1').innerHTML='';
document.getElementById('divAdd1').style.display='none';
clearTimeout(tmr);
}
function pauseAdd()
{
clearTimeout(tmr);
}
function clk(url)
{
stopAdd();
window.open(url);
}
displayAdv('myAdd.bmp','100','100');
</script>
</body>
</html>

Output:-
When user places mouse over the advertisement box it pauses the moving advertisement box and when user clicks it opens the “Programmer findings blog site”.








No comments: