帮助用一个简单的脚本切换2个图像,缩略图和全尺寸
Help with a simple script to togle 2 images, thumbnail and fullsize
我是一个javascript新手。我有一个这样的脚本:
<html>
<head>
<script type="text/javascript">
var x= '<img id="im" src="thumbnail.gif">';
switch (x)
{
case x=='document.getElementById("im")':
document.getElementById('im').outerHTML='<img id="im" src="fullsize.gif">';
break;
case x!='document.getElementById("im")':
document.getElementById('im').outerHTML='<img id="im" src="thumbnail.gif">';
break;
default: x;
}
</script>
</head>
<body>
<span onclick="switch()">
<img id="im" src="thumbnail.gif">
</span>
</body>
</html>
我需要保持它的简单,但也使其工作使用开关功能。我在剧本中没有使用它们。我也不是在找幻灯片。
首先,您不希望在'document.getElementById("im")'
周围加上引号,因为这意味着您正在寻找该字符串。第二,case语句不像那样工作,语法是case value
,而不是case expression
(表达式是==
)。第三,你没有一个实际的函数调用。你正在调用switch
,它不做任何事情…
试试这样写:
function swap(){
switch(document.getElementById('im').outerHTML){
case x:
...
break;
default:
...
break;
}
}
...
<span onclick="swap();">
应该修复您现有的代码。或者"正确的"方式更像是:
function swap(){
var node = document.getElementById('im');
node.src = node.src.indexOf('fullsize')>=0 ? 'thumbnail.gif' : 'fullsize.gif';
}
...
<span onclick="swap();">
哦,我解决了你原来的问题。
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Html页面上的多个Base64图像和平滑加载
- 单击时切换两个图像
- 循环浏览多个身体背景图像
- 如何将多个画布保存为一个图像
- 从手机中选择多个图像'使用phonegap的多媒体资料
- 使用php-mysqljavascript上传多个图像
- 在WebGL中绘制多个二维图像
- 当多个图像在源文件中时,如何从源文件中选择特定的图像
- 如何将图像分割成多个部分
- 如何在html表中插入多个相同的图像
- 可在多个相册文件夹中查找的动态图像库
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- 使用jquery上传多个图像
- Meteor和S3:如何通过一次上传/编辑定义三个不同的图像
- 由多个图像文件组成的响应地图
- 如何从 javascript 中可能具有一个或多个图像的字符串中仅获取图像名称
- 网站 - 根据鼠标位置更改图像(2 个区域)
- Javascript:鼠标悬停缩略图以查看大图像-多个实例