1

画像がクリックされたときにページへのリンクが正しく機能するようにしようとしています。このjsFiddleには、3つの円形の画像が表示されます。それらのいずれかにマウスを合わせると、背景の影の画像がレンダリングされます。「法律事務所」の画像をクリックすると、テキストを含む短いHTMLページが表示されます。何が起こるかというと、法律事務所のテキストへのリンクは、画像自体としてではなく、「>」文字としてレンダリングされます。以下のスクリーンショットを参照してください。

画像をリンクとして機能させる方法を教えてもらえますか？また、マウスをその上に置いたときに、背景画像が法律事務所の画像の中央に配置され続けるようにします。

CSS：

.center {text-align: center;}

#sfimages {padding:15px;}

#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;     
}

HTML：

<body>
<table style="width: 100%">
    <tr>
            <td class="center">
                <div id="sfimages"> 
                <a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">                              >
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object>
                </a>
                </div>
            </td>
            <td class="center">
                <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object>
                </div>
            </td>
    </tr>
</table>

ここに画像の説明を入力してください

4

3 に答える 3

1

しばらくお時間をいただき申し訳ありませんでしたが、私にとっては忙しい一日でした。あなたの質問に戻るのに十分な時間がありました。これが私がお勧めするものです。使用しているコードはinkscapeから生成されているように見えますか？それが実行されるとき、ソースコードは、特にオブジェクト領域内でナッツです。ただし、リンクが必要な場合は心配する必要はありません。次のわずかな調整を行うだけで、リンクを使用できるようになります。

CSS：

.center {
    text-align: center;
}

#sfimages {
padding:15px;
position:relative;
width:380px;
height:273px;
}

#sfimages:hover {
    background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
    background-repeat: no-repeat;
    background-position:center;     
}

#ext-site {
display:block;
width:380px;
height:273px;
position:absolute;
z-index:9999;
}

HTML：

<table style="width: 100%">
    <tr>
            <td class="center">
                <div id="sfimages"> 
                <a id="ext-site" href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"></a>                              
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object>

                </div>
            </td>
            <td class="center">
                <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object>
                </div>
            </td>
    </tr>
</table>

これは、相対的な表示ブロック要素の内側に、絶対に配置されたアンカーリンクを含む古典的なトリックです。アンカーが親のサイズのサイズまで伸びている限り、アンカーはセクション全体の上部にある非表示のボタンとして機能します。

私の新しいフィドルをチェックしてください

于 2013-03-18T16:57:58.563 に答える
0

予備の文字がありました：次のコードを確認してください（コメントには完全なコードへのリンクがあります）：

<table style="width: 100%">
    <tr>
        <td class="center">
            <div id="sfimages"> 
            <a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">                              
            <object type="image/svg+xml"
                data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
            </object>
            </a>
            </div>
        </td>
        <td class="center">
            <div id="sfimages">
            <object type="image/svg+xml"
                data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
            </object>
            </div>
        </td>
        <td class="center">
            <div id="sfimages">
            <object type="image/svg+xml"
                data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
            </object>
            </div>
        </td>
    </tr>
</table>
于 2013-03-18T16:55:12.060 に答える
0

6行目：

<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">                              >

余分な閉じブラケットを取り外します。

于 2013-03-18T16:55:34.947 に答える