2

サード パーティの Web サイトからコンテンツのユーザー制御表示を取得しようとしています。デモのセットアップでは、リンクの onmouseover によってオブジェクトが表示され、onmouseout で消えます。

デモはオブジェクトの 1 つに対して機能し、他のオブジェクトを削除するとすべてのオブジェクトに対して機能するため、オブジェクトが互いに干渉していることが問題であると推測しています。

z-index を推測しましたが、うまくいかなかったようです。

デモファイルは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>On mouseover show object</title>
<script>
function toggleDiv(id, flagit)
{
if (flagit === 1){
document.getElementById("demo").innerHTML="Over";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex=1;
}
else {
document.getElementById("demo").innerHTML="Not over";
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.zIndex=-1;
}
}
</script>
<style type="text/css">
#div1, #div2, #div3 {visibility:hidden; position:absolute; width:400px;}
#div2 {left:400px;}
#div3 {left:800px;}

</style>
</head>

<body>
<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)">Link 1</a> |
<a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)">Link 2</a> |
<a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)">Link 3</a>
<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>


<object id="div1" type="text/html" data="http://en.m.wikipedia.org/wiki/Woodworking" />
<object id="div2" type="text/html" data="http://en.m.wikipedia.org/wiki/Ironwork" />
<object id="div3" type="text/html" data="http://en.m.wikipedia.org/wiki/Stonemasonry" />

</body>
</html>

前もって感謝します。

4

1 に答える 1

2

firebug で調べたところ、他のオブジェクトがまったくレンダリングされていないことがわかりました。objectタグを閉じる必要があると推測しました</object>

以下に修正されたコード：

<!DOCTYPE html>
<html>
<head>
<title>On mouseover show object</title>
<script>
function toggleDiv(id, flagit)
{
if (flagit === 1){
document.getElementById("demo").innerHTML="Over";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex=1;
}
else {
document.getElementById("demo").innerHTML="Not over";
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.zIndex=-1;
}
}
</script>
<style type="text/css">
#div1, #div2, #div3 {visibility:hidden; position:absolute; width:400px;}
#div2 {left:400px;}
#div3 {left:800px;}

</style>
</head>

<body>
<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)">Link 1</a> |
<a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)">Link 2</a> |
<a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)">Link 3</a>
<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>


<object id="div1" type="text/html" data="http://en.m.wikipedia.org/wiki/Woodworking" > </object>
<object id="div2" type="text/html" data="http://en.m.wikipedia.org/wiki/Ironwork" /> </object>
<object id="div3" type="text/html" data="http://en.m.wikipedia.org/wiki/Stonemasonry" /> </object>

</body>
</html>
于 2012-08-25T18:31:52.710 に答える