Question

我的一面有一张桌子，右边有一张图像的区域。当表中的一行悬停时，我想要显示不同的图像。最终将有20行数据，包含20个相应的图像。

我有javascript：

document.getElementById("showlot1").mouseover = function() {
document.getElementById("lot1").style.visibility = "visible"; }

document.getElementById("showlot2").mouseover = function() {
document.getElementById("lot2").style.visibility = "visible"; }

CSS：

#lot1, #lot2 { visibility: hidden; }

HTML表：

<table style="width: 100%;" cellpadding="2">
    <tbody>
        <tr class="hover">
            <td style="text-align: center;">
                <a id="showlot1">1</a>
            </td>
            <td style="text-align: center;">
                <a id="showlot1">3.4ha (8.4 acres)</a>
            </td>
            <td style="text-align: center;">
                <a id="showlot1"></a>$99,000</a>
            </td>
        </tr>
        <tr class="hover">
            <td style="text-align: center;">
                <a id="showlot2">2</a>
            </td>
            <td style="text-align: center;">
                <a id="showlot2">3.5ha (8.6 acres)</a>
            </td>
            <td style="text-align: center;">
                <a id="showlot2">$99,000</a>
            </td>
        </tr>
    </tbody>
</table>

HTML Image Placer：

<img id="lot1" src="/wp-content/uploads/sites/291/2015/02/QA-CONTOUR-LOT1.jpg" />
<img id="lot2" src="/wp-content/uploads/sites/291/2015/02/QA-CONTOUR-LOT2.jpg" />

Answer 1

One simple way would be to do it with css.

HTML

<img id="myimg" src="first_image"/>

CSS

#myimg:hover {
    content: url('second_image');
}

See running JSFiddle example here

Answer 2

I found using classes to denote functional elements easier; a bunch of elements with ids (which is illegal by the way, as id's should be unique in the document) I changed to putting a class .showImage on your tr's and targeting them with event listeners.
I used CSS to set images to display:none; by default. This is more ideal than visibility:hidden because they disappear completely and won't take up space.
Instead of using anonymous functions, I split the desired result into two mouseover and mouseout handlers that toggle the display property. You'll see they also take a parameter index, which I used to determine which #lot to target:

function showImageOnMouseover(i) {<change display property to block>} and function hideImageOnMouseout(i) {<change display property to none>}

Where i is a variable used to find the right image using your convention #lot<i>

// get elements by class name
var elementSelection = document.getElementsByClassName('showImage');

// attach event listener to each element
for( var i=0; i<elementSelection.length; i++ ) {
	elementSelection[i].addEventListener( 'mouseover', showImageOnMouseover(i+1) );
  // pass i+1 to index since i starts out as 0. You could just as easily change the for loop to var i=1, or alter your #lot naming convention to start at 0.
  elementSelection[i].addEventListener( 'mouseout', hideImageOnMouseout(i+1) );
}

// handle mouseover
function showImageOnMouseover( index ) {
	return function(e) {
  	var imgId = 'lot' + index.toString();
    console.log(imgId);
    document.getElementById( imgId ).style = ( 'display: block' );
  }
}

// handle mouseout
function hideImageOnMouseout( index ) {
  return function(e) {
      var imgId = 'lot' + index.toString();
      document.getElementById( imgId ).style = ( 'display: none' );
  }
}

#lot1 {
  display: none;
}

#lot2 {
  display: none;
}

<table cellpadding="2" style="width: 100%;">
	<tbody>
		<tr class="hover showImage">
			<td style="text-align: center;">
				<a>1</a>
			</td>
			<td style="text-align: center;">
				<a>3.4ha (8.4 acres)</a>
			</td>
			<td style="text-align: center;">
				<a></a>$99,000
			</td>
		</tr>
		<tr class="hover showImage">
			<td style="text-align: center;">
				<a>2</a>
			</td>
			<td style="text-align: center;">
				<a>3.5ha (8.6 acres)</a>
			</td>
			<td style="text-align: center;">
				<a>$99,000</a>
			</td>
		</tr>
	</tbody>
</table>

<img id="lot1" src="http://www.kaybojesen.com/wp-content/uploads/2013/07/505-Dessertske-ni-tre.png" />
<img id="lot2" src="https://www.house.com.au/images/hires/HAG-CU249610.jpg" />

Javascript - 在悬停时显示/更改图片

2 个答案: