ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

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

当方、HTML、JavaScript、CSSの基礎知識はあります。
質問投稿日時：08/04/04 12:39
質問番号：3921241
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：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>
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/04 17:08
回答番号：No.2
この回答へのお礼サンプルまでつけていただいてありがとうございます。
検索するとLightwindowは記事も多く、使いやすそうですね。
参考にさせていただきます。

回答

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

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

同じことはlightboxで出来ますよ
​http://www.huddletogether.com/projects/lightbox2/​
種類：回答
どんな人：経験者
自信：参考意見
回答日時：08/04/04 16:37
回答番号：No.1
この回答へのお礼ありがとうございます。
勉強になりました。
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ