どのように背景画像を作るためにクリッカブル（javascriptやCSS）

Question

背景画像クリッカブルを作るためにどのようにこのfiddle

見てみてください？ "Take the survey"をクリックすると、新しいページに移動します。

<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がすべて優先されます。

編集：右端にイメージ浮きを使用したくありません。詳細はこちら

Answer 1

を行う方法を持っていた場合、私は興味があります。

ユーザーがスタイルをオフにしている、またはスクリーンリーダーを使用している場合はどうなりますか？彼らも調査に参加できるはずです。あなたも（絶対位置へのリンクを考えると、リンクの背景として、そのイメージを使用することができますのテキストを相対位置+絶対

http://jsfiddle.net/RZWCS/

を使った簡単な例です

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;} 

Demo

Answer 2

チェック：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; 
} 

Answer 3

私はここで間違っているかもしれないが、私はCSSの背景には、それらにバインドされたイベントを持つことができるとは思いません。私は個人的に透明なdivでそれをカバーするか、またはDOM要素のイベントにタップするために実際の画像を使用します。

誰かがあなたはいけない、この:)

Answer 4

そのリンクは画像上に現れる同じものであってもよく、ネガティブテキストインデント（text-indent）または同様の技術を用いて外部に移動されてもよい）

Answer 5

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

<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/>