背景を薄くして別コンテンツを表示する

質問

言葉でどう説明したらいいのか分からないのですが、下記ページの「写真を拡大」をクリックしたときの動きってどうやったらできるのでしょうか？
http://netallica.yahoo.co.jp/news/30139
ソースを見ても普通のaタグが書いてあるだけで、onclickでJavaScriptも呼んでないし、分かりません。
参考ページ等あれば教えてください。

当方、HTML、JavaScript、CSSの基礎知識はあります。

回答No.2

leap_day · ベストアンサー

こんにちは

そのものずばりっ！っというサイトは紹介できませんが・・・
そういったエフェクトを実行できるjsライブラリを使用しているのだと思います

類似系で言えば『Lightwindow.js』とか
http://c-brains.jp/blog/wsg/tools/lightwindow/lightwindow_sample.html

流れ的には(簡単に作ったものなので雑ですが・・・）以下のような流れだと思います

<style type="text/css"><!--
html,body {
width:100%;
height:100%;
margin:0px;
}
#base {
position:absolute;
top:0px;
left:0px;
background-color:#000;
width:100%;
height:100%;
opacity:0.7;
z-index:1;
display:none;
}
#gallary_contents {
width:400px;
position:absolute;
top:100px;
left:50%;
margin-left:-200px;
background-color:#fff;
}
#gallary {
width:400px;
height:400px;
}
#gallary_help {
height:0px;
overflow:hidden;
text-align:center;
}
#closebtn {
padding-top:20px;
text-align:center;
background-color:#000;
}
--></style>
<!--[if IE]>
<style type="text/css"><!--
#base {
filter:alpha(opacity=70);
}
--></style>
<![endif]-->

<script type="text/javascript"><!--
window.onload=function() {
obj = document.getElementById("clickable").getElementsByTagName("a");
for(i=0;i<obj.length;i++) {
obj[i].onclick = function() { return setImage(this); }
}
document.getElementById("closebtn").getElementsByTagName("input")[0].onclick = function() { cl(); }
}
function setImage(obj) {
document.getElementById("base").style.display = "block";
target1 = document.getElementById("gallary");
target2 = document.getElementById("gallary_help");

target1.src = obj.href;
target1.alt = obj.caption;
target2.style.height = "0px";
target2.innerHTML = obj.title +"<br>"+ obj.id;
setTimeout("helpheight(0)",200);
return false;
}
function helpheight(n) {
obj = document.getElementById("gallary_help");
if(n > 100) return false;
h = n + 10;
obj.style.height = h +"px";
setTimeout("helpheight(h)",50);
}
function cl() {
document.getElementById("base").style.display = "none";
}
//--></script>

<div id="clickable">
<a href="sample0.gif" title="サンプル画像" id="leap_day&nbsp;2008/4/4" caption="img1">サンプルクリック</a>
</div>

<div id="base">
<div id="gallary_contents">
<img src="" id="gallary" alt="">
<div id="gallary_help"></div>
<div id="closebtn"><input type="button" value="閉じる"></div>
</div>
</div>

お礼

サンプルまでつけていただいてありがとうございます。
検索するとLightwindowは記事も多く、使いやすそうですね。
参考にさせていただきます。

回答No.1

tenderfeel

そこで使われてるのはYUIを使ったもののようですね。多分オリジナルだと思います。

こういうスクリプトは大抵relやclassで呼び出していますので
onclick等のイベントハンドラは記述されません。

同じことはlightboxで出来ますよ
http://www.huddletogether.com/projects/lightbox2/

お礼

ありがとうございます。
勉強になりました。