onMouseOver / onMouseOut无效 [英] onMouseOver/onMouseOut not working
问题描述
大家好，
我想要一个页面，当鼠标移过单元格时，表格单元格的内容被替换为图像
，当鼠标
移出时，文本将被恢复。这是页面的html：
< HTML>
< HEAD>
< style type =" text / css">
td.col1
{
background-color：Silver;
颜色：黑色;
}
td.col3
{
background-color：Aqua;
颜色：蓝色;
}
< / style>
< script language =" ; javascript">
函数changeCellContents（cell，toPic）
{
if（toPic）
{
cell.innerHtml ="< img src = \" images / myimage.jpg \">" ;;
}
else
{
cell.innerText = cell.CellText;
}
}
< / script>
< / HEAD>
< body>
< form name =" TableDBForm">
< table bordercolor =" white"边界=" 0" CELLSPACING = QUOT 1 QUOT; width =" 100％">
< tr>
< td Class =" col1" CellText =" cell 1"
onMouseOver =" changeCellContents（this，true）"
onMouseOut =" changeCellContents（this，false）"> cell 1< / td>
< td Class =" col1" CellText =" cell 2"
onMouseOver =" changeCellContents（this，true）"
onMouseOut =" changeCellContents（this，false）"> cell 2< / td>
< / tr>
< / table>
< / form>
< / body>
< / HTML>
不幸的是，它似乎无法奏效。有什么理由？
Hi all,
I want a page where the contents of a table cell are replaced with an image
when the mouse moves over the cell, and the text is restored when the mouse
moves out. Here''s the html for the page:
<HTML>
<HEAD>
<style type="text/css">
td.col1
{
background-color:Silver;
color:Black;
}
td.col3
{
background-color:Aqua;
color:Blue;
}
</style>
<script language="javascript">
function changeCellContents(cell, toPic)
{
if (toPic)
{
cell.innerHtml = "<img src=\"images/myimage.jpg\">";
}
else
{
cell.innerText = cell.CellText;
}
}
</script>
</HEAD>
<body>
<form name="TableDBForm">
<table bordercolor="White" border="0" cellspacing="1" width="100%">
<tr>
<td Class="col1" CellText="cell 1"
onMouseOver="changeCellContents(this, true)"
onMouseOut="changeCellContents(this, false)">cell 1</td>
<td Class="col1" CellText="cell 2"
onMouseOver="changeCellContents(this, true)"
onMouseOut="changeCellContents(this, false)">cell 2</td>
</tr>
</table>
</form>
</body>
</HTML>
Unfortunately, it doesn''t seem to work. Any reason why?
推荐答案
Epetruk说：
Epetruk said:
function changeCellContents（cell，toPic ）
{
if（toPic）
{
cell.innerHtml ="< img src = \" images / myimage.jpg \">" ;;
}
其他
{
cell.innerText = cell.CellText;
}
}
< / script>
function changeCellContents(cell, toPic)
{
if (toPic)
{
cell.innerHtml = "<img src=\"images/myimage.jpg\">";
}
else
{
cell.innerText = cell.CellText;
}
}
</script>
Unfortunately, it doesn''t seem to work. Any reason why?
没有名为innerHtml的属性。它是innerHTML。
另一方面，innerText是正确的，但并不存在
在所有浏览器中。在两种情况下最好使用innerHTML。
你也不能期望能够访问自定义HTML
属性，如 CELLTEXT"在所有浏览器中，所以在更改
之前，最好存储当前的innerHTML值。
if（b） toPic）
{
cell.CellText = cell.innerHTML;
cell.innerHTML ="< img src = \" images / myimage.jpg \">" ;;
}
else
{
cell .innerHTML = cell.CellText;
}
There is no attribute named "innerHtml". It''s "innerHTML".
On the other hand, "innerText" is correct, but doesn''t exist
in all browsers. It''s better to use innerHTML in both cases.
You also can''t expect to be able to access custom HTML
attributes like "CellText" in all browsers, so it would be
better to store the current innerHTML value before you change
it.
if (toPic)
{
cell.CellText = cell.innerHTML;
cell.innerHTML = "<img src=\"images/myimage.jpg\">";
}
else
{
cell.innerHTML = cell.CellText;
}
Lee写道：
[... ]
Lee wrote:
[...]
另一方面，innerText在所有浏览器中都是正确的，但并不存在。在两种情况下使用innerHTML会更好。
虽然innerHTML受到广泛支持，但可能会有一些不支持它的b / b
浏览器。此外，它不是W3C
HTML规范的一部分（并且不太可能）。
因此它值得进行功能测试在尝试使用之前
并提供替代方案，如果它不起作用。
你也不能期望能够访问自定义HTML
像CellText这样的属性在所有浏览器中，因此在更改
之前存储当前innerHTML值会更好。
On the other hand, "innerText" is correct, but doesn''t exist
in all browsers. It''s better to use innerHTML in both cases.
Whilst innerHTML is widely supported, there are likely to be some
browsers that don''t support it. Also, it isn''t part of the W3C
HTML specification (and is unlikely to ever be).
Therefore it''s worth feature testing before attempting to use it
and provide an alternative if it doesn''t work.
You also can''t expect to be able to access custom HTML
attributes like "CellText" in all browsers, so it would be
better to store the current innerHTML value before you change
it.
有关自定义属性的好处，但是如果您存储单元格的当前内容
，onmouseout将获取
图像并重新显示它。必须指定内容
独立于onmouseover / out。
但是存在更大的问题。一旦你将鼠标悬停在td上并且
将图像放入其中，一旦光标越过图像
，它就会退出。 td，所以onmouseout再次触发并用文本替换
图像。我试图阻止传播但是
都失败了，也许其他人在这里有一个建议。
我试过把鼠标放在手机和鼠标上在
表中。当鼠标位于单元格上方时，最后一个鼠标悬停单元格将被恢复，并且新单元格将图像放入其中。当从表中取出
时，鼠标按钮就会恢复单元格。
您可以将单元格文本和图像放在一个数组中，就像这样
可以为每个单元格调用不同的图像或文本。下面的脚本
使用DOM进行功能测试，如果不支持DOM方法，则提供innerHTML
方法。我使用了单元格
id来定义要交换的文本和图像，但是可以使用其他一些方法
。
OP应该记住，即使禁用JavaScript，页面也应该完全保持功能。
< html>< head>< title> play< / title>
< style type =" text / css">
td.col1 {background-color：Silver;颜色：黑色;}
td.col3 {background-color：Aqua;颜色：蓝色;}
< / style>
< script language =" javascript">
var lastMouseOverCell;
var cellTxtArray = [''cell 1''，''cell 2'']
var cellImgArray = [''a.jpg''，''b.gif' ']
函数changeCellContents（cell，evt）{
var e = evt || window.event;
if（cell.nodeName ==''TABLE''&& e.type ==''mouseover''）{
if（ e.stopPropagation）e.stopPropagation（）;
e.cancelBubble = true;
return;
}
if（lastMouseOverCell）
restore（lastMouseOverCell）;
if（cell.nodeName.toLowerCase（）==''td''）{
lastMouseOverCell = cell;
insertImage（cell）;
} else {
lastMouseOverCell ='''';
}
if（e.stopPropagation）e.stopPropagation（）;
e.cancelBubble = true;
}
函数delContents（x）{
if（x.firstChild）{
while（x。 firstChild）{
x.removeChild（x.firstChild）;
}
}否则if（x.innerHTML）{
x.innerHTML ='''';
}
}
函数restore（x）{
delContents（x）;
if（x.appendChild）{
oTxt = document.createTextNode（cellTxtArray [x.id]）;
x.appendChild（oTxt）;
} else if（x.innerHTML）{
x.innerHTML = cellTxtArray [x.id];
}
}
函数insertImage（x） {
delContents（x）
if（x.appendChild）{
var oImg = document.createElement（''img''）;
oImg.src = cellImgArray [x.id];
x.appendChild（oImg）;
} else if（x.innerHTML） {
x.innerHTML =''< img src ="''+ cellImgArray [x.id] +''"''
+''alt =goofy image>'';
}
}
< / script>
< / head>
< body>
< table bordercolor =" White" border =" 0"
cellspacing =" 1"宽度= QUOT; 100％QUOT; onmouseout ="
changeCellContents（this，event）;
">
< tr>
< td Class =" col1" ID = QUOT; 0" onmouseover ="
changeCellContents（this，event）;
"> cell 1< / td>
< td Class = " COL1" ID = QUOT 1 QUOT; onmouseover ="
changeCellContents（this，event）;
"> cell 2< / td>
< / tr>
< tr>
< td Class =" col1" ID = QUOT; 0" onmouseover ="
changeCellContents（this，event）;
"> cell 1< / td>
< td Class = " COL1" ID = QUOT 1 QUOT; onmouseover ="
changeCellContents（this，event）;
"> cell 2< / td>
< / tr>
< / table>
< / body>
< / html>
-
Rob
Good point about the custom attribute, but if you store the
current contents of the cell, the onmouseout will pick up the
image and re-display it. The contents have to be specified
independently of onmouseover/out.
But there are greater problems. Once you mouseover the td and
put an image in there, as soon as the cursor goes over the image
it is "out" of the td, so the onmouseout fires and replaces the
image with the text again. I''ve tried to stop propagation but
have failed, perhaps someone else here has a suggestion.
I tried putting a mouseover on the cell and mouseout on the
table. When the mouse is over a cell, the last mouseover cell is
restored and the new cell has the image put in it. When going
out of the table, a mouseout just restores the cell.
You can put the cell text and images in an array, that way you
can call a different image or text for each cell. The script
below uses DOM with feature testing and offers an innerHTML
method if the DOM methods aren''t supported. I have used the cell
id to define the text and image to swap, but some other method
could be used.
The OP should remember that the pages should stay fully
functional even if JavaScript is disabled.
<html><head><title>play</title>
<style type="text/css">
td.col1 {background-color:Silver; color:Black;}
td.col3 {background-color:Aqua; color:Blue;}
</style>
<script language="javascript">
var lastMouseOverCell;
var cellTxtArray = [''cell 1'',''cell 2'']
var cellImgArray = [''a.jpg'',''b.gif'']
function changeCellContents(cell,evt) {
var e = evt || window.event;
if (cell.nodeName == ''TABLE'' && e.type == ''mouseover'') {
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
return;
}
if (lastMouseOverCell)
restore(lastMouseOverCell);
if(cell.nodeName.toLowerCase() == ''td'') {
lastMouseOverCell = cell;
insertImage(cell);
} else {
lastMouseOverCell = '''';
}
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
}
function delContents(x) {
if(x.firstChild) {
while (x.firstChild) {
x.removeChild(x.firstChild);
}
} else if (x.innerHTML) {
x.innerHTML = '''';
}
}
function restore(x) {
delContents(x);
if (x.appendChild) {
oTxt = document.createTextNode(cellTxtArray[x.id]);
x.appendChild(oTxt);
} else if (x.innerHTML) {
x.innerHTML = cellTxtArray[x.id];
}
}
function insertImage(x) {
delContents(x)
if (x.appendChild) {
var oImg = document.createElement(''img'');
oImg.src = cellImgArray[x.id];
x.appendChild(oImg);
} else if (x.innerHTML) {
x.innerHTML = ''<img src="''+cellImgArray[x.id]+''"''
+ '' alt="goofy image">'';
}
}
</script>
</head>
<body>
<table bordercolor="White" border="0"
cellspacing="1" width="100%" onmouseout="
changeCellContents(this,event);
">
<tr>
<td Class="col1" id="0" onmouseover="
changeCellContents(this,event);
">cell 1</td>
<td Class="col1" id="1" onmouseover="
changeCellContents(this,event);
">cell 2</td>
</tr>
<tr>
<td Class="col1" id="0" onmouseover="
changeCellContents(this,event);
">cell 1</td>
<td Class="col1" id="1" onmouseover="
changeCellContents(this,event);
">cell 2</td>
</tr>
</table>
</body>
</html>
--
Rob
On Sun，2005年2月13日02:30:29 -0000 Epetruk写道：
On Sun, 13 Feb 2005 02:30:29 -0000 Epetruk wrote:
大家好，
我想要一个页面，当鼠标在单元格上移动时，表格单元格的内容被替换为
图像，并且当
鼠标移出来了。这是页面的html：
Hi all, I want a page where the contents of a table cell are replaced with an
image
when the mouse moves over the cell, and the text is restored when the
mouse
moves out. Here''s the html for the page:
我认为你最好使用隐藏divsion的方法或
可见。
这就是我使用的。
var kid =" FirstOn"
函数ShowInfo（DivId）
{
document.getElementById（kid）.style.display =''none'';
document.getElementById（DivId）.style .display ='''block'';
kid = DivId;
}
< div id =" FirstOn" ; style =" display：block;">
blah blah blah blah
< / div>
< ; div id =" ShowMe" style =" display：none;">
< img src =" name.jpg">
< tr>< ; td onmouseover =" ShowInfo（''ShowMe''）onmouseout =" ShowInfo（''FirstOn''）>
I think you''d be better off using a method where a divsion is hidden or
visible.
This is what I use.
var kid = "FirstOn"
function ShowInfo(DivId)
{
document.getElementById(kid).style.display = ''none'';
document.getElementById(DivId).style.display = ''block'';
kid = DivId;
}
<div id="FirstOn" style="display:block;">
blah blah blah blah
</div>
<div id="ShowMe" style="display:none;">
<img src="name.jpg">
<tr><td onmouseover="ShowInfo(''ShowMe'') onmouseout="ShowInfo(''FirstOn'')>
这篇关于onMouseOver / onMouseOut无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
