顯示具有 php 標籤的文章。 顯示所有文章
顯示具有 php 標籤的文章。 顯示所有文章

2017/4/18

上傳圖片的旋轉( jquery 及 php )

原先讓用戶上傳的照片欄位,最近被舉報說上傳的照片會轉九十度橫躺下來

因此上網查了一下,發現是手機拍照的緣故

只要是手機豎著拍的照片都會有這一個現象發生

因此只好在畫面上加上讓用戶來旋轉照片的按鈕


前台用來轉動照片最厲害的工具 還是 jquery.rotate

因此到其網站下載 jquery.rotate

在 header 內不要忘了加上


然候城市內唱船圖片及預覽的下方在擺上這幾個按鈕



而且語法很簡單

另外,我擺上一個 input hidden 的欄位,用來傳到後台,讓php 知道要轉幾度來慘動圖片


不過麻煩的是,php 轉圖片的方向和jquery 轉圖片的方向是顛倒的


大功告成!

2017/4/9

讓 windows 的 cmd 下也可以執行 php

  1.  請先確定您的  php  是安裝在哪一個目錄下,已我為例是安裝在 D:\php  ( 已下的範例便以此目錄為主, 環境為 win10 )
  2.  桌面上對『本機』點選滑鼠右鍵,然後再點選在選單最下方的『內容』

  3. 點選其中的 『進階系統設定』。

  4.  在『系統內容』頁面,確定是在『進階』的標籤頁面下,點選『環境變數』

  5. 在『環境變數』的『系統變數』內,找到 Path 點選使他反白已後,再點選『編輯』

  6. 再『編輯環境變數』鐘,點選『新增』,然後加上php 所再的目錄 D:\php,最後點選『確定』,即可!

  7. 正常來說,因為改了環境變數,必須重開 win10 才會使改變的參數生效,不過因為指改一個 Path ,其實可以不需重開機,打開 cmd 輸入 echo %PATH% 再按下 enter,便可已完成設定,而不需重新開機。

  8. 最後在 cmd 下輸入 php -v ,成功的話,會出現已下的畫面:

2017/3/18

利用 php 取得 client 端的 MAC Address

覺得自己想的太過簡單了
發現透過 web 想來抓取 client 端的 MAC ADDRESS
畢竟這也算是較機密的資料, 若能讓網頁隨便就抓走,那會形成安全上的大漏洞


不過也不是沒辦法,只不過是限制重重
實用性其實不算太高


他的限制:
  1. 主機必須是在 windows 的平台
  2. client 端要和主機要在同一個網段內才有用


以下便是我的程式碼



用手機連上來測試的結果如下



2017/3/17

如何讓 php 取得主機端的 MAC ADDRESS ( win10 )

要取得 使用者端的 MAC ADDRESS ( client 端 ) 作法很多
不過想去得主機端的 MAC ADDRESS 便有很多障礙
以下是小弟試出來的一點作法
目前是可行,但有點笨就是了
若有高手有更好的做法,
還請指教一番...

ob_start();
system('ipconfig /all');
$mycomsys=ob_get_contents();
ob_clean();

$find_mac = "}";
$pmac = strpos($mycomsys, $find_mac);
$macaddress=substr($mycomsys,($pmac+29),17);
echo $macaddress;

2017/3/16

安裝 Navicat Premium 用來管理與維護 MySQL 資料庫

1. 安裝 navicat-premium-8-2-4


2. 設定連線,點選進入 Navicat Premium,然後點選左上角的 Connection


3. 選擇資料故類形為 MySQL


4. 連線方式中,請依照下圖來輸入,root 的密碼請輸入先前安裝 MySQL所設定的密碼來輸入


5. 點選 " Test Connection " 若出現 Connection Sucessful 便代表設定連結成功,點選 "OK"便可結束設定


6. 左側的 Connections 中,若出現剛剛所設定的 local 代表安裝設定正確


2017/3/15

在 win10 上安裝與設定 PHP ( IIS)

1. 請下載 php 安裝程式

2. 解壓縮後 放到並改名為 D:\php

3. 在 D:\php 底下,將php.ini-production 這個設定範例,複製一份,將檔名改為 php.ini

4. 修改 php.ini 設定

extension_dir = "ext"
cgi.force_redirect = 0
cgi.fix_pathinfo=1
fastcgi.impersonate = 1
extension=php_mbstring.dll
extension=php_mysql.dll
extension=php_curl.dll
extension=php_gd2.dll
date.timezone = "Asia/Taipei"

(原本有註解的請拿掉分號「;」)

5. 開啟「Internet Information Services (IIS) 管理員」, 點選左側站台的地方點選 Default Web Site,然後點選「處理常式對應」。

6. 右側「動作」區塊中點選「新增模組對應」

7. 照著下圖圖例輸入,( 在「執行檔」選擇檔案的時候,記得將附檔名的部分選擇「*.exe」 )

8. 將 PHP 加入 FastCGI 集合,點「是」

9. 新增一個預設文件 index.php,讓 IIS 自動識別該檔名代表首頁。點選 『預設文件』

10. 點選右鍵「新增」

11. 輸入 index.php

12. 執行 php 測試
在 iis 目錄下 ( d:\websites ) 建立一個檔案 index.php ,其內容如下 :


然後打開 browser ,在網址列輸入 http://localhost
若順利出現以下便是成功

P.S 建議測試完畢後,將該文件刪除,因為 phpinfo() 顯示了非常多伺服器相關的資訊,不應該開放給外部的人看到。




2010/1/15

[php] 將 csv 檔轉入 mysql 去

再來便是要讓使用者自行可以將打在 csv 檔內的資料轉入到 mysql table 去

這便麻煩許多了

因為中文編碼方式到底是 big5 還是 utf-8 ? 恐怕 user 自己也不知道吧 !

此外, 第一行有沒有標題列 ? 這也得考慮到

當然了格式到底對不對呢 ? 這也是一大問題

基於以上的不確定性, 所以我便開放攔位讓 user 自行決定

且當一轉入時, 我並不急著就存到 table 去, 先把前十筆資料再次的顯示在營幕上

讓 user 自己判斷要不要轉進去, 沒問題時在確定就好

若 user 要亂轉進去的話, 各人造的業各人自己去擔吧,

因為到時真正要的資料埋在一堆垃圾,而致找不到自己要的資料時, 別人也是愛莫能助呀.,....

不多廢話了, 以下便是我的步驟

1. 這裏提供 user 自行來決定是否有標題列 ? 以及中文的格式是那一種 !!!!
當然了還提供了檔案上傳的欄位, 也 作了必需要真的上傳檔案的檢查...




2. 當 user 按下 上傳以後, 執行權限便轉移到 quest_import_exe.php 去




說明如下:
* $first_rec
==> 小弟用此變數來判定是不是第一列,
當 csv 檔有標題列時, 用這變數來將標題列惕除不要轉入

* if ( $_FILES['CSVfile']['size'] ) {
==> 當轉入的 csv 檔, 不能是空檔, size 要有時, 才可以開始轉檔

* $sql = "select max(uid) uid from quest_file where cno = '".$cno."'";
$res2 = @$mdb2->query($sql);
$row2 = $res2->fetchAll();
$uid = intval($row2[0]['uid']) + 1;
==> 這一段是將原有序號抓出來加 1 , 做為此次轉入來賓的起始序號

* if ( $china == "BIG5" ){
setlocale(LC_ALL, 'zh_TW.BIG5');
}else{
setlocale(LC_ALL, 'en_US.UTF-8');
}
==> 針對 user 選擇 big5 or utf-8 來作 csv 檔的編碼方式設定

* 接下來一大段, 直接用文字來介紹了
( 先說明, 這段的寫法有點笨, 應該有更好的寫法才是 )

小弟特別在此將前 10 筆的 data 顯示出來, 讓 user 在行確認一遍
當畫面上的標題列或是中文沒問題時,再點選"轉換正確"
正式開始轉檔

3 開始轉檔

(php) 將 mysql 的資料轉成 csv 檔

最近因需求, 必需提供使用者將自己的來賓資料轉成 excel 檔

所以開始 study 怎樣將資料轉成會員所需的 csv 檔

以下便是我的程式

1. 標題列的產生

$exportString = 'Customer No'.",".'Serial No'.",".'Guest Name';
$exportString .= ",".'Sex'.",".'Age'.",".'Telephone'.",".'Mobile'.",";
$exportString .= "Address".","."Remark".","."Create Date".","."Last Modify Date";
$exportString .= "\r\n";

2. 到 table 去將資料找出來

$sql = "select * from guest_file where cno = '".$cno."' order by uid desc";

3. 將找出來的資料一一組合到 string 裏面去

$res2 = @$mdb2->query($sql);
$row2 = $res2->fetchAll();
$num2 = $res2->numRows();
for( $i=0; $i<$num2; $i++)
{
$exportString .= $cno.",".$row2[$i]['uid'].",".$row2[$i]['uname'].",";
$exportString .= $row2[$i]['usex'].",".$row2[$i]['uage'].",".$row2[$i]['utel'].",".$row2[$i]['umobile'].",";
$exportString .= $row2[$i]['uaddress'].",".$row2[$i]['remark'].",".$row2[$i]['create_date'].",".$row2[$i]['tx_date'];
$exportString .= "\r\n";
}

4. 將存在 string 內的變數丟成 csv 檔

header('Content-Type: text/html; charset=utf-8');
header("Content-type: application/vnd.ms-excel");
header("Content-disposition: attachment; filename=Mydata-" . date("Y-m-d").".csv");
print $exportString;

==> 其中預設的 csv 檔先給一個檔名 Mydata-YYYYMMDD.csv 的日期檔名...

2009/3/6

php 對 oracle clob 的新增與修改《童顏未老人》

php 要運作 oracle 的 clob 時,若沒有特別去處理的話,每次增改的字串長度還是會受到限制。這方法我每次用過就會忘了, 特別記錄下來 , 以免以後又要找一遍。

( 註 : 我是採用 ADODB 的 )

假設我的 table 是這樣的 :

create table docfile (
DocID Number Not Null,
DocTitle Varchar2(100 byte),
DocCont Clob,
TX_DATE Date Default sysdate );

今天若要增加一筆 record 進去的話
$ID = 1422;
$Title = '我愛美女';
$DocCont = '我愛林志玲,隋棠,蕭薔,'.......(設有數千字 )


$sql = "insert into docfile ( DocID,DocTitle,DocCont,tx_date) values ( ";
$sql .= $ID.",'".$Title."',empty_clob(),sysdate)";
$conn->Execute($sql);

資料已 insert 進去了

然後 執行

$conn->UpdateClob('docfile','docCont',$DocCont,'docid='.$ID);

如此一來便不怕字串會有長了!

若要 update 的話, 就更簡單了, 直接執行便可
$sql = "update docfile set doccont = empty_clob() where docid = ".$ID;
$conn->Execute($sql);
$conn->UpdateClob('docfile','docCont',$DocCont,'docid='.$ID);


!!!

2009/2/6

在 php5 程式中使用 include 會多空一行的解決《by 童顏未老人》

 最近在使用 php 開發程式時碰到一個問題, 找了許久終於被我找到解法。當在 php 中使用 include 時,常常就會多空下一行來,使得版面常常是破壞的很慘, 例如 : 原先需要的效果


程式是直接寫在主體程式內這樣沒有問題!


但是因為這一塊是很多頁都要用到的,所以想把它改成是獨立一隻程式,然後讓每隻要用的程式再去 include 就好,所已改寫如下:


但是結果卻發生如下圖中,兩個圖片竟不會對齊了!


真是怪了,我到 google 上找了幾下,終於了解是因為 UTF-8 的 檔首有 BOM 字元,會造成 include 進來後就發生多空一行的情形 !

因我使用的 edit 是 Notepad++,只要將格式改存成 UTF-8 格式,檔首無 BOM 存檔檔後就恢復未用 include 前的排版效果了 !

2009/1/24

透過 javascript 來新增與刪除上傳檔案《by 童顏未老人》

 最近又碰到一個比較困難的東西,就是要在使用者上傳檔案時,需要可以任意的新增檔案,也要能隨意刪出任一個已選的檔案。

 如下圖是最先的狀況,


 使用者可以任意的點選「新增檔案」來增加上傳的檔案數。


 若覺得不妥想再刪除,只要點選該檔案後面的「刪除」,即可。


 新增的部份比較簡單,刪除的部份我花了不少時間才弄出來。

 在程式本體中,請如下的程式碼 :


主要是設了一個容器 fieldset 用來包含著每一個讓人去上傳檔案之用。在這裏先放上一個,方便使用者來用。當使用者想增加其它的檔案時,就點選上面的「新增檔案」按鈕,透過 onclick 去發動 addupload()。

var fieldcount = 1;

function addupload() {
fieldcount++;
var newfield = document.createElement('input');
newfield.type = 'file';
newfield.name = 'file' + fieldcount;
newfield.id = 'file' + fieldcount;
newfield.size = '60';
document.getElementById('fs').appendChild(newfield);

var newbutton = document.createElement('input');
newbutton.type = 'button';
newbutton.name = 'b' + fieldcount;
newbutton.id = 'b' + fieldcount;
newbutton.value = '刪除';
newbutton.onclick=function(){delfile(this.getAttribute('id'));};
document.getElementById('fs').appendChild(newbutton);

}

(以上 程式碼要包函在 script 和/script 中 )

因為我們在程式中已預先擺了一組可供使用者上傳用的檔案按鈕,所以作為 counter 用的 fieldcount 起始值為 1。然後每次被 call 一次 addupload 時,便立刻加一。然後利用 createElement 來創建兩個結點,一個是讓人上傳檔案用的欄位,另一個是用刪除該上傳欄位用的按鈕。各自將其 attribute 上進去後,在利用 appendChild 來將兩個節點上到 fs ( fieldset )這個父容器之下。

要想刪除認一指定的欄位時,同時也得把後面的刪除鈕一併刪除。當點選了「刪除」鈕時,會觸發 onclick 去執行 delfile(this.getAttribute('id')), 其中要把那一顆刪除鈕的 id 一併傳到delfile 這 function 去。

function delfile(idname) {
var filename = 'file' + idname.substr(1,1);

var filex = document.getElementById(filename);
var bx = document.getElementById(idname);
filex.parentNode.removeChild(filex);
bx.parentNode.removeChild(bx);
}

因為每一組的 上傳欄位的 id 都是 file1、file2、file3、....,其相對應的「刪除」鈕之 id 為 b1、b2、b3...,所以只要透過 substr(1,1) 將「刪除」鈕 id 的第二碼取出,便可組合出相對應上傳欄位的 id 名。最後透過 父容器的 removeChild 便可將兩者一一移去!

2009/1/22

ie6 下的覆蓋問題解決《by 童顏未老人》

 這幾天被一個工作上的問題給困擾住了,小弟寫的網頁需要當滑鼠停在會員名字上或是會員的照片上時,要出現該會員的簡介。這功能原本不算太難,用小弟之前的方法,光用 css 就可以辦的很好。但是當套用在用會員照片排成的九宮格狀時,在 ie6 下會員名片會被隔壁的照片壓在下面弄的支離破碎,但是在 firefox 下卻仍有很好的表現。

慘不忍睹的 ie6 表現狀況:


firefox 下的狀況正是我所要的:


 但是我不能犧牲使用比例還是最多的 ie6 使用者,所以只得另謀他法了,有朋友介紹我使用
[jQuery] bgiframe Plugin,不過我現在情況很趕,無法仔系去鑽研 jQuery,那可得等我過年有空時慢慢去研究,我現在能用的便是 javascript 和 css 了,我試了一天後終於給我弄出來了。這想穿了其實也沒什麼高明之處,就是得花時間想一下。

首先在整個 程式最末端埋入一整段會員名片的程式碼,

<div style="position: absolute; width: 220px; height: 140px; z-index: 1;
left: -1000px; top: -1000px" id="mycard">
<table border="1" cellpadding="0" style="border-collapse: collapse"
width="220" id="table3"
height="140" bordercolor="#76A9B4">
<tr>
<td id="carddata" bgcolor="#E1F7F7">
<table width="220" height="140" border="0"
cellpadding="0" cellspacing="10" bgcolor="#E1F7F7">
<tr>
<td height="66" valign="top" align="center">
<table width="100%" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td width="66" valign="top" align="center">
<table width="66" height="66" border="0"
cellpadding="0" cellspacing="0" bgcolor="#418488">
<tr>
<td align="center"><img id="pic2" src=""
width="60" height="60"></td>
</tr>
</table>
</td>
<td width="8">&nbsp;</td>
<td valign="top"><table width="100%" height="22"
border="0" cellpadding="0"
cellspacing="0" bgcolor="#C0E2DF">
<tr>
<td width="5">&nbsp;</td>
<td valign="bottom"><span class="MwordCL01"
id='username'></span>&nbsp;-<span class="Sword02"
id="sexname"></span></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="5" height="24">&nbsp;</td>
<td height="24" valign="bottom">
<span class="Sword02">層級:</span>
<span class="Sword02" id="attname"></span></td>
</tr>
<tr>
<td width="5" height="19">&nbsp;</td>
<td height="19" valign="bottom">
<span class="Sword02">區域:</span>
<span class="Sword02" id="codename"></span></td>
</tr>
</table> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="SwordCL01">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="70" height="19" align="right"
class="SwordCL01">健康部落:</td>
<td height="19" class="Sword01"><nobr>
<? if ( strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")) { ?>
<span style="width:130;text-overflow: ellipsis;overflow: hidden;"
id="vip_name"></span></nobr></td>
<? }else{ ?>
<div style="width:130;text-overflow: ellipsis;overflow: hidden;"
id="vip_name"></div></nobr></td>
<? } ?>
</tr>
<tr>
<td width="70" height="19" align="right"
class="SwordCL01">發表篇數:</td>
<td height="19" class="Sword01" id="doccnt">
<span class="Sword01">篇</span></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div>

因為我需要在整個網站到處都會用到這個會員名片,所以我是把它單獨寫成一斷的程式,然後在每一隻需要用的程式末端下

<?include('Common/card.phtml');?>
</div>
</body>
</html>

 然後另外再寫一支的放滿我需要的 junction 的 js ,也是方便每隻需要用到會員名片的程式來 call !

<script language="javascript" src="/Js/feijer.js"></script>

其內容如下 :

function CardShow(obj,ty,lx,pic2,username,sexname,attname,codename,vip_name,doccnt){
enoter_IsBoard = 1;

if(enoter_IsBoard){

var enoter_demo = document.getElementById("mycard").style;
var leftNum,topNum;
enoter_demo.visibility="visible";

document.getElementById("pic2").src = pic2;
document.getElementById("username").innerHTML = username;
document.getElementById("sexname").innerHTML = sexname;
document.getElementById("attname").innerHTML = attname;
document.getElementById("codename").innerHTML = codename;
document.getElementById("vip_name").innerHTML = vip_name;
document.getElementById("doccnt").innerHTML = doccnt;
var _x = getObjX(obj);
var _y = getObjY(obj);

leftNum=19;
topNum=0;

document.getElementById("mycard").style.left = Number(_x) + lx +"px";
document.getElementById("mycard").style.top = Number(_y) + ty +"px";
}
}

function getObjX(obj){
var hlcleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
hlcleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}else if (obj.x) hlcleft += obj.x;
return hlcleft;
}

function getObjY(obj){
var hlctop = 0;
if (obj.offsetParent){
while (obj.offsetParent){
hlctop += obj.offsetTop;
obj = obj.offsetParent;
}
}else if (obj.y)hlctop += obj.y;
return hlctop;
}

function CardClose(){
document.getElementById("mycard").style.left=-1000+"px";
document.getElementById("mycard").style.top=-1000+"px";
}

然後程式需要的地方,除了把值傳進去 function ,並可以指定名片視窗要出現在 父容器的那邊,因為有時那個名片太靠右邊時,會被畫面切割掉,這時就可以調整 ty lx 兩個值來指定七其位置。

<a href="<?=$Blog;?>"
onmouseover="CardShow(this,30,60,'<?=$pic2;?>','<?=$username;?>','<?=$sexname;?>',
'<?=$attname;?>','<?=$codename;?>',
'<?=$vip_name;?>','<?=$doccnt;?>');"
onmouseout="CardClose();">

所以當 onmouseover 被觸發時,便去 call js 中的 CardShow function ,再一一的將資料放會員名片中,如此便可以將名片無誤的在想要的地方去呈現。

2009/1/12

php : 上傳圖片後再切出並縮小成正方形圖《by 童顏未老人》

 這次的新需求是,會員要可以上傳自己喜愛的照片,而且要大小不拘,然後需由每一張圖居中的取出最大範圍的正方形圖後,在把他縮小到 60 X 60 的大小去,再存到系統上面去,這樣一來可以減低系統的硬碟的負擔。要作到這樣的話,就必需要利用到 GD 的函數了。

 例如,一張 1600 X 1200 的照片上傳以後,需先拮取其中的 1200 X 1200 (中心點不變),再將其縮小成 60 X 60 的圖片!

 在主要的輸入畫面上:

<form name="frm" method="POST" action="loadpic.php" enctype="multipart/form-data">
<input id="filename" type="file" size="45" name="filename">( 請上傳您的個人照片!)
<input type="submit" name="doit" value="送出">
</form>

在這裏最重要的是在 <form> 中必需要加上 enctype="multipart/form-data"!

而在 loadpic.php 這隻主要程式中,應如下的寫:

先定義出一個 function 用來抓副檔名:

function getFiletype ($FileName) {
$num=strrpos($FileName,".");
return ".".substr($FileName,$num+1);
}

// 取得上傳的圖片
$src = imagecreatefromjpeg($_FILES['filename']['tmp_name']);

// 取得圖片的寬
$src_w = imagesx($src);

// 取得圖片的長
$src_h = imagesy($src);

// 取得圖片的副檔名 ( 如 jpg, gif... )
$src_type = strtolower(getFiletype($_FILES["filename"]["name"]));

// 依長與寬兩者最短的邊來算出要抓的正方形邊長
if( $src_w > $src_h){
$new_w = $src_h;
$new_h = $src_h;
}else{
$new_w = $src_w;
$new_h = $src_w;
}

// 以長方形的中心來取得正方形的左上方原點
$srt_w = ( $src_w - $new_w ) / 2;
$srt_h = ( $src_h - $new_h ) / 2;

// 定義一個圖形 ( 針對正方形圖形 )
$newpc = imagecreatetruecolor($new_w,$new_h);

// 抓取正方形的截圖
imagecopy($newpc, $src, 0, 0, $srt_w, $srt_h, $new_w, $new_h );

// 建立縮圖
$finpic = imagecreatetruecolor(60,60);

// 開始縮圖
imagecopyresampled($finpic, $newpc, 0, 0, 0, 0, 60, 60, $new_w, $new_h);

// 儲存縮圖到指定的目錄存放 , 檔名就是記錄在 SESSION 中的 login name
imagejpeg($finpic,
"../../images/Upload/Users/".$_SESSION["MemberLoginName"].$src_type);

// 將檔名存到變數 $filename 去,以備記錄到 table 去,方便日後依會員的帳號來抓取圖片
$filename = $_SESSION["MemberLoginName"].$src_type;

大功告成!

2009/1/10

利用 css 來做到 title/alt 的功能《by 童顏未老人》

 剛剛試出一個或許對眾高手來說,是很簡單而且不太入流的技術,不過這可是我弄了好久才學到的。特別記錄下來免的以後會忘了。

 是這樣的,我希望在網頁上當使用者將滑鼠移動到某個物件上面時,右下方就會跳出一個簡單的說明,如下圖:

 這原本是不難的,只要用 title 這屬性就可以作到了,但是那樣的話,字會很小,而且沒什麼變化,對年繼大的人來說頗不友善的。於是我便動到 css 的頭上,再參考到網路上一個高手的作法,我略加修改一下,就相當的適合我用了。

首先定義一下 css 的部份


<style type="text/css">
.info {position:relative;}
.info:hover {background:#eee;color:#333;}
.info span {display: none }
.info:hover span {
display:block;
position:absolute;
top:30px;
left:60px;
width:400px;
border:1px solid #ff0000;
background:#FDFFB4;
color:#000000;
padding:5px;
text-align:left;
z-index:9;
text-decoration:none;}
</style>


然後對於 目標的地方修改 如下:

<a href="../News/List.phtml?StarID=<?echo $StarID?>" class="info">
<img src="../images/bt042.gif" name="Image0_4"
id="Image0_4" width="92" height="26" border="0">
<span>隨時將五大星球最新的資訊及活動傳達給您。</span></a>


主要的用意便是,想透過 <a> </a>裏面所包的 <span> 來顯示出那段說明。但是當游標尚未進入前,這段 span 先用 display:none; 來讓它隱藏起來。

當滑鼠的游標進入標的時,再用 display:block;的方式讓它出現,並在設定一下表現方式 ( 離游標的位置、字體、顏色‧‧‧ )

當然了 <a> 元素不要忘了設定一下 class="info" !

還有 info 本身要設定為 position:relative; ,否則那個說明會固定在畫面的左上角!

這樣就可以達到我想要的目標! :)

2009/1/7

水平線標籤在 ie 和 firefox 之不同的解決《by 童顏未老人》

 微軟的 ie 有點討厭,一些 html 的語法就是要與別人的不一樣,最近為了要讓自家公司的網頁能通吃 ie、 firefox ,於是下了苦心去調整程式。

 之前公司的在繪製長條圖時,都是採用圖片,然後再利用 width 的屬性來將其拉長到想要的長度!不過後來連圖也不想用了,畢竟圖還是有一點大小,為了省下一點點的速度,所以把它換成 html 的語法。

 當時採用的是
,這個繪製水平線的標籤。因為要區分嚴重性,所以線本身需要顏色管理,因此在
裏面特用了 css 的 style 來設定它的顏色和厚度。而且
在 default 上周在上下兩邊會有一點 margin,所以當時是如此下:

 其結果在 ie 中能得到滿意的效果,如下圖:

 但是在 firefox 中,卻是慘不忍睹,如下:

 於是經過一番測試後終於了解到,firefox 當設立 height 後,水平線本身是中空的, css 中的 color 所指定的顏色通通沒用。而且 firefox 對於
的上下 default margin 也和 ie 不同,所以程式有得依 ie 和 firefox 的不同來分別設定了!

 這樣一來, ie 還是可以好好的保遲原來的效果, firefox 的效果也能令人滿意了!