客戶再上 banner 之後,想要紀錄該 banner 的點擊率
目前方法是多跑一個 php 頁面,帶參數,將該 banner id 裡面的點擊 + 1
也就是說
<a href="hits.php?id=1"><img src="images/hinet.jpg" /></a>
跑到
hits.php 將 hinet banner 的 hits update + 1 之後
redirect 到 http://www.hinet.net
圖片沒有問題,可是今天客戶 banner 要可以上 flash
我只能要求他們在後台把「正確的」超連結打上,但要他們去填寫 ?id=x 這種參數等於要他們的命
我也沒辦法改他 swf 的內容,於是想到一個障眼法的結構
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 4px;
border: 1px solid red;
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
}
li a {
display: block;
position: absolute;
width: 200px;
height: 100px;
left: 0;
top: 0;
}
[
HTML
<ul>
<li>
<a href="http://www.hinet.net"></a>
<img src="images/banner.jpg" width="200" height="100" /></li>
<li>
<a href="http://tw.yahoo.com"></a>
Flash
</li>
</ul>
我用相對路徑跟絕對路徑的關係,壓了一個 a 在圖片跟 flash 上面
所以就可以使用程式生成計數網址讓 user 點擊
在 Firefox、Chrome、Opera、IE8、IE9 測試都 ok
但 IE7 的 a 沒有辦法讓 width: 200px height 100px 的尺寸都成為可以點擊範圍
不知道 CSS 方面有沒有解法
或者是針對 flash 點擊率這個需求可以作到更好的處理
不知道怎麼說明比較好...這邊給您一個範例參考,希望合用嘍...
http://www.web3d.url.tw/linkOnFlash/
裡面用到的HTML
<pre class="c" name="code">
<div class="outliner">
<div class="topArea">
<div id="flashContent"></div>
<a href="#" class="siteLogo" title="置於FLASH BANNER上方的連結測試"><img src="css/alert/siteLogo.gif" alt="FLASH BANNER上方的連結測試"/></a>
</div>
</div>
裡面用到的CSS
<pre class="c" name="code">
.outliner{width:990px;margin:0 auto;}
.siteLogo{position:relative;top:-380px;left:0px;}
#flashContent{z-index:50;}
.alertLoc{margin-top:-48px;}
測試通過IE6+,Chrome
恩啊~ 不過圖片也不一定是非有必要存在的,例如把原本的HTML改成...
<pre class="c" name="code">
<div class="outliner">
<div class="topArea">
<div id="flashContent"></div>
<a href="#" class="siteLogo" title="連結測試"></a>
</div>
</div>
再把CSS改一下...
<pre class="c" name="code">
.siteLogo{
display:block;width:969px;height:381px;
position:relative;top:-380px;left:0px;}
就不是所謂的「塞一個透空的gif當點選的物件」了,重點是看倌怎麼用它~
拿掉Gif圖片後的Demo...
http://www.web3d.url.tw/linkOnFlash1/
sorry我錯了...測試一下要再修改一下CSS
<pre class="c" name="code">
.siteLogo{
display:block;width:969px;height:381px;overflow:hidden;*line-height:381px;*font-size:4000px;z-index:10;
position:relative;top:-380px;left:0px;}
測試通過IE6+,Chrome