Javascript:鼠标移到缩略图上,在第8个表条目之后,较大的图像不工作
javascript: mouseover thumbnail, larger image not working after 8th table entry
我的任务是扩展投资组合页面,但是当我复制和粘贴相同的代码来创建/复制页面上的更多表时,javascript鼠标悬停缩略图不再超出第8个条目。(见链接中的设计项目9)。但是,我可以在第8个条目中放置相同的图像和缩略图,并且效果很好。
链接:http://petrodesignbuild.com/portfoliotest0811.php
HTML代码:`<table cellpadding="0" cellspacing="5" width="764" align="center" class="gallery">
<tr>
<td valign="top">
<p><span class="inttxt"><b>Design Project 9</b></span><br /> Place cursor over photo to view larger</p>
</td>
<td align="center" valign="middle"> </td>
</tr>
<tr>
<td width="350" align="left" valign="top" style="border-right:solid 1px #d6d6d6 ">
<div id="gallery">
<h3>Before </h3><br />
<img src="images/thumbs/arlington_before1_thumb.jpg" alt="" width="94" height="61" onmouseover="swap('arlington_before1', 'large9')" /><img src="images/thumbs/arlington_before2_thumb.jpg"
alt="" width="94" height="61" onmouseover="swap('arlington_before2.jpg', 'large9')" /><img src="images/thumbs/arlington_before3_thumb.jpg" alt=""
width="94" height="61" onmouseover="swap('arlington_before3.jpg', 'large9')" /><br />
<h3>After</h3><br />
<img src="images/thumbs/arlington_after1_thumb.jpg" alt="" width="94" height="61" onmouseover="swap('arlington_after1.jpg', 'large9')" /><img src="images/thumbs/arlington_after2_thumb.jpg"
alt="" width="94" height="61" onmouseover="swap('arlington_after2.jpg', 'large9')" /><img src="images/thumbs/arlington_after3_thumb.jpg" alt=""
width="94" height="61" onmouseover="swap('arlington_after3.jpg', 'large9')" /></p>
<p>A small backyard with a <em>staircase
to nowhere</em> was transformed into a true outdoor room with the use of creative masonry and stonework design; This “room” now has water features including a fountain and a spa, and an outdoor fireplace that all
merge seamlessly with the use of elegant curves.
<ul>
<li><a href="md-services.php"> Custom Stone & Masonry</a></li>
<li><a href="wpps-services.php">Pools, Spas & Garden
Ponds
</a></li>
<li><a href="ld-services.php">Lighting Design</a></li>
</ul>
</p>
</div>
</td>
<td width="397" align="left" valign="top" style="padding:32px 0px 0px 10px;"><img src="images/gallery/arlington_after1.jpg" name="large9" width="363" height="363" id="large2" /> </td>
</tr>
<tr>
</tr>
</table>
<p align="right" style="padding-right: 20px"> <a href="#top">back to top</a> </p>
<center>
<hr noshade="noshade" class="b">
</center>`
Javascript:
function swap(xSrc,xName) {
var image = "images/gallery/" + xSrc.toString();
document.getElementById(xName).src = image;
document.getElementById('gallerytxt').innerHTML = xName;
return false;
请始终检查浏览器控制台;)
未捕获的类型错误:不能设置属性'innerHTML'为null
请删除或更改以下代码。注意,一个ID只能设置一次,不能设置多次: document.getElementById('gallerytxt').innerHTML = xName
未捕获的TypeError: Cannot set property 'src' of null
你在这里犯了一个错误。我猜你忘记重命名id了
<img src="images/gallery/arlington_after1.jpg" name="large9" width="363" height="363" id="large2">
将id="large2"
改为id="large9"
,代码将正常工作
相关文章:
- 应用程序在“关闭”之后停止工作(控制台中没有错误);咕哝的构造”;
- 有时 array.length 只在 .push() 之后工作(为什么?)
- ASPxClientGridView之后激发的客户端事件.ApplyFilter执行其工作
- 地图,rails 4.2,javascript,鼠标悬停,只工作一次(或两次).然后在重新加载之后
- Javascript在此代码之后停止工作
- 我的jquery代码在谷歌chrome控制台中工作,而不是在保存它之后
- 在表单提交将DOM的一部分替换为分部之后,我应该将ajax成功绑定到什么来使我的javascript工作
- 全局变量确实'在script标记中的外部.js文件之后,nt工作
- 为什么在Firefox更新之后JQuery不能在我的MVC 4应用程序中工作
- 为什么我之前工作的谷歌可视化图表在2013年11月26日之后停止工作
- HTML分页在第一页上搞砸了,之后它工作正常
- AngularJS$index在orderBy之后无法正常工作
- 在 .detach() 和 .append() 之后使用 .load() 无法按预期工作
- Gulp-rev:不是第一次工作,而是在第一次工作之后工作
- JS仅在控制台.log之后工作
- jQuery 模式对话框在刷新后的第一页上工作正常,但在此之后的任何其他页面上都无法正常工作,除非刷新
- $.post之后jQuery日期选择器不工作
- fadeIn作为fadeOut之后的回调函数没有按预期工作
- 为什么这个JavaScript函数在网站第一次加载时不能正确计算,但之后工作正常?
- Javascript不能在Ajax之后工作