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