人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

XSLでjavascriptを使ってマウスストーカーを実現したいのですが、上手くいきません。

HTMLのマウスストーカーのソースをXSLにコピペしたのですが、
マウス座標を取得することは可能なのですが、
マウスストーカーさせるdivタグの上書きが上手くいかないみたいです。

この件について分かる人はいないでしょうか?
下にマウスストーカーのHTMLソース、XSLソースをおきます。


HTMLのマウスカーソル
http://www.peacelove.biz/HATENA/mouse3.html

XSLソース
http://www.peacelove.biz/HATENA/test2.xsl
http://www.peacelove.biz/HATENA/test.xml
(xsl動作に必要なxml)
---------------------------------------

XSL内でのdivタグの記述方法が分からないだけかもしれません。

<div id="myCursor" style="position:absolute; z-index:1;">
全角で書くとエラー
</div>
のように、<div>タグ内で全角で書くとエラーになるんですよね。
XSL内(xhtml?)でのdivタグの書きかたが分かる人がいたら、教えてください。
お願いしますm(_ _)m

●質問者: hiyarihatto
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML JavaScript XHTML XML XSL
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● lains_you
●35ポイント

全角で書くとエラーになる原因は、XSLファイルのXML宣言においてエンコーディングを指定していないためです。

XMLではデフォルトのエンコーディングはUnicodeとなっており、他のエンコーディングを使用するためにはXML宣言でencodingを記述する必要があります。


全角文字を記述した後、文字コードをUTF-8またはUTF-16で保存するか、XML宣言をとして文字コードShift_JISで保存してみてください。


また、ついでに行番号62も</xsl:text>に修正してください。

◎質問者からの返答

ありがとうございます。

エンコード設定していないですね…たしかに。

</xsl:text>

も間違っていますね。

修正して再ソースアップしました。

http://www.peacelove.biz/HATENA/test2.xsl

でも、マウスカーソルストーカーは出来ませんね…

divタグ内のマウスカーソルの座標にすることは成功したのですが。

xslを使ったマウスストーカーについて、

分かる人がいたら教えてください。

お願いしますm(_ _)m


2 ● lains_you
●35ポイント ベストアンサー

mouse3.htmlのスクリプトをxslにそのまま移植してあげれば動作します。

現行xslのスクリプトが動作しない理由は、スクリプト内でマウスの座標を取得しているものの、その座標をマウスストーカーとなるdivに反映していないためです。

以下、私が使用したxslを記述します。

<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" />
<xsl:template match="places">
<html>
<head>
<script language="JavaScript">
<![CDATA[
<!--
myID = "myCursor"; // DIVタグで付けたID
myX = 8; // カーソル先端から少しずらす(X座標)
myY = 16; // カーソル先端から少しずらす(Y座標)
function myGetBrowser(){ // ブラウザを判断する
 myOP = (navigator.userAgent.indexOf("Opera",0) != -1)?1:0; //OP
 myN6 = document.getElementById; // N6 or IE
 myIE = document.all; // IE
 myN4 = document.layers; // N4
 if (myOP){ // OP?
 document.onmousemove = myMoveOP;alert("OP");
 }else if (myIE){ // IE?
 document.onmousemove = myMoveIE;alert("ie");
 }else if (myN6){ // N6?
 window.addEventListener("mousemove",myMoveN6,true);alert("OP");
 }else if (myN4){ // N4?
 window.captureEvents(Event.MOUSEMOVE);
 window.onmousemove = myMoveN4;
 }
}
function myMoveOP(){ // OPでマウスが動いた
 myObj=document.getElementById(myID).style;
 myObj.left = myX + window.event.clientX + "px";
 myObj.top = myY + window.event.clientY + "px";
}
function myMoveN6(myEvent){ // N6でマウスが動いた
 myObj=document.getElementById(myID).style;
 myObj.left = myX + myEvent.clientX + window.pageXOffset + "px";
 myObj.top = myY + myEvent.clientY + window.pageYOffset + "px";
}
function myMoveIE(){ // IEでマウスが動いた
 myObj=document.all[myID].style;
 myObj.left = myX + window.event.clientX + document.body.scrollLeft + "px";
 myObj.top = myY + window.event.clientY + document.body.scrollTop + "px";
}
function myMoveN4(myEvent){ // N4でマウスが動いた
 myObj=document[myID];
 myObj.left = myX + myEvent.x ;
 myObj.top = myY + myEvent.y ;
}
// -->
]]>
</script>
</head>
<body onLoad="myGetBrowser()">
<div id="myCursor" style="position:absolute; z-index:1;">
<xsl:text>
全角
</xsl:text>
</div>
<xsl:for-each select="place">
<xsl:value-of select="attribute::id" />
<xsl:if test="title" >
<xsl:value-of select="title" />
 </xsl:if>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
◎質問者からの返答

ありがとうございます。

すみません、

ただの見落とし出来たね‥

こんなのにはまっていたとは‥

lains_youさんのおかげで助かりました。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ