2

このフィドルを見てください

背景画像をクリック可能にするにはどうすればよいですか？「アンケートに答える」をクリックすると、新しいページに移動します。

<div style="height:300px;width:300px;border-style:solid;border-width:5px;background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); background-repeat:no-repeat;background-position:right top;">

By default, the background-image property repeats an image both horizontally and vertically.

</div>

JavascriptまたはCSSがすべて推奨されます。

編集：右隅に画像フロートを使用したくありません。

4

5 に答える 5

4

あなたはすべきではありません。

ユーザーがスタイルをオフにしている場合、またはスクリーンリーダーを使用している場合はどうなりますか？彼らも調査を受けることができるはずです。

div{position:relative;}
a {display:block; width:120px; height:120px;
    position:absolute;
    top:0; right:0;
    text-indent:-9999px;

    background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); 
    background-repeat:no-repeat;background-position:right top;}

デモ

于 2012-01-10T22:23:12.467 に答える
1

詳細については、こちらを確認してください：http: //bluedogwebservices.com/css-trick-turning-a-background-image-into-a-clickable-link/

また、divを相対的なものにしてから、アンカーでラップした画像を配置して、右上隅に配置することもできます。

編集

HTML

<div class="wrapper">
<a href="/"><img src="yoursrc" alt="description"/></a>
<p>Some other text regularly positioned.</p>
<div>

CSS：

.wrapper
{
position:relative;
width:500px;
height:500px;
}

.wrapper a
{
position:absolute;
top:0px;
right:0px;
}
于 2012-01-10T22:19:01.793 に答える
1

これは、相対位置+絶対位置を使用した簡単な例です

http://jsfiddle.net/RZWCS/

また、リンクを絶対的に配置し、その画像をリンクの背景として使用することも考えられます（リンクのテキストは、画像に表示されるものと同じで、負のテキストインデントまたは同様の手法で外部に移動できます）

于 2012-01-10T22:24:11.433 に答える
0

私はここで間違っている可能性がありますが、CSSの背景にイベントをバインドできるとは思いません。個人的には透明なdivでカバーするか、実際の画像を使用してDOM要素のイベントを利用します。

誰かがこれを行う方法があれば私は興味があります:)

于 2012-01-10T22:21:51.857 に答える
0

<a>divを要素に変えるだけですか？

<a href="mysite.com" 
    style="display: block; 
    height:300px; 
    width:300px;
    border: 5px solid;
    background: url('http://cdn.survey.io/embed/1.0/right_top_blue.png') right top no-repeat;">
<a/>
于 2012-01-10T22:29:21.340 に答える