忍者ブログ
≪現在のマウスポインタスタンド
GIFアニメ大好きホムペ
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

 ブラウザが
 Firefox、Safari、Opera 
 の場合、以下に示します≪JavaScript命令文≫の内容を管理サイトのHTML(ブログの場合はテンプレートのHTML)に書き込むことで、マウスポインタスタンドが表示可能になります。 IEでは表示されません
 (※ただしFirefoxは3、Safariは3以上、Operaは9.21でのみの確認になります。不具合などありましたらご報告いただけると幸いです。)


**HTMLに書き込む際のご注意**
万が一に備え、元のHTMLファイルのバックアップをご用意ください 
命令文を書き込む際に、他タグの命令文を消去してしまう などの誤作業で、文書が正しく表示されなくなることが考えられます。
****************



≪JavaScript命令文≫

 HTML を開くと

 <!DOCTYPE ~>

 というものが、一番上にあるかと思います。
 その次に<html> 、
 <head>~</head><body>~</body>
 でhtml終了を示す</html>
 となってます。

--------------------------------------------
<!DOCTYPE 宣言or宣言無し>
  <html>
    <head>
      ~文書に関する情報~
    </head>
    <body>
      ~ブラウザに実際に表示される内容~
    </body>
  </html>
---------------------------------------------
 この、
 <head>~</head>  の間のどこかに


<!----JavascriptマウスポインタスタンドFirefox用---->
<style type="text/css">
<!--
#msxy{position:absolute;top:0px;left:0px;}
-->
</style>
<script Language="Javascript">
<!--
function imgcursorforfire(evt)
{
 X=evt.pageX;
 Y=evt.pageY;
 obj=document.getElementById("msxy");
 obj.style.left=X+10;
 obj.style.top=Y+10;
}
window.onmousemove=imgcursorforfire;
-->
</script>
<!----JavascriptマウスポインタスタンドFirefox用---->



 を、

 <body>~</body>の間のどこかに


<!----Javascriptマウスポインタスタンドbody用---->
<div id="msxy"><img src="http://ここに画像.gifのURL" /></div>
<!----Javascriptマウスポインタスタンドbody用---->



 を
 それぞれ書き加えてください。
 命令文はこれで終わりです。



 ここからは、これまでに確認されている不具合と解決法です。
 ↓



○● HTMLバージョンと不具合について ●○

 
<!DOCTYPE~>
 HTMLには、 HTML3.2   HTML4.01  XHTML1.0  XHTML1.1 などのバージョンがあり、
 <!DOCTYE~>は、このHTML文書が、どのバージョンの決まりに従って書かれているのかを示しています。


 マウスポインタ傍に画像を表示させる命令文ですが、
 HTML4.01の場合、
 DOCTYPEが 『互換モード』 でなければ、命令文が無効になる 
 という不具合が起きることが確認されています。(Operaでは有効、Safariでも無効)
 これを解決するには、「互換モード」へ変更する必要があります。
 (※HTML4.01以上には『互換モード』と『標準モード』があります。DOCTYPE宣言がない場合およびHTML3.2 では自動的に互換モードになります)
 (※ブラウザとHTMLバージョンに対する命令文効果については下にまとめてあります。ご参照ください。)


○● HTML4.01を互換モードにする方法 ●○

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

--------------------------------------

 の、 "http://www.w3.org/TR/html4/loose.dtd"  を 省略 することで 『標準モード』 から『互換モード』 にすることができます。



○● XHTML→HTML4.01へのダウングレードの方法 ●○


 XHTMLでは、Firefoxで この命令文が無効になる ことが確認されています。
 直接書き込みでOperaのみで有効でしたが、js.ファイルとして外部読み込みするとOperaでも命令文が無効になることも確認されました。(外部ファイル化については、『IE、Safari、Opera 用』にて)
 XHTMLの場合、HTML4.01互換モードへ ダウングレード させる必要があります。
 (※ブラウザとHTMLバージョンに対する命令文効果については下にまとめてあります。ご参照ください。)

------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">


  ↓

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">


-------------------------------------------------------------------

 XHTMLからHTML4.01『互換モード』にダウングレードさせますと、
 文字サイズ等、タグによる命令表示が一部変化することが確認されています。
 『互換モード』に変更した場合、管理サイトの表示をご確認ください。




○● 参考~Scriptの説明 ●○

<script Language="Javascript">   ・・・JavaScriptの定義

<!--   ・・・JavaScriptが実行されなかった場合、ただのコメントとして無視してもらうための安全策

function imgcursorforfire(evt)   ・・・『function』 は関数の定義です。 『imgcursorforfire』 部分は予約語(あらかじめ定義されてる言葉)以外なら別名でもOKです。 evt はマウスイベントへの引数です。

{    ・・function 内容開始 

 X=evt.pageX;  ・・・マウスポインタ位置を取得

 Y=evt.pageY;  ・・・マウスポインタ位置を取得

 obj=document.getElementById("msxy"); 
 obj.style.left=X+10;  
 obj.style.top=Y+10;

 文字の表示位置はdocument.getElementByld('オブジェクト')style.left または top で設定
 +10 は変更可能です

}   ・・function 内容終了

window.onmousemove=imgcursorforfire;  ・・・マウスが動いたら、imfcursorforfire を実行せよ の部分

-->   ・・・JavaScriptが実行されなかった場合、ただのコメントとして無視してもらうための安全策終わり

</script>  ・・・JavaScriptの定義終わり

 InternetExplorerでは x,yの座標を取る Pagex Page.y  の命令文が無効であるため、
 InternetExplorerで開くと、ブラウザ画面左上に画像が表示されたまま動きません。





○● ブラウザとHTMLバージョンに対する命令文の効果 ●○

 有効=○ スクロールについてこない=△ 無効=×

≪HTML4.01 TransitionalDTD 互換モード (外部ファイル(jsファイル)使用)≫
 ↑コレが一番おススメ!
 IE6      ×
 Firefox  ○
 Opera   ○
 Safari  ○

≪HTML4.01 TransitionalDTD 互換モード (外部ファイル使用)≫
 IE6       ×
 Firefox   ×
 Opera    ×
 Safari   ×

≪HTML4.01 TransitionalDTD 標準モード  (外部ファイル使用)≫
 IE6      ×
 Firefox  ×
 Opera   ○
 Safari  ×

≪XHTML1.0 TransitionalDTD (外部ファイル使用)≫
 IE6   ×
 Firefox ×
 Opera ○
 Safari  ×

≪XHTML1.0 TransitionalDTD (外部ファイル使用)≫
 IE6   ×
 Firefox ×
 Opera ○
 Safari  ×


管理サイトにマウスポインタスタンドを表示させる方法
 



2009/6/3 最終更新


HOME

 
PR
【絵話】
かたつむりとなめくじのおはなし
 第一話 であい
 第二話 たまのり

ブログ内検索
リンク
link2.gif
Copyright© -- oto-oto_xx -GIFアニメ- --  All Rights Reserved
Designed by oto-oto / Powered by [PR]
/ CM忍者ブログ