Introduction
Are you annoyed at banner adverts flashing away at you. We have pop up stoppers in our web browsers so why can't we have banner stoppers. This is what this article does. It creates a web browser with a cutadvert button to get rid of those annoying banner adverts on webpages. You could implement this as an banner stopper on any browser but we will be using Windows Forms, C#, VS.NET and Internet Explorer's web control to do the dirty on these adverts in a very quick, create your own browser, way.
Creating a Quick Simple Web Browser with a Microsoft's Web Control
First we need a Windows Form with a web control. You can find this by right clicking your toolbox in VS.NET and clicking add/remove items. On the tabs at the top of the customise toolbox windows that has appears, select Com components. Then scroll down till you reach Microsoft Web Browser, check the box and press ok. This adds the web browser control to the toolbox and you can now add this control to your Windows Form. If you have any problems with the steps to do with adding or working with the web control, you can see this other CodeProject article.
Resize this web control and add a single line text field for the URL address bar and a button. You should have something that looks similar to the screen shot below:
Souble click the button to get to its Click event handler and add the following code that will turn this project into a rudimentary web browser.
private void button1_Click(object sender, System.EventArgs e)
{
System.Object nullObject = 0;
string str = "";
System.Object nullObjStr = str;
Cursor.Current = Cursors.WaitCursor;
axWebBrowser1.Navigate(textBox1.Text,
ref nullObject, ref nullObjStr,
ref nullObjStr, ref nullObjStr);
Cursor.Current = Cursors.Default;
}
At this point, it may be wise to check if your application works. The web control should navigate to the URL in the text field when you click the button.
Introduction to Cutting Banner Adverts Out of Web Pages
How can we decide what are banner adverts and what are happy images that we would like to leave alone. Banner adverts have two major attributes; they have a certain shape and have a certain common position. This makes sense as you are less likely to have a banner advert centered in the middle of your page or have it one pixel by one pixel big.
Neilson netratings' AdRelevance service monitors a hundred or so of the web's most trafficked, popular and influential sites. In one report, they showed many different types of banner dimensions used including, micro button, half banner, full banner, etc. However they said that 95% of the sites they look at have full banner adverts, making this 468x60 banner advert truly a standard. The full report can be found here.
Wichita State University, psychology department did some interesting studies on where users expected certain items to be on a web page in which they also studied the expectation of position for banner adverts. Not surprisingly, they found the most common place was at the top of the page. We will use one of their grids as a guide for how to decide if an image in a certain area is expected to be an advert. You can find the full article here but I have included the main figure used, below.
Steps to Decide if an Image is a Banner Advert in a Webpage
- Get Position Expectation Values
- Calculate image absolute position
PositionX
, PositionY
- Calculate
PageHeight
and PageWidth
- Calculate grid position
GridPosHorizontal
= floor(PositionX
/(PageWidth
/8)) - number of columns from graph above GridPosVertical
= floor(PositionY
/(PageHeight
/7)) - number of rows from graph above
- Get Position Expectation Value
PositionExpectationValue
= LocationExpection[GridPosHorizontal][GridPosVertical]
get grid value from expectation graph
- Get Shape Expectation Values (468x60 - Full banner advertisement approx 7:1 from Neilsons netratings see paragraphs above)
- Get
ImageHeight
and ImageWidth
- Calculate height to width
ImageSizeRatio
- Normalise
ImageSizeRatio
value between 0 and 100 to get the ShapeExpectationValue
- Calculate Expectation of image being a banner advert
- If (((
ShapeExpectationValue
+PositionExpectationValue
)/2) >= PercentageThreshold
) (our threshold value), then remove banner advert - If (((
ShapeExpectationValue
+PositionExpectationValue
)/2) < PercentageThreshold
) (our threshold value), then don't remove image
The Code
A second button should now be added and the following code used in its Click event handler. You will also need to change the protection level on the axWebBrowser1
object from private to public. The lookup table which describes the grid for position expectation values has been included in the event handler of the button for illustration only.
int[,]PositionExpectationLookupTable=newint[,]{{35,35,35,75,75,45,55,55},
{15,15,15,25,15,15,25,35},{15,5,15,15,15,15,15,15},
{15,5,15,15,15,5,5,25}, {15,5,5,15,15,5,15,15},{15,5,15,15,15,15,15,15},
{15,5,15,15,15,15,15,15}};
int PageHeight,PageWidth,ImageHeight,ImageWidth,PositionX,PositionY;
int BodyOffSetLeft,BodyOffSetTop,GridPositionHorizontal,GridPositionVirtical;
float ImageSizeRatio,PositionExpectationValue,ShapeExpectationValue,
PercentageThresholdValue;
PercentageThresholdValue=65.00f;
IHTMLDocument2HTMLDocument=(IHTMLDocument2)axWebBrowser1.Document;
BodyOffSetLeft=HTMLDocument.body.offsetLeft;
BodyOffSetTop=HTMLDocument.body.offsetTop;
The code above sets up the expectation lookup table from the graph above and all variables needed including some from the document object model of the webpage
PageHeight=axWebBrowser1.Height;
PageWidth=axWebBrowser1.Width;
IHTMLElementCollectionImages=HTMLDocument.images;
foreach(IHTMLImgElementelinImages)
{
IHTMLElementEl=(IHTMLElement)el;
PositionX=El.offsetLeft;
PositionY=El.offsetTop;
IHTMLElementtempEl=El.offsetParent;
while(tempEl!=null)
{
PositionX+=tempEl.offsetLeft;
PositionY+=tempEl.offsetTop;
tempEl=tempEl.offsetParent;
}
PositionX=PositionX-BodyOffSetLeft;
PositionY=PositionY-BodyOffSetTop;
GridPositionHorizontal=(int)Math.Floor(PositionX/(PageWidth+1/8));
GridPositionVirtical=
(int)Math.Floor(PositionY/PageHeight+1/7);
PositionExpectationValue=
PositionExpectationLookupTable[GridPositionHorizontal,GridPositionVirtical];
The code above gets all the values necessary for step 1. The absolute positions of the images are found by summing all the offset values of the image element's parent elements. For example, add the image offset from its parent, let's say a table and the tables offset from its parent element, the body element. It stops at the body element as this has no other parent element. The grid position is found by dividing the visible web page area into a 8 by 7 grid taken from the position expectation graph above.
ImageHeight=el.height;
ImageWidth=el.width;
ImageSizeRatio=ImageWidth/ImageHeight;
intMean=7;
intVariance=2;
Exp=Math.Exp(-(((ImageSizeRatio-Mean)*
(ImageSizeRatio-Mean))/(2*(Variance*Variance))));
ShapeExpectationValue=(float)(Exp*100);
The shape expectation value is a simple ratio calculation feed into a Gaussian distribution with a small variance value. This says if the imagesizeratio
is very close to the banner ad imagesizeratio
give it a high expectation value, otherwise give it a small to zero value.
if(((ShapeExpectationValue+PositionExpectationValue)/2)>=PercentageThresholdValue)
{
el.src="";
el.alt="scr"+(int)((ShapeExpectationValue+PositionExpectationValue)/2)+"s"+
(int)ShapeExpectationValue+"p"+(int)PositionExpectationValue;
}
else
{
el.alt="thisisanimagenotabanneradd,scr:"+
(int)((ShapeExpectationValue+PositionExpectationValue)/2)+"s"+
(int)ShapeExpectationValue+"p"+(int)PositionExpectationValue;
}
}
If the image is a banner ad it replaces the img src
attribute with nothing and sets the alt
text to display the total expectation value as well as the shape and position expectation values. This isn't very good for accessible content, but illustrates the point enough.
Points of Interest
This code only works with GIFs at the moment, not flash movies although the principle is exactly the same. You just need to access the element collections in a different way. There are also many more measures of expectation such as outbound links, link domain maybe, even analysis of alt
text. This code could be easily adapted to encompass these other types of banner adverts.
Instead of setting the images 'src
' to blank, you can use a whole host of other images. I have included some of my favorites below.
History
- 7th January, 2006: Initial post
Chris is a PhD research student working on machine learning in the area of music information systems. His current incarnation lecturers and researches at Anglia Ruskin University as part of the Audio music technology pathway. He has published in journals and has worked as a network consultant to finance his research. He entered the world of windows programming while writing a piece of software for music genre recognition. A passion for music technology has lead him to explore some of the fundamentals of audio programming.