プロが教える店舗＆オフィスのセキュリティ対策術

詳しい人求む！

マウスを乗せたときだけ画像を不透明にするスクリプトを書きましたが、動作しません。

解決済

  • 質問者：break_time
  • 質問日時：
  • 回答数：2件

特にエラーが出ていないのですが、ケアレスミスが原因でしょうか？
下記にコードを貼ります。
よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!--
var alphaValue = 20;
funciton giveListener(my_elem, my_event, my_func, my_boolen){
if(my_elem.attachEvent){
my_elem.attachEvent("on" + my_event,my_func);
} else if(my_elem.addEventListener){
my_elem.addEventListener(my_event,my_func,my_boolen);
} else {
alert("お使いのブラウザは対応していません");
return false;
}
}
function onAlpha(e){
var target_node;
if(e.target){
target_node = e.target;
} else {
target_node = e.srcElement;
}
target_node.style.filter = "alpha(opacity=100)";
target_node.style.mozOpacity = 1；
target_node.style.opacity = 1;
}
function offAlpha(e){
var target_node;
if(e.target){
target_node = e.target
} else{
target_node = e.srcElement;
}
targrt_node.style.filter = "alpha(opacity=" +alphaValue + ")";
target_node.style.mozOpacity = alphaValue/100;
target_node.style.opacity = alphaValue/100;
}
function setLisners(e)
var dImages = document.getElementsByName("displayImg");
for(var i=0 ;i<dImages.length ; i++){
dImages[i].style.filter = "alpha(pacity" +alphaValue +")";
dImages[i].style.mozOpacity = alphaValue/100;
dImages[i].style.opacity =alphaValue/100;
giveListener,(dImages[i],"mouseover",onAlpha, false);
giveListener,(dImages[i],"mouseout",offAlpha, false);
}
}
giveListener(window,"load",setLisners, false);
//-->
</script>
<title>画像の不透明</title>
</head>
<body>
<img name="displayImg" src="images/fire001.png" width="250" />
<img name="displayImg" src="images/fire002.png" width="250" />
<img name="displayImg" src="images/fire003.png" width="250" /><br />
<img name="displayImg" src="images/fire004.png" width="250" />
<img name="displayImg" src="images/fire005.png" width="250" />
<img name="displayImg" src="images/fire006.png" width="250" /><br />
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#1です



少しだけ調べてみました。

ご提示のスクリプトの attachEvent、srcElement はIE対策だと思いますが、IE9以降は対応しているようなので、IE8以前のブラウザも考慮したいという意図なのでしょうか？
https://developer.mozilla.org/ja/docs/Web/API/Ev …
https://developer.mozilla.org/ja/docs/Web/API/Ev …

また、CSSの filter:alpha(opacity～ はIE、-moz-opacity はFxだと思いますが、それぞれIE9以降、Fx3.5以降ではopacity対応していますので、それ以前のブラウザを考慮している（？）という意味になりますが、現実的にどれだけ使われているのか疑問ですね。
（filterはIE10 で消滅、-moz-opacityはGecko13 からサポート中止のようです）
https://developer.mozilla.org/ja/docs/Web/CSS/op …

一方で、#1で提示したCSSのみによる方法ですが、:hoverがリンク要素以外にも適用されるようになったのは、Fx1.0、IE7.0以降ですので、「最近」とはいえ、現在のほとんどのブラウザで使用可能なはずと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/:h …


あと、書き忘れましたが、
＞特にエラーが出ていないのですが、～
スペルミスなので、エラー出まくりです。
デバッグ方法を再考なさったほうが宜しいように思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

はい、以下のツールで再考してみます。
ありがとうございました。
文章校正ツール
http://www.kiji-check.com/
https://enno.jp/
https://so-zou.jp/web-app/text/proofreading/
http://akind.dee.cc/kanjiritsuchk-input.html
色を見分けるツール
https://lab.syncer.jp/Tool/Image-Color-Picker/
フォント判別ツール
http://coliss.com/articles/build-websites/operat …
http://www.identifont.jp/index.html
https://saruwakakun.com/font-family
HTML CSS JavaScriptチェックツール
https://www.10bestdesign.com/dirtymarkup/
https://ferret-plus.com/2920

通報する
お礼日時：2018/02/06 19:24

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



記述方法がかなり古い感じですが、相当に古いブラウザまでを対象としているのでしょうか？


＞特にエラーが出ていないのですが、ケアレスミスが原因でしょうか？
タイポがあちこちにあるようです。
（全体が短いので、以下位置は特定しませんが…）
　funciton　→ function
　targrt_node →　target_node
　"alpha(pacity" → "alpha(opacity"
　giveListener,(dImages[i] → giveListener(dImages[i]
などなどを修正すれば、一応動作すると思います。


一方で、最近のブラウザ対象でよければ、CSSで
<style type="text/css">
img[name="displayImg"] { opacity: 0.2; }
img[name="displayImg"]:hover { opacity: 1; }
</style>
のような設定をすれば、同様の効果が得られると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
長い分になると誤字とかがどうしても出てしまいますね。
最近のブラウザまで紹介して頂きありがとうございます。

通報する
お礼日時：2017/11/20 17:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報