以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooトップへリンクするjavascriptです。
はじめて作ったタグなので無駄なところを教えてください
また、同じウィンドウで開くにはどこをいじったらよいですか?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>web page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ja">
<script type="text/javascript">
function change(){
document.getElementById("pic").src="2.jpg";
window.open("http://www.goo.ne.jp/");}
</script></head>
<body>
<a href="javascript:change();"><img id="pic" src="1.jpg" alt="gooへリンク"></a>
</body></html>
No.1ベストアンサー
- 回答日時:
たったこれだけの物でしかも、HTML 4.01 Transitionaなのに
Another HTML-int
http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
にかけると、67点で普通だそうです。
<meta http-equiv="Content-Script-Type" content="text/javascript">
を追加して、
javascriptを
<!--
// -->
でくくっておくか外部ファイルにすると
100点「よくできました」
になります。
余計なお世話かも..
同じウィンドウで開くには
window.open("http://www.goo.ne.jp/");}
をlocation.href="http://www.goo.ne.jp/";
にするとか、他にもあるけどとりあえず。
No.6
- 回答日時:
#3です。
ちょっと間違いがあったので、修正しておきます。
----------
<script type="text/javascript">
//<![CDATA[
document./*@cc_on @if(@_jscript_version <= 5.8)attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (event) {
var img = event.target || event.srcElement;
// console.log(img);
if(img.id !== 'Pic'){ return false; }
img.src = 'after.gif';
},false);
//]]>
</script>
</head>
<body>
<p><a href="http://www.goo.ne.jp/" target="_blank"><img id="Pic" src="before.gif" alt="gooへリンク"></a></p>
----------
> Transitionalは止めてStrictにした方がいろいろと面倒が少ない
ちょっと言葉足らずだったので補足を。
TransitionalとStrictではIEで扱うデフォルトスタイルシートに違いがあって、Strictの方が何かと楽だよ、ってことです。
勿論、適切にCSSを指定すれば回避できる問題なのですが、「無駄を省く」なら「無駄な労力も省きたい」かと思いまして…。
No.5
- 回答日時:
No.1回答者です。
strict か trasitional のどちらを選ぶかは悩ましい。
本来は、「strict にしてstrictの規則どうりに書くべき」
なのは解ります。でもstrict宣言して、規則破ってるぐらいなら、
trasitionalのままにしといたほうがよいのやら
それだと、むきだしのインライン要素も許されるし...
そもそも、厳格なブラウザーなんて、だれも欲してないし、
携帯もPDAもiなんとかも買うお金ないし....
No.4
- 回答日時:
#2です。
ていせいします。<a></a>を、はぶくのは、まずいとしてきをうけました。なので、いっそうのこと、いかのようにしてみてはどうかと・・。
それと、いんらいんようそが、むきだしでもよいそうです。
<style type="text/css">
a > img { border:none; }
a:hover { background: url(./img/0.gif) no-repeat }
a:hover > img { visibility: hidden; }
</style>
<a href="http://oshiete.goo.ne.jp/qa/5906659.html">
<img src="./img/1.gif" alt="教えてgooへ">
</a>
No.3
- 回答日時:
JavaScriptを使わなくて済むところは使わない方が訪問者に優しいので、以下のような形とか。
(全角空白は半角空白にしてください)----------
<script type="text/javascript">
//<![CDATA[
document./*@cc_on @if(@_jscript<=5.8) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (event) {
var img = event.target || event.srcElement;
// console.log(img);
if(img.id !== 'Pic'){ return false; }
img.src = 'after.gif';
},false);
//]]>
</script>
</head>
<body>
<p><a href="http://www.goo.ne.jp/" target="_blank"><img id="Pic" src="before.gif" alt="gooへリンク"></a></p>
----------
質問者さんのコードだとJavaScriptを無効にしているときにはリンク先に飛ばないわけですよね。
それはよろしくない、とされています。(私もそう思います)
JavaScriptを有効にしても無効にしても同じように機能にアクセスできるのが望ましい。
JavaScriptは標準と比べて、ちょっぴり便利な機能を追加するだけです。
[デモ]DOM Scripting 標準ガイドブック Chapter5|factory.yusukenakanishi.com
http://factory.yusukenakanishi.com/javascript/pr …
あと、これは無駄じゃないですが、Transitionalは止めてStrictにした方がいろいろと面倒が少ないと思います。
Strictにするなら、target="_blank" は使えないわけですが、
そこで window.open で代替すると「リンクを開くときの挙動は訪問者に選ばせるべき」って概念と相反するので通常のリンクに留めることになります。
質問された例では「クリックされたときに画像が変わる処理」だけを残す事になりますね。
No.2
- 回答日時:
むだというか、しょうりゃくできるものがあるじょ。
<html>とか
<head>とか
</head>とか
</body>とか
</html>とか
window.open の window とか
<a></a>たぐを、はぶいて
<img id="pic" src="1.jpg" alt="gooへリンク" onclick="change()">にするとか
なにより、
いんらいんようそがむきだしなので、ぶろっくようそでかこまねば。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
外部javascriptの重複を防ぐには
-
nodejsの画像表示は特別なこと...
-
【OpenCV】二値画像後、白の部...
-
こんにちは、javascriptにてボ...
-
かぶらないランダム画像
-
画像処理 C言語 元画像の幅...
-
JavaScriptで変更した属性の元...
-
CSSで画像を均等に横並びに配置...
-
MFCで画像を表示させているので...
-
jqueryのスライドショー。html...
-
IplImageをPictureBoxへ表示が...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
jqueryのsortableで一部ソート...
-
c++std::string型をTCHARに変換...
-
jspでcssが読み込めない
-
javascriptテキストBOX色を元に...
-
JavaScriptで、?マークとコロ...
-
画像ランダム表示、しかしダブ...
-
変数名をどのようにつけるのが...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
Vb.net2005での画像の合成方法
-
error LNK2019 未解決のシンボ...
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
【OpenCV】二値画像後、白の部...
-
(javascript)HTMLで指定した...
-
jQuery 複数のfind()
-
外部javascriptの重複を防ぐには
-
ラズパイでno module named zbar
-
条件分岐でキーが入力されてい...
-
かぶらないランダム画像
-
OpenCV での画素値の比較について
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
imgボタンにfocusの当て方
-
OpenCVでサンプルコードを使う...
-
指定したフォルダの画像を一括...
おすすめ情報