アプリ版：「スタンプのみでお礼する」機能のリリースについて

以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooト

解決済

  • 質問者：pokemontoka
  • 質問日時：
  • 回答数：6件

以下のタグはクリックすると画像が切り替わり、新しいウィンドウで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>

通報する

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

質問の本文を隠す

A 回答 (6件)

No.1ベストアンサー

  • 回答者： yyr446
  • 回答日時：

たったこれだけの物でしかも、HTML 4.01 Transitionaなのに


Another HTML-int
http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
にかけると、６７点で普通だそうです。
<meta http-equiv="Content-Script-Type" content="text/javascript">
を追加して、
javascriptを
<!--
// -->
でくくっておくか外部ファイルにすると
１００点「よくできました」
になります。
余計なお世話かも．．
同じウィンドウで開くには
window.open("http://www.goo.ne.jp/");}
をlocation.href="http://www.goo.ne.jp/";
にするとか、他にもあるけどとりあえず。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： think49
  • 回答日時：

#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を指定すれば回避できる問題なのですが、「無駄を省く」なら「無駄な労力も省きたい」かと思いまして…。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： yyr446
  • 回答日時：

No.1回答者です。


strict か trasitional のどちらを選ぶかは悩ましい。
本来は、「strict にしてstrictの規則どうりに書くべき」
なのは解ります。でもstrict宣言して、規則破ってるぐらいなら、
trasitionalのままにしといたほうがよいのやら
それだと、むきだしのインライン要素も許されるし．．．

そもそも、厳格なブラウザーなんて、だれも欲してないし、
携帯もPDAもiなんとかも買うお金ないし．．．．
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： babu_baboo
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： think49
  • 回答日時：

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 で代替すると「リンクを開くときの挙動は訪問者に選ばせるべき」って概念と相反するので通常のリンクに留めることになります。
質問された例では「クリックされたときに画像が変わる処理」だけを残す事になりますね。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： babu_baboo
  • 回答日時：

むだというか、しょうりゃくできるものがあるじょ。


<html>とか
<head>とか
</head>とか
</body>とか
</html>とか

window.open の window とか

<a></a>たぐを、はぶいて
<img id="pic" src="1.jpg" alt="gooへリンク" onclick="change()">にするとか

なにより、
いんらいんようそがむきだしなので、ぶろっくようそでかこまねば。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

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

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

おすすめ情報