回答編集履歴
6
テキスト修正
answer
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
- 上記で使用している画像ファイル`Octocat.png`はGitHubのキャラクターのOctocatの画像で、[Alpha-Imageのサイト](http://sly777.github.io/Jquery-Alpha-Image/) でもサンプルで使用されているものです。[GitHub Logos and Usage](https://github.com/logos) の `Download Octocat` のリンクからダウンロードできます。
|
|
50
50
|
|
|
51
|
-
- 画像は `img/`, JQuery と alphaimage は、`js/` フォルダの中に置
|
|
51
|
+
- 画像は `img/`, JQuery と alphaimage は、`js/` フォルダの中に置いています。
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
上記のHTMLを表示すると、初期表示では `<div>` の中は何も表示されませんが、`<div>` の中にマウスカーソルを移動させると、Octocat の画像から顔の肌色を抜いた画像が表示され、マウスが `<div>` から外れると画像表示が消えます。
|
5
テキスト修正
answer
CHANGED
|
@@ -46,9 +46,11 @@
|
|
|
46
46
|
</html>
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
-
上記で使用している画像ファイル`Octocat.png`はGitHubのキャラクターのOctocatの画像で、[Alpha-Imageのサイト](http://sly777.github.io/Jquery-Alpha-Image/) でもサンプルで使用されているものです。[GitHub Logos and Usage](https://github.com/logos) の `Download Octocat` のリンクからダウンロードできます。
|
|
49
|
+
- 上記で使用している画像ファイル`Octocat.png`はGitHubのキャラクターのOctocatの画像で、[Alpha-Imageのサイト](http://sly777.github.io/Jquery-Alpha-Image/) でもサンプルで使用されているものです。[GitHub Logos and Usage](https://github.com/logos) の `Download Octocat` のリンクからダウンロードできます。
|
|
50
50
|
|
|
51
|
+
- 画像は `img/`, JQuery と alphaimage は、`js/` フォルダの中に置きます。
|
|
51
52
|
|
|
53
|
+
|
|
52
54
|
上記のHTMLを表示すると、初期表示では `<div>` の中は何も表示されませんが、`<div>` の中にマウスカーソルを移動させると、Octocat の画像から顔の肌色を抜いた画像が表示され、マウスが `<div>` から外れると画像表示が消えます。
|
|
53
55
|
|
|
54
56
|
ですが、このままだとご質問の状況と同じように、マウスが `<div>` に入ったときに一瞬、肌色が抜ける前の画像が見えるときがあります。
|
4
テキスト修正
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
以下にて、多少は改善されるのではと思われる修正をサンプルにて回答します。
|
|
4
4
|
|
|
5
|
-
以下のようなHTMLを作成します。
|
|
5
|
+
改善前のものとして、以下のようなHTMLを作成します。
|
|
6
6
|
|
|
7
7
|
```html
|
|
8
8
|
<!DOCTYPE html>
|
3
テキスト修正
answer
CHANGED
|
@@ -125,4 +125,10 @@
|
|
|
125
125
|
|
|
126
126
|
### 補足
|
|
127
127
|
|
|
128
|
-
CSSクラス`.hidden` を追加しているのは、`<img>` の src属性が無い状態のときに、ブラウザのデフォルトの動作で、何らかの無効な画像を示す×印のようなものが表示されないようにすることを意図したもので、この回答の本筋にはあまり関係のない、補助的なものです。
|
|
128
|
+
CSSクラス`.hidden` を追加しているのは、`<img>` の src属性が無い状態のときに、ブラウザのデフォルトの動作で、何らかの無効な画像を示す×印のようなものが表示されないようにすることを意図したもので、この回答の本筋にはあまり関係のない、補助的なものです。
|
|
129
|
+
|
|
130
|
+
この回答で、最も重要な主旨は、
|
|
131
|
+
|
|
132
|
+
- `onlyData` を true にしたうえで、`onComplete` オプションを上手く使いましょう。
|
|
133
|
+
|
|
134
|
+
という点になるかと思います。
|
2
テキスト修正
answer
CHANGED
|
@@ -120,4 +120,9 @@
|
|
|
120
120
|
|
|
121
121
|
改良版の方で動作確認しましたが、私の手元では、マウスが乗ったときに、一瞬肌色が見えることはなくなりました。
|
|
122
122
|
|
|
123
|
-
以上参考になれば幸いです。
|
|
123
|
+
以上参考になれば幸いです。
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
### 補足
|
|
127
|
+
|
|
128
|
+
CSSクラス`.hidden` を追加しているのは、`<img>` の src属性が無い状態のときに、ブラウザのデフォルトの動作で、何らかの無効な画像を示す×印のようなものが表示されないようにすることを意図したもので、この回答の本筋にはあまり関係のない、補助的なものです。
|
1
テキスト修正
answer
CHANGED
|
@@ -69,6 +69,7 @@
|
|
|
69
69
|
const img = $('img');
|
|
70
70
|
|
|
71
71
|
img.on('load', function() {
|
|
72
|
+
if (img.attr('src') !== 'img/Octocat.png') return;
|
|
72
73
|
img.alphaimage({
|
|
73
74
|
colour: "#f4cab1",
|
|
74
75
|
onlyData: true,
|