因為有網友陸續來信問到本站左上方區塊「調整網頁/字型大小」的作法,
一一回覆蠻累的,就將作法提供給大家參考,有興趣的一起來討論,作法請看以下說明。
首先請看 這裡 的說明,這是這個區塊的源起與參考的作法,
其實她是 html+JavaScript 語法寫成的,程式碼如下:
<div align="center">
網頁大小:
<a title="放大網頁" href="#" onClick="javascript:PageZoomMore()">+</a> |
<a title="縮小網頁" href="#" onClick="javascript:PageZoomLess()">-</a> |
<a title="原網頁大小" href="#" onClick="javascript:PageZoom100()">原</a><br>
字型大小:
<a title="放大網頁字型" href="#" onClick="javascript:FontZoomMore()">+</a> |
<a title="縮小網頁字型" href="#" onClick="javascript:FontZoomLess()">-</a> |
<a title="自訂網頁字型大小" href="#" onClick="javascript:MoreBigFont()">調</a>
</div>
<script language="JavaScript">
/*放大網頁*/
function PageZoomMore() {
var i = parseInt(document.body.style.zoom);
if (isNaN(i)) i=100;
if (i<0) i=0;
if (i==19) i=18;
newZoom = i+10+'%';
document.body.style.zoom=newZoom;
}
/*縮小網頁*/
function PageZoomLess() {
var i = parseInt(document.body.style.zoom);
if (isNaN(i)) i=100;
if (i<18) i=18;
newZoom=i-10+'%';
document.body.style.zoom=newZoom;
}
/*原網頁大小*/
function PageZoom100() {
document.body.style.zoom="100%";
}
/*放大網頁字型*/
function FontZoomMore() {
var fontSize = parseInt(document.body.style.fontSize);
if (isNaN(fontSize)) fontSize=12;
fontSize = fontSize+3;
var objects= document.all;
if (objects!=null)
{
var numberOfObj=objects.length;
for (var i=0; i<numberOfObj; i++)
{
objects[i].style.fontSize=fontSize;
}
}
}
/*縮小網頁字型*/
function FontZoomLess() {
var fontSize = parseInt(document.body.style.fontSize);
if (isNaN(fontSize)) fontSize=15;
fontSize = fontSize-3;
var objects= document.all;
if (objects!=null)
{
var numberOfObj=objects.length;
for (var i=0; i<numberOfObj; i++)
{
objects[i].style.fontSize=fontSize;
}
}
}
/*自訂網頁字型大小*/
function MoreBigFont() {
var objects= document.all;
if (objects!=null)
{
var fontSize = window.prompt("您想將字體放大到多少像素?",15);
var numberOfObj=objects.length;
for (var i=0; i<numberOfObj; i++)
{
objects[i].style.fontSize=fontSize;
}
}
}
</script>
複製以上紅色部份的 code ,然後到你的 xoops 後台新增一個區塊,
將上述的 code 貼進去就可以了,記得要將「內容形式」選「HTML」,
然後最好是將這個區塊讓她顯示在每一個頁面,這樣網友就可以在每個網頁使用她,
至於區塊的位置,就隨個人所好了,本站是將她設在最上方。
以上,有問題歡迎提出來討論。