特にエラーが出ていないのですが、ケアレスミスが原因でしょうか?
下記にコードを貼ります。
よろしくお願いします。
<!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>
No.2ベストアンサー
- 回答日時:
#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 …
あと、書き忘れましたが、
>特にエラーが出ていないのですが、~
スペルミスなので、エラー出まくりです。
デバッグ方法を再考なさったほうが宜しいように思います。
はい、以下のツールで再考してみます。
ありがとうございました。
文章校正ツール
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
No.1
- 回答日時:
こんにちは
記述方法がかなり古い感じですが、相当に古いブラウザまでを対象としているのでしょうか?
>特にエラーが出ていないのですが、ケアレスミスが原因でしょうか?
タイポがあちこちにあるようです。
(全体が短いので、以下位置は特定しませんが…)
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>
のような設定をすれば、同様の効果が得られると思います。
ありがとうございます。
長い分になると誤字とかがどうしても出てしまいますね。
最近のブラウザまで紹介して頂きありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javaにて画像を残像が残りつつ...
-
一定時間ごとにgif画像の切...
-
オンマウスで画像と文字を同時...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
文字と数字が混在する要素のsor...
-
離れた場所にマウスオーバーで...
-
ホームページビルダー15 メニュ...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
-
オンマウス時に別画像を上に重...
-
javascriptでのパスについて
-
文字をクリックしたら別の文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
【jQuery】複数の画像の読み込...
-
複数のバナーをリロードする度...
-
jQueryで画像を重ねる
-
一定時間ごとにgif画像の切...
-
画像をクリックすると別ウイン...
-
JavaScriptで画面サイズによっ...
-
HTMLページ内のタグに対しての...
-
【javascript】ロールオーバー...
-
HPに複数の画像をクリックで切...
-
連続したURLへのwindow.openの...
-
リンク切の場合リンクしない
-
画像と文字を同時に切り替えたい
-
JavaScriptで画像置換えてクリ...
-
画像の入れ替え
-
javascriptによるランダム画像...
-
<img>タグの alt= の値をキャプ...
-
outlook2010の不具合で困ってい...
-
複数のボールの落下、バウンド...
おすすめ情報