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
No.2
50
10
35pt
mouse3.htmlのスクリプトをxslにそのまま移植してあげれば動作します。
現行xslのスクリプトが動作しない理由は、スクリプト内でマウスの座標を取得しているものの、その座標をマウスストーカーとなるdivに反映していないためです。
以下、私が使用したxslを記述します。
235
225
<?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>
No.1
5010
35pt
全角で書くとエラーになる原因は、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
No.2
5010
ここでベストアンサー
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>
ありがとうございます。
すみません、
ただの見落とし出来たね‥
こんなのにはまっていたとは‥
lains_youさんのおかげで助かりました。
ありがとうございます。
1
1
1
2
2
1
3
ありがとうございます。
すみません、
ただの見落とし出来たね‥
こんなのにはまっていたとは‥
lains_youさんのおかげで助かりました。
ありがとうございます。