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

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

 ブラウザが
 IE、Safari、Opera 
 の場合、以下に示します≪JavaScript命令文≫の内容を管理サイトのHTML(ブログの場合はテンプレートのHTML)に書き込むことで、マウスポインタスタンドが表示可能になります。
 (※ただしIEは6、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マウスポインタスタンド用---->
<script type="text/javascript">
<!--
function imgcursor()
{
 document.all["mouseimg"].style.left=document.body.scrollLeft+event.x+10;
 document.all["mouseimg"].style.top=document.body.scrollTop+event.y+10;
}
document.onmousemove = imgcursor;
-->
</script>
<!----Javascriptマウスポインタスタンド用---->



 を、

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


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



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


 <!----Javascriptマウスポインタスタンド用---->
 および
 <!----Javascriptマウスポインタスタンドbody用---->
 は、単なる目印とするための『コメント』で、省略可能です



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



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

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


 マウスポインタ傍に画像を表示させる命令文ですが、
 HTML4.01の場合、
 DOCTYPEが 『互換モード』 でなければ、画像がスクロールについてきてくれない 
 という不具合が起きることが、一部のブラウザで確認されています。
 これを解決するには、「互換モード」へ変更する必要があります。
 (※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でも、一部のブラウザでこの命令文では画像が スクロールについてきてくれない ことが確認されています。
 スクロールをしても画像を追わせたい場合、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『互換モード』にダウングレードさせますと、
 文字サイズ等、タグによる命令表示が一部変化することが確認されています。
 『互換モード』に変更した場合、管理サイトの表示をご確認ください。




○● スクリプトの外部ファイル化 ●○


 XHTMLでも一部のブラウザでは画像は動きます。
 その場合、<!-- ~ --> は、すべてコメントとしてムシされる可能性があり、外部ファイル化が奨励されていますが、
 今回の命令文はブラウザによっては無効になり、あまりおススメできません。
 (ブラウザとHTMLバージョンに対する命令文効果については、下にまとめてあります。ご参照ください。)

 スクリプトを外部ファイルにするには

function
 ~  
;


 を .js ファイルとして別に用意(テキストファイルを作り、.txt の拡張子を .js に変更するなど)、
 サーバーにアップロードした上で

<script type="text/javascript" src="http://ここにファイル.jsのURL"></script>

 と、命令文を書き換えます。




○● 参考~Scriptの説明 ●○

<script type="text/javascript">   ・・・JavaScriptの定義

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

function imgcursor()  ・・・『function』 は関数の定義です。 『imgcursor』 部分は予約語(あらかじめ定義されてる言葉)以外なら別名でもOKです。

{ ・・function 内容開始

 document.all["mouseimg"].style.left=document.body.scrollLeft+event.x+10;
  ↑"mouseimg" の横方向の位置 = スクロール分+マウスx座標+10ピクセル
  event.x でマウスx座標の取得です。  "mouseimg"の名前、"10" の数字は変更可能

 document.all["mouseimg"].style.top=document.body.scrollTop+event.y+10;
 ↑"mouseimg" の縦方向の位置 = スクロール分+マウスy座標+10ピクセル
 event.y でマウスy座標の取得です。 "mouseimg"の名前、"10" の数字は変更可能

} ・・function 内容終了

document.onmousemove = imgcursor; ・・・マウスが動いたら(onmousemove) 、imgcursor を実行せよ の部分

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

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



 『標準モード』では、 scrollLeft、scrollTop の座標を取得できないためスクロールについてこないようです。
 『Firefox』では x,yの座標を取る event.x event.y  の命令文が無効であり、
 Firefoxで開くと、ブラウザ画面左上に画像が表示されたまま動きません。





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

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

≪HTML4.01 TransitionalDTD 互換モード 外部ファイル使用≫ ←コレが一番おススメ!
 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/1 最終更新


HOME

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

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