iT邦幫忙

0

IE7 a 標籤 CSS width 問題

客戶再上 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

&lt;ul>
	&lt;li>
    &lt;a href="http://www.hinet.net">&lt;/a>
    &lt;img src="images/banner.jpg" width="200" height="100" />&lt;/li>
    &lt;li>
    &lt;a href="http://tw.yahoo.com">&lt;/a>
    Flash
    &lt;/li>
&lt;/ul>

我用相對路徑跟絕對路徑的關係,壓了一個 a 在圖片跟 flash 上面
所以就可以使用程式生成計數網址讓 user 點擊
在 Firefox、Chrome、Opera、IE8、IE9 測試都 ok
但 IE7 的 a 沒有辦法讓 width: 200px height 100px 的尺寸都成為可以點擊範圍
不知道 CSS 方面有沒有解法
或者是針對 flash 點擊率這個需求可以作到更好的處理

1 個回答

2
ccutmis
iT邦新手 1 級 ‧ 2011-07-29 15:08:18
最佳解答

不知道怎麼說明比較好...這邊給您一個範例參考,希望合用嘍...
http://www.web3d.url.tw/linkOnFlash/

裡面用到的HTML

&lt;pre class="c" name="code">
&lt;div class="outliner">
	&lt;div class="topArea">
		&lt;div id="flashContent">&lt;/div>
		&lt;a href="#" class="siteLogo" title="置於FLASH BANNER上方的連結測試">&lt;img src="css/alert/siteLogo.gif" alt="FLASH BANNER上方的連結測試"/>&lt;/a>
	&lt;/div>
&lt;/div>

裡面用到的CSS

&lt;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

看更多先前的回應...收起先前的回應...
chan15 iT邦新手 5 級 ‧ 2011-07-29 15:23:36 檢舉

這等於塞了一個透空的 gif 當點選的物件,是不失為一種作法啦…

ccutmis iT邦新手 1 級 ‧ 2011-07-29 16:09:07 檢舉

恩啊~ 不過圖片也不一定是非有必要存在的,例如把原本的HTML改成...

&lt;pre class="c" name="code">
&lt;div class="outliner">
	&lt;div class="topArea">
		&lt;div id="flashContent">&lt;/div>
		&lt;a href="#" class="siteLogo" title="連結測試">&lt;/a>
	&lt;/div>
&lt;/div>

再把CSS改一下...

&lt;pre class="c" name="code">
.siteLogo{
display:block;width:969px;height:381px;
position:relative;top:-380px;left:0px;}

就不是所謂的「塞一個透空的gif當點選的物件」了,重點是看倌怎麼用它~

ccutmis iT邦新手 1 級 ‧ 2011-07-29 16:12:06 檢舉

拿掉Gif圖片後的Demo...
http://www.web3d.url.tw/linkOnFlash1/

ccutmis iT邦新手 1 級 ‧ 2011-07-29 16:22:23 檢舉

sorry我錯了...測試一下要再修改一下CSS

&lt;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

我要發表回答

立即登入回答