| ||
|
|
| |
| ||
| ||
| Inside Technique : Dynamic HTML Ads : Tracking the Mouse Tracking the mouse and displaying a message in our sample advertisement is accomplished with a simple script:
var t = null
function fadeToBlack() {
document.all.phrase.style.display = "none"
}
function cleanup() {
if (event.toElement==null) {
// Pause a little before hiding the message.
t = setTimeout("fadeToBlack()",200)
}
}
function followMouse(el) {
clearTimeout(t)
var s = document.all.phrase
s.style.display = ""
var x = window.event.x - (s.scrollWidth/2)
if (x+s.scrollWidth>468) x = 468-s.scrollWidth
if (x < 0) x=0
var y = window.event.y - (s.scrollHeight/2)
if (y+s.scrollHeight>=60) y = 60 - s.scrollHeight
if (y < 0) y=0
s.style.pixelLeft = x
s.style.pixelTop = y
}
We define the phrase element inside the ad, and add two event handlers to the element's body:
<BODY ONMOUSEMOVE="followMouse(this)" ONMOUSEOUT="cleanup()" ONCLICK="ad1.click()">
<DIV ID="phrase" STYLE="z-index: 10; position: absolute; display: none; width: 10em; font-size: 12pt; font-weight: bold; font-family: arial; color: blue">
Order Me!
</DIV>
If you are planning to deploy advertisements on your web-site, you are going to need a server side script that randomly generates and tracks the ads. Many of the existing ad tracking scripts that are available can be easily customized for scriptlets. We currently doing our banner ad rotation and tracking using 2 custom ASP files, one to return an ad, and a second one to track ads that are clicked. Page 1:Dynamic HTML Ads © 1997-2000 InsideDHTML.com, LLC. All rights reserved. |