- ベストアンサー
以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooト
- 以下のタグを使えばクリックすると画像が切り替わり、新しいウィンドウでgooトップへリンクすることができます。
- ウェブページ内で画像の切り替えやリンクを作る際に便利なタグを紹介します。
- タグの設定方法について詳しく教えてください。
- pokemontoka
- お礼率61% (34/55)
- JavaScript
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
たったこれだけの物でしかも、HTML 4.01 Transitionaなのに Another HTML-int http://openlab.ring.gr.jp/k16/htmllint/htmllint.html にかけると、６７点で普通だそうです。 <meta http-equiv="Content-Script-Type" content="text/javascript"> を追加して、 javascriptを <!-- // --> でくくっておくか外部ファイルにすると １００点「よくできました」 になります。 余計なお世話かも．． 同じウィンドウで開くには window.open("http://www.goo.ne.jp/");} をlocation.href="http://www.goo.ne.jp/"; にするとか、他にもあるけどとりあえず。
その他の回答 (5)
- think49
- ベストアンサー率59% (285/482)
#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を指定すれば回避できる問題なのですが、「無駄を省く」なら「無駄な労力も省きたい」かと思いまして…。
- yyr446
- ベストアンサー率65% (870/1330)
No.1回答者です。 strict か trasitional のどちらを選ぶかは悩ましい。 本来は、「strict にしてstrictの規則どうりに書くべき」 なのは解ります。でもstrict宣言して、規則破ってるぐらいなら、 trasitionalのままにしといたほうがよいのやら それだと、むきだしのインライン要素も許されるし．．． そもそも、厳格なブラウザーなんて、だれも欲してないし、 携帯もPDAもiなんとかも買うお金ないし．．．．
- babu_baboo
- ベストアンサー率51% (268/525)
#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://okwave.jp/qa/q5906659.html"> <img src="./img/1.gif" alt="教えてgooへ"> </a>
- think49
- ベストアンサー率59% (285/482)
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/practice/dom-scripting/005/ あと、これは無駄じゃないですが、Transitionalは止めてStrictにした方がいろいろと面倒が少ないと思います。 Strictにするなら、target="_blank" は使えないわけですが、 そこで window.open で代替すると「リンクを開くときの挙動は訪問者に選ばせるべき」って概念と相反するので通常のリンクに留めることになります。 質問された例では「クリックされたときに画像が変わる処理」だけを残す事になりますね。
- babu_baboo
- ベストアンサー率51% (268/525)
むだというか、しょうりゃくできるものがあるじょ。 <html>とか <head>とか </head>とか </body>とか </html>とか window.open の window とか <a></a>たぐを、はぶいて <img id="pic" src="1.jpg" alt="gooへリンク" onclick="change()">にするとか なにより、 いんらいんようそがむきだしなので、ぶろっくようそでかこまねば。
