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

回答の条件
  • 1人2回まで
  • 登録:2006/06/25 12:58:11
  • 終了:2006/06/26 17:11:20

ベストアンサー

id:lains_you No.2

lains_you回答回数50ベストアンサー獲得回数102006/06/26 08:41:48

ポイント35pt

 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>
id:hiyarihatto

ありがとうございます。

すみません、

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

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

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

ありがとうございます。

2006/06/26 17:10:30

その他の回答(1件)

id:lains_you No.1

lains_you回答回数50ベストアンサー獲得回数102006/06/25 16:43:44

ポイント35pt

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

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


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


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

id:hiyarihatto

ありがとうございます。

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

</xsl:text>

も間違っていますね。

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

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

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

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

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

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

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

2006/06/25 23:05:25
id:lains_you No.2

lains_you回答回数50ベストアンサー獲得回数102006/06/26 08:41:48ここでベストアンサー

ポイント35pt

 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>
id:hiyarihatto

ありがとうございます。

すみません、

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

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

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

ありがとうございます。

2006/06/26 17:10:30

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません