フェードインを非表示にしたdivを使用して画像のonclick関数を作成しようとしています。問題は、jqueryやjavascriptをあまりよく知らないことです。私はcssでそれをしようと検索しましたが、それは地獄のようにバグがあると聞きました、そして私はそれが必要なコードとそれがどこに行くべきかをつなぎ合わせるのに十分なjs/jqを理解していません。
基本的に私が欲しいのはこれです：あなたが画像をクリックすると、画像は非表示のdivでフェードインし、できれば背景を暗くし（シャドウボックスのようなもの）、非表示のdiv内の閉じるリンクをクリックするとdivがフェードアウトします背景が通常に戻ります。
現在、クリックする画像、非表示のdiv、およびリンクが設定された通常のdivがあります。
私はそれができることを知っています、私はそれを理解するのに時間の地獄を持っています。助けてください？
::JSの変更を反映するように更新されたコード::
HTML-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title Goes Here</title>
<meta name="keywords" content=" Enter Metatags" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init();
</script></head>
<body bgcolor="#547FA1">
<div id="content">
<div id="wrapper">
<div id="holder"><a href="#"><img src="images/openimage2.jpg" alt="open" width="1200" height="645" border="0" usemap="#Map" /></a>
</img></div>
<div class="shadowdisc">
<p> </p>
<font size=4 color=#999><p align=center>Content for Hidden Div.</p>
<p align=center>Here is more content</p>
<br /><br />
<p align=center>Finishing the content here</p>
<p>
<p>
<p align=center><a href="welcome.html">ENTER</a> <a href="http://www.google.com">EXIT</a></p>
<p>
<p>
<p align=right><a href="#">Close</a>
</font>
</div>
</div>
</div>
</div>
</body
</html>
CSS-
#content{
width: auto;
height: auto;
overflow: hidden;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed
color: #5B5B5B;
}
#wrapper{
width: 1200px;
margin-right: auto;
margin-left: auto;
height: 1100px;
}
#holder{
position: relative;
width: 1200px;
top: 150px;
background-color: #E3E3E3;
height: 594px;
}
.shadowdisc{
width: 900px;
background-image: url(images/disbg.png);
position: relative;
bottom: 400px;
border: 1px solid #999;
left: 148px;
padding: 10px;
display: none;
}
</style>
Javascript
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script>
$(function () { // Onload
$("#showImage").click(function () {
$("#shadowdisc").fadeIn(1000);
});
$("#closeLink").click(function () {
$("#shadowdisc").fadeOut(1000);
});
});
</script>