01
05
Highslide JSで浮き出るインラインフレーム
2008-01-05
⇒
highslide サンプル（クリックすると浮き出ます）
Highslideはこちらでダウンロードしてください ⇒ Highslide JS
Highslideはこちらでダウンロードしてください ⇒ Highslide JS
【javascript】
<script type="text/javascript" src="highslide.js"></script>
<script type="text/javascript" src="highslide-html.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
hs.objectLoadTime = 'after';
</script>
※ 赤字は各自アップしたアドレスを入力してください。
<script type="text/javascript" src="highslide.js"></script>
<script type="text/javascript" src="highslide-html.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
hs.objectLoadTime = 'after';
</script>
【body】
<a href="表示したいサイトのアドレス" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html', objectType: 'iframe', objectWidth: 700, objectHeight: 900} )" class="highslide">
Content in iframe
</a>
<div class="highslide-html-content" id="highslide-html" style="width: 700px">
<div class="highslide-move" style="border: 0; height: 18px; padding: 2px; cursor: default">
<a href="#" onclick="return hs.close(this)" class="control">Close</a>
</div>
<div class="highslide-body"></div>
<div style="text-align: center; border-top: 1px solid silver; padding: 5px 0">
<small>
Powered by <i>Highslide JS</i>
</small>
</div>
</div>
</div>
<a href="表示したいサイトのアドレス" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html', objectType: 'iframe', objectWidth: 700, objectHeight: 900} )" class="highslide">
Content in iframe
</a>
<div class="highslide-html-content" id="highslide-html" style="width: 700px">
<div class="highslide-move" style="border: 0; height: 18px; padding: 2px; cursor: default">
<a href="#" onclick="return hs.close(this)" class="control">Close</a>
</div>
<div class="highslide-body"></div>
<div style="text-align: center; border-top: 1px solid silver; padding: 5px 0">
<small>
Powered by <i>Highslide JS</i>
</small>
</div>
</div>
</div>
【CSS】
<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide-html {
background-color: white;
}
.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;*/
}
.control {
float: right;
display: block;
/*position: relative;*/
margin: 0 5px;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #999;
}
.control:hover {
color: black !important;
}
.highslide-move {
cursor: move;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
Highslide JSについては「Highslide JS-サムネール画像を拡大表示するスマートなjavascript」が参考になると思います。<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide-html {
background-color: white;
}
.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;*/
}
.control {
float: right;
display: block;
/*position: relative;*/
margin: 0 5px;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #999;
}
.control:hover {
color: black !important;
}
.highslide-move {
cursor: move;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
