2016-06-28 4 views
0

CSSファイルでぼやけているHTMLページに画像があります。 JavaScriptコードを作成して画像をクリックすると、画像がぼやけることはありません。理想的には、CSSファイルを変更してイメージをぼやけさせるonClickイベントハンドラが必要です。画像のCSSプロパティを変更するJavaScript onClickメソッド

また、すでにぼやけてフィルタリングされている第2の画像を作成し、onClickが発生すると、画像のソースがぼかしのない画像に変更されています。しかし、これは面倒で、簡単な方法で作業したいと考えています。

さらに、JavaScriptは、特定の画像の各ページに画像を含めるのではなく、異なるページにある画像を含む多数のHTMLページで機能したいと考えています。

以前の方法のサンプルコード:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="javascript.js"></script> 
</head> 
<body> 

<div id="image"> 
    <img id="img" src="imgblur.jpg" height=300 width=300> 
</div> 
</body> 
</html> 

はJavaScript:

window.onload = init; 
function init() { 
var image = document.getElementById("img"); 
image.onclick = showAnswer; 
} 

function showAnswer() { 
var image = document.getElementById("img"); 
image.src = "img.jpg"; 
} 

希望のアプローチのためのコード:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="javascript.js"></script> 
</head> 
<body> 

<div id="image"> 
    <img id="img" src="img.jpg" height=300 width=300> 
</div> 
</body> 
</html> 

CSS:

img { 
filter: blur(5px); 
} 

のJavaScript:事前に

When image is clicked, the CSS is changed and blur filter is removed. 

感謝:)

+1

クラシックdownvote。私は確かにnoobsの質問に笑って、それらにdownvotesを与えるだけで、上のハイレベルのプログラマーのギャングがあります。 OPに問題があります。彼を埋葬する代わりに手伝ってもらえますか? – Alexandre

答えて

1

この

のようなものを試してみてくださいjQueryの

$('#img').click(function(){ 
    $(this).css({'filter':'blur(0px)'}) 
}); 
+0

ごめんなさい@ ObinnaNwakwue –

0

あなたはこのように、自分のイメージにのonClickメソッドを追加することができます:

... 
<img id="img" src="img.jpg" height=300 width=300 onClick="myFunction()"> 
... 

画像をクリックすると、関数myFunction()が呼び出され、そこで必要な処理を行います。

+0

あなたは2つのimgファイルを持っていますか? 1つはぼやけて、他はぼやけていない?その場合は、onClickメソッドで呼び出す関数のimgソースを変更することができます。 –

+0

あなたは私を得る場合、HTML要素の属性を使用するよりDOMにアクセスするのですか? – Chloe

+1

ええ、私は2枚の画像を持っています.1枚はぼやけて、1枚はぼやけていません。これまで私がやっていたことは、画像ソースを変更することでした(上記のコードを参照)。しかし、多くのHTMLページがあり、画像をたくさん作成して編集するのは面倒なので、画像を変更してJavaScriptを使用してフィルタを削除するクリックすると – Chloe

関連する問題