要做到這件事情,需要前後端程式互相配合。
前端程式(JavaScript):
<script>
function 切換圖形(編號, 顯示, 隱藏) {
顯示 = document.getElementById(編號 + "_" + 顯示).style;
隱藏 = document.getElementById(編號 + "_" + 隱藏).style;
if ("none" != 隱藏.display) {
隱藏.display = "none";
}
if ("inline" != 顯示.display) {
顯示.display = "inline";
}
return;
}
</script>
後端程式(PHP):
function &顯示導覽($絕對路徑, $絕對網址, $編號, $主圖檔, $副圖檔 = '') {
if (false == file_exists(路徑修正("$絕對路徑/$主圖檔", false, true))) {
return '';
} else if ('' == $副圖檔 || false == file_exists(路徑修正("$絕對路徑/$副圖檔", false, true))){
return '<img border="0" src="' . 路徑修正("$絕對網址/$主圖檔") .'" />';
} else {
$主圖檔 = '<img border="0" style="display:inline;" id="' . $編號 . '_0" onmouseover="切換圖形(' . "$編號, 1, 0);" . '" src="' . 路徑修正("$絕對網址/$主圖檔") .'" />';
$副圖檔 = '<img border="0" style="display:none;" id="' . $編號 . '_1" onmouseout="切換圖形(' . "$編號, 0, 1);" . '" src="' . 路徑修正("$絕對網址/$副圖檔") .'" />';
return $主圖檔 . $副圖檔;
}
}
前端程式(JavaScript):
<script>
function 切換圖形(編號, 顯示, 隱藏) {
顯示 = document.getElementById(編號 + "_" + 顯示).style;
隱藏 = document.getElementById(編號 + "_" + 隱藏).style;
if ("none" != 隱藏.display) {
隱藏.display = "none";
}
if ("inline" != 顯示.display) {
顯示.display = "inline";
}
return;
}
</script>
後端程式(PHP):
function &顯示導覽($絕對路徑, $絕對網址, $編號, $主圖檔, $副圖檔 = '') {
if (false == file_exists(路徑修正("$絕對路徑/$主圖檔", false, true))) {
return '';
} else if ('' == $副圖檔 || false == file_exists(路徑修正("$絕對路徑/$副圖檔", false, true))){
return '<img border="0" src="' . 路徑修正("$絕對網址/$主圖檔") .'" />';
} else {
$主圖檔 = '<img border="0" style="display:inline;" id="' . $編號 . '_0" onmouseover="切換圖形(' . "$編號, 1, 0);" . '" src="' . 路徑修正("$絕對網址/$主圖檔") .'" />';
$副圖檔 = '<img border="0" style="display:none;" id="' . $編號 . '_1" onmouseout="切換圖形(' . "$編號, 0, 1);" . '" src="' . 路徑修正("$絕對網址/$副圖檔") .'" />';
return $主圖檔 . $副圖檔;
}
}
全站熱搜
留言列表