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:
Post a Comment