教學│網頁在原視窗收縮"Highslide－♡゜來玩我♥cameplayme゜♡

點擊連結在原視窗彈出小視窗的框架頁iframe

此篇文章屬於　　所有　　

H ighslide官方網站

提供圖片方便瀏覽（熱鍵）的選項和縮放ajax、flash、Iframed等檔案...諸如此類效果的ｊｓ檔案。

對圖片效果有興趣的可以收看：教學│圖片在原視窗放大"Highslide

Compatibility

IE6Firefox

Examples

文字連結網頁範例

部落格用教學

Ｓｔｅｐ１.

下載壓縮檔

解壓縮之後有「highslide」、「images」兩個資料夾跟一堆html的範例

Ｓｔｅｐ２.

把「highslide資料夾」上傳至可以外連且能放資料夾的固定網路域名空間

例如：Hinet的http://XXX.myweb.hinet.net/固定域名，沒有怎麼辦？來看看miroko網路空間教學

Ｓｔｅｐ３.

複製效果程式碼 ↓ 貼回部落格的自訂欄位，參考：參考：各大部落格語法放置教學

效果程式碼

</script>

padding-left: 22px;
    background-image: url(你的網路網址/highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}

/* Styles for the popup */
.highslide-wrapper, .rounded-white {
	background-color: white;
}
.highslide-wrapper .highslide-html-content {
    width: 400px;
    padding: 0 5px 5px 5px;
}
.highslide-wrapper .highslide-header {
	padding-bottom: 5px;
}
.highslide-wrapper .highslide-header ul {
	margin: 0;
	padding: 0;
	text-align: right;
}
.highslide-wrapper .highslide-header ul li {
	display: inline;
	padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next {
	display: none;
}
.highslide-wrapper .highslide-header a {
	font-weight: bold;
	color: gray;
	text-transform: uppercase;
	text-decoration: none;
}
.highslide-wrapper .highslide-header a:hover {
	color: black;
}
.highslide-wrapper .highslide-header .highslide-move a {
	cursor: move;
}
.highslide-wrapper .highslide-footer {
	height: 15px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
	float: right;
	margin-top: 4px;
	height: 11px;
	width: 11px;
	background: url(你的網路網址/highslide/graphics/resize.gif);
}
.highslide-wrapper .highslide-body {
}
.highslide-move {
    cursor: move;
}
.highslide-resize {
    cursor: nw-resize;
}

</style>

解析 ↑ 你的網路網址改成你的網路空間位址，例如：http://XXX.myweb.hinet.net

Ｓｔｅｐ４.

複製語法↓回到發表文章，以"純文字"模式編輯貼上

連結的語法 <div><a onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )" href="連結網址">文字連結網頁範例 </a></div>

解析 ↑ 連結網址跟連結文字改成你要的連結網站跟文字

Ｓｔｅｐ５.

隱藏新增的自訂欄位

５-１.

在部落格原始檔搜尋新增版位的標題找到CSS標籤

我在新增版位時的標題設為"圖片放大效果"，依以下步驟找到CSS標籤：

我的部落格→檢視→原始檔→搜尋(Ctrl+F )"圖片放大效果"↓

<div class="hslice box folder" id="box748104">
<h4 class="box-title entry-title">圖片放大效果</h4>

解析 ↑ box748104就是我的自訂欄位的CSS標籤

５-２.

複製語法↓貼回你的CSS裡

#box748104{display:none;}

解析 ↑ box748104改成你的CSS標籤

網頁用教學

Ｓｔｅｐ１.	下載壓縮檔
	解壓縮之後有「highslide」、「images」兩個資料夾跟一堆html的範例
Ｓｔｅｐ２.	把「highslide資料夾」上傳至可以外連且能放資料夾的固定網路域名空間
	例如：Hinet的http://XXX.myweb.hinet.net/固定域名，沒有怎麼辦？來看看miroko網路空間教學
Ｓｔｅｐ３.	複製網頁用程式碼↓貼到<head>跟</head>之間
	網頁用程式碼 <script type="text/javascript" src="你的網路網址/highslide/highslide-with-html.js"></script> <script type="text/javascript"> hs.graphicsDir = '你的網路網址/highslide/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; </script> <style type="text/css"> .highslide-container div { font-family: Verdana, Helvetica; font-size: 10pt; } .highslide-html { background-color: white; } .highslide-html-blur { } .highslide-html-content { position: absolute; display: none; } .highslide-loading { display: block; color: black; font-size: 8pt; font-family: sans-serif; font-weight: bold; text-decoration: none; padding: 2px; border: 1px solid black; background-color: white; padding-left: 22px; background-image: url(你的網路網址/highslide/graphics/loader.white.gif); background-repeat: no-repeat; background-position: 3px 1px; } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } /* Styles for the popup */ .highslide-wrapper, .rounded-white { background-color: white; } .highslide-wrapper .highslide-html-content { width: 400px; padding: 0 5px 5px 5px; } .highslide-wrapper .highslide-header { padding-bottom: 5px; } .highslide-wrapper .highslide-header ul { margin: 0; padding: 0; text-align: right; } .highslide-wrapper .highslide-header ul li { display: inline; padding-left: 1em; } .highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next { display: none; } .highslide-wrapper .highslide-header a { font-weight: bold; color: gray; text-transform: uppercase; text-decoration: none; } .highslide-wrapper .highslide-header a:hover { color: black; } .highslide-wrapper .highslide-header .highslide-move a { cursor: move; } .highslide-wrapper .highslide-footer { height: 15px; } .highslide-wrapper .highslide-footer .highslide-resize { float: right; margin-top: 4px; height: 11px; width: 11px; background: url(你的網路網址/highslide/graphics/resize.gif); } .highslide-wrapper .highslide-body { } .highslide-move { cursor: move; } .highslide-resize { cursor: nw-resize; } </style> 　解析 ↑ 你的網路網址改成你的網路空間位址，例如：http://XXX.myweb.hinet.net
Ｓｔｅｐ４.	複製語法↓貼到<body>跟</body>之間
	連結網址語法 <div><a onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )" href="連結網址">文字連結網頁範例 </a></div> 解析 ↑ 連結網址跟連結文字改成你要的連結網站跟文字