winxpで作ったＨＰがwin8では動作が違ってし

解決済

質問者：ma-dfqf
質問日時：2013/07/25 01:24
回答数：4件

3種類の画像をイベント属性で切り替わるようにして、最後マウスのボタンを押したときにリンクして他のぺーじに移動するように作りました。作った時のwinXPでは上手く動作したのですが、win8では画像の外枠四方にポインターを乗せた時と、同じ外枠をクリックした時に画像が変わるようになります。画像の中央にポインターを移動させると最初の画像になってしまい、クリックするとリンクして指定したページに移動します。参考になるか分かりませんがコードを載せておきますのでよろしくお願いします。

<div class="button1">
<img src="gazou/button/information1.gif" alt="情報" onmouseover="this.src='gazou/button/information2.gif'"
onmouseout="this.src='gazou/button/information1.gif'" onmousedown="this.src='gazou/button/information3.gif'" usemap="#buttonmap1">
<map id="buttonmap1">
<area href="information-w.html" alt="情報" shape="rect" coords="3,3,121,121">
</map>
</div>

ちなみに usemap="#buttonmap1"の＃を外すと３種類のイベント属性はちゃんと画像の中央で動作しますが、マウスをクリックしてもリンク先に移動はしませんでした。

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2013/07/25 17:52

＞せっかく説明していただいたjavascriptのことも分かりません。

　理解しようとしない限り永遠に分かりません。
　googleは、javascriptを使用しなくてもクロールできるようHTMLを書けといっているのです。
『JavaScript、・・・【中略】・・・などの特殊な機能が使用されているために・・・【中略】・・・検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。』
　分かりませんか？？？？

　私のサンプルは、問題のあるjavascritを使っていません。
　単純にHTML+CSSですから、そのままコピーペーストして、＿をタブに、http：をhttp:に置換すれば、IE7以上なら、どのブラウザでも動作するはずです。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
★Another HTML-lint 5でチェックしてみたところエラーがたくさんありました。とても分かりやすいサイトのようなので問題も解決できるようなきがします。好いサイトを紹介していただきありがとうございました。

通報する

お礼日時：2013/07/26 18:03

No.3

回答者： play_with_you
回答日時：2013/07/25 10:56

OSじゃなくブラウザの問題なので、そっちの方向性で調べなおすべし。

…もちろん自分で検索とかはしてますよね…？？

- 0
- 件

通報する

この回答へのお礼

返信遅くなってすいません。
ブラウザはXPではIE8でWIN8ではIE10です。
検索して分かったのはIE10は以前のバージョンで作ったＨＰをアップすると上手く表示できないことがあるということでした。IE8に戻せば上手く表示できるのかも知れませんが、ほとんど知識がないのであまり高度な作業をすることにちょっと気後れしています。

通報する

お礼日時：2013/07/25 12:06

No.2

回答者： ORUKA1951
回答日時：2013/07/25 10:25

他のブラウザでは？？

firefox,opera,chromeでは？？。
理由は、たぶん単純でHTMLが互換モードで動作している。
<互換モード>
　スタイルシートの解釈がウェブ標準でない古いIE(6以前)対象に作成されたページを閲覧するためのモード。

　使われているHTMLの仕様が分かりませんが
HTML4.01strictでしたら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01transitinalでしたら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
のようにすると、古いIEでも標準モードで動作します。
　ボックスのサイズの解釈に違いがあります。

　正しい動作は、firefox,Chrome,IE10の動作です。

　javascriptだと、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Lynx などのテキストブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキストブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン - ウェブマスターツールヘルプ( https://support.google.com/webmasters/answer/357 … )］より
　という重大な欠陥があるので、単純にナビゲーションをスタイルシートでデザインしたほうが良いでしょう。

HTML
<p id="goInfo"><a href="information-w.html">情報</a></p>
でね。
画像のデザインが分かりませんが、文意から上下左右に3pxずつ枠がある画像だと思われるので、スタイルシートを含むものは・・
★HTML4.01strict + CSS2.1
　のウェブ標準です。文字コードShift_JIS
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　のDATA入力でチェック済み
★タブは＿に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p id="goInfo"><a href="information-w.html">情報</a></p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
ブラウザはXPではIE8で、WIN8ではIE10です。HTMLの仕様はHTML5です。XPでもWIN8でも同じものを確認したのですが、WIN8では表示が上手くできませんでした。何しろ知識が素人のようなものでせっかく説明していただいたjavascriptのことも分かりません。
このHPを作ったとき最初はHTML4.01strict + CSS2.1のウェブ標準です。文字コードはUTF_8でした。
以前のHPの仕様
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

　新しいHPの仕様
HTML5でスタイルシートは以前と同じです。文字コードもUTF_8です。
<!DOCTYPE html>
<HTML lang="ja">　

確認した結果XPのIE8ではどちらも上手く表示されましたが、WIN8のIE10ではどちらもcoords属性で指定した座標の枠の部分にポイントターを合わせた時しか画像は切り替わりませんでした。
丁寧な回答ありがとうございました。

ちなみに以前の仕様で作ったHPを見ていただけれはトップページに問題の画像が載っています。
http://www.maroon.dti.ne.jp/tubugainokimo.com

通報する

お礼日時：2013/07/25 16:51

No.1

回答者： goold-man
回答日時：2013/07/25 05:29

XPはブラウザIE6です（v7かv8にアップしているかも知れないけど）Windows 8のブラウザIE10です。

バージョンが変われば動作しない部分もあるでしょう。
XPのアプリケーションがWindows 8で動作しない場合もあります。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
XPではIE8にバージョンアップしていました。
画像はアドビのイラストレータCS3を使って描いたものです。確かにWIN8ではCS3は動作しないと言うことなのでそのせいかもしれません。WIN8ではCS6を使おうと思っているので確認してみます。
インストールしたばかりなのでまた時間がかかるかもしれませんが、やってみます。
ありがとうございました。

通報する

お礼日時：2013/07/25 17:24

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