The Invisible Ad
Launched TheInvisibleAd.com today. It's my version of the amazing Million Dollar Homepage and is mostly JavaScript muscle flexing 
There is a little PHP, but very little, some style work and some AJAX/XML. But most of it is the JavaScript.
Will share the implementation details here, watch this space. There were a few issues to resolve ... trying to dynamically create 75 * 42 nodes in a DOM tree is one example.
Again - http://www.theinvisblead.com.
November 15th, 2005 at 11:22 am
Whoah! That’s a way cool idea! I hope for you it will work. I’ve seen many cheap ripoffs of the million dollar homepage but this is just … well, very cool!
bzzzzzz!
November 15th, 2005 at 11:26 pm
Thanks very much for your kind words, Marco! I really needed this sort of peer validation of my effort.
Cause yesterday, after I installed the little app on the host server, I decided to let the world know about it, by submitting the URL to pixel ad directories (such as thepixelwars.com). Well, the amount and the “quality” of blatant rip-offs I saw just knocked me down. Are we all that greedy?
All of a sudden, I lost my motivation. I didn’t want to be in the same category with all the copycats. I thought “forget it”, I’m not in it for the money, so let’s just abandon the whole project to make sure I differentiate from the copycats.
So, Marco, your post came right on time. It got me thinking - why am I such a drama queen? After all, I wasn’t motivated by the money. I saw the M$HP idea, thought of its improvements, spend some time coding, enriched my JavaScript knowledge and I liked the end result. Well, if someone wants to stream their advertising dollars in my direction, I won’t be the one to let them down ;). But that was not the main point. The main point was using a new and hyped web dev approach to enhance a new and hyped advertising idea while learning on the way.
November 17th, 2005 at 5:23 am
Stoyan, this whole thing never came across as having been done out of greed. It’s just a nice touch.
There’s one BIG issue with your page though:
The BIG reason why advertisers want to place their ads on the million dollar homepage is the fact that it’s a page that’s being linked to an awful lot. It results in great SEO for just a small investment. Your page doesn’t link to any of the advertisers which voids this particular advantage.
Therefore you might want to modify the page to hold a list of all links which can be spidered by a search engine. If you hide the list and insert the links from the list into the rest of the ‘ads’ by Javascript whenever an add is called I guess you’re not guilty of fooling the search engines anymore because the links do occur on this page.
I’m sure there are other ways but I really believe you should take care of this in order to make it more attractive for people to advertise. Right now the main reason to do so is taken away because of the Ajax.
Just my 5 cents!
November 17th, 2005 at 9:54 am
Thanks, you’re absolutely right, Marco, and I thought about that. Once the advertisers show up, I was intending to do a separate page with normal href-s. Or maybe if they are not too many - just a SE-friendly noscript tag, because this whole grid is a javascript.
Also I was planning to do another nice feature that will encourage repeated visits on that page, which again makes it more attractive for advertisers. This is another issue in the Million Dollar Homepage - the lack of motivation for repeating visits.
November 19th, 2005 at 2:42 am
Stoyan,
I was thinking about this yesterday and it got to me. The perfect solution!
Do this:
Turn the whole grid into a huge unordered list. It’s easy to css an unordered list into the grid by carefully styling each list item, giving the whole list a specific width and making all items display:inline;. I’m sure you can do that. This would be a list with normal html links with titles. A non-css/non-script browser will see a nice list of links.
With the CSS it will be turned into the grid, exactly like it looks now. Then you can attach hover events to each list item and you’ll be in business! On hover people will see the Ajax stuff, on clicking they’ll just visit the advertisers site.
Perfectly within all search engines TOS, nicely degradable and very SEO minded.
Let me know what you think!
November 20th, 2005 at 8:49 am
Hi Stoyan,
I’m not such an ad freak, but this script could be great for the blogger scene (and I’m sure could also make you some money if you charge, say, $5 to $10 for a solid script)
If it could be sized into a typical header or a square of say 150 * 150 (for a sidebar) and then customized to pull let’s say 10 - 50 most recent posts (a small image, title, first 100 words or so) for display (let’s say a red square that has 50 yellow squares on it) it would be an enticing way for people to “discover” random posts.
Because most blogs are SQL-based, that shouldn’t be too difficult with a custom query. Limitless possibilities.
I would love to try it, but I can’t even get a “Hello World!” program to run, but I’d love to.
Just an idea …
Keep up the good work.
November 20th, 2005 at 3:53 pm
Thanks Marco, great idea! After all the grid is nothing but a list, semantically speaking. I’ll definitely give it a thought.
There might be a performance issue with the way the grid is currently drawn. Because it’s currently pure JavaScript.
for (y = 0; y < height; y++) { for (x = 0; x < width; x++) { id = x + y*height; //normalize ad ID //drawASquareHere(id); } }There’s a pre-populated JS array of IDs, so that I know whether this id should be red or white. This IDs array is all I know about the ads at this time. When you mouseover on a red square, a new HTTP request returns the actual ad. Before that I know nothing of the ads.
This is all because of performance issues. The page needs to be fast, right? So the little we load initially, the better.
On a side note, this drawASquareHere() mentioned above is also stripped down to the last bit, because it might take the ridicilous 15-20 seconds to draw the grid in IE/Windows. So to draw a square, I settled for the non-standard (don’t laugh) :
<img src=p.gif id=12345 onmouseover=n(this) onmouseout=f(this)>Pretty crippled IMG tag, isn’t it? No quotes, no closing slash… even the names of the functions are one char only. All this because of IE speed issues. But at the end of the day, the grid is 42 * 75 squares, or over 3000 image tags! I also had to give up the idea of using DOM to create the tags, settling for innerHTML. Also I use the behavioural onmouseover/out, instead of properly attaching event. OK, enough ranting, I think I made my point that there were performance issues
Having said this, I’ll definitely look at the idea of using (un)ordered listings for the ads. In the worst case, only for the
noscripttag.November 20th, 2005 at 4:03 pm
Thanks Volkher, great idea!
My blog is definitelly missing (among many other things, such as custom design
) a “popular posts” list. So it’s a good place to start implementing your idea. Thanks, very much appreciated!
Great job on your sites - livingwithmusic.com and the others! Kudos!
November 25th, 2005 at 6:02 am
The Inivisible Ad
You’ve all heard of The Million Dollar Home Page right? No? Well, basically it’s this business student in Nottingham that set up a website where you can buy a pixel of advertising space for $1, and he has a million pixels on the site for s…
November 26th, 2005 at 3:06 am
let’s do biz
portals@nana.co.il
i search this 1x 1000000 pixle materia since begining
i think that a good global site can do it
i look for any programmer who should write
and an investor
let us do it
m p
March 30th, 2006 at 11:29 am
I think you MisSpelled http://www.theinvisiblead.com/ on this post
April 5th, 2006 at 10:11 pm
Hehe, that’s right. Thanks, bot! I’ll leave it as is to remind me to read before posting