0

タイトルが、私が直面している問題を適切に説明しているかどうかはわかりません...

基本的に、私は自分のウェブサイトを再設計中ですが、私が遭遇した問題の 1 つは、私のポートフォリオのギャラリー ビューで、私の作品の一部の画像のグリッドがフレーム内に表示されることです。

フレームにカーソルを合わせると、画像が非表示になり、タイトル、クライアント、カテゴリ、年が表示されます。

ただし、すべての上に配置され、クリック可能なリンクが必要です。ただし、上記の情報は、マークアップでは画像の下にありますが、画像の上にあります。

これは、絶対に配置されたDIVにある上記の情報と関係があると思います（フレームの上部に配置できるため、必要です）。

私が達成したいのは、DIV でカバーされている領域であっても、フレームにカーソルを合わせたときにフレーム全体をクリックできるようにすることです。これが不明な場合は教えてください...

ここで実際のサイトを見ることができます: http://www.designbyadmiral.com/

それがいくつかのことを解決するのに役立つと確信しています。

4

3 に答える 3

2

すべての UI に jQuery プラグインを使用しているようですので、動作をカスタマイズするのは難しいかもしれません。

最も簡単な方法は、下にあるリンクの href を使用して別のページに移動するオーバーレイ div にクリック イベントを追加することです。

$("#topdiv").click(function() { 
   window.location = $("#originallink").attr("href"); 
});
于 2009-07-29T07:12:59.450 に答える
1

これを行うには、おそらく多くのコードを変更する必要があります (回避策を作成しましたが、単純な解決策が見つからなかったためです)。アンカーを使用する特別な理由がない場合 (メインのアンカー以外: ダム アンカーをリンクとして使用してください!)、次のスニペットが機能するはずです。

$(".project").each(function(){
    var url = $(this).children('.project-link').attr('href');
    $(this).css('cursor', 'pointer');
    $(this).click(function(){
        window.location = url;
    });
});

幸運を。

于 2009-07-29T07:36:28.870 に答える
0

このマークアップを使用して目的の結果を達成していますが、JavaScript は使用していません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
ul { list-style: none }
li { float: left }
li a { display: block; position: relative; text-decoration: none; color: #5e5d56; }
li a img, li a div { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: 13px; border: none; }
li a img { z-index: 2; }
li a:hover img { display: none }
li a div { background: #b8b7af; padding: 20px; z-index: 1; }
</style>
</head>
<body>
<ul>
    <li>
        <a href="http://www.designbyadmiral.com/project/maclure-library-site-redesign" style="width:458px;height:523px">
            <img width="432" height="497" alt="Maclure Library site redesign screenshot" src="http://www.designbyadmiral.com/image/1/432/0/uploads/maclure-2-screenshot-1.jpeg"/>
            <div class="project-information">
        <h3>Maclure Library Site Redesign</h3>
                <dl>
                    <dt>Client</dt>
                    <dd>Maclure Library</dd>
                    <dt>Year</dt>
                    <dd>2009</dd>
                    <dt>Category</dt>
                    <dd>Web</dd>
                </dl>
            </div>
        </a>
    </li>
    <li>
        <a href="http://www.designbyadmiral.com/project/maclure-library-site-redesign" style="width:458px;height:499px">
            <img width="432" height="473" alt="Infamy homepage screenshot" src="http://www.designbyadmiral.com/image/1/432/0/uploads/infamy-website-1-homepage.jpeg"/>
            <div class="project-information">
        <h3>Infamy Website Design and Development</h3>
                <dl>
                    <dt>Client</dt>
                    <dd>Schadenfreude Productions Ltd.</dd>
                    <dt>Year</dt>
                    <dd>2008</dd>
                    <dt>Category</dt>
                    <dd>Web</dd>
                </dl>
            </div>
        </a>
    </li>
</ul>
</body>
</html>

ページで機能しない理由がわかりません。しかし、そのような単純なタスクに JavaScript を使用する必要はないと思います。

于 2009-07-29T08:11:32.170 に答える