图像交换仅适用于IE [英] Image swap only works in IE
问题描述
我有一个投资组合页面，可以加载十几个缩略图和一个大图像。
一个朋友帮我编写了一个脚本（下面），它将换掉大图像
（单击不同的缩略图时命名为imgLarg）。缩略图
和放大器的名字相同，一个在/ thumbs /中，一个在
/放大/ - 棘手，是吧？ ;-)最简单的方法是什么？在其他浏览器中也可以使用
？
< script language =" JavaScript"> ;
函数放大（）{
oSrcElem = event.srcElement;
imgLarge.src = oSrcElem.src.replace（/ thumbs /， ''images''）;
}
< / script>
谢谢，
Wm
I have a portfolio page which loads a dozen thumbnails and one large image.
A friend helped me code a script (below) which will swap out the large image
(named "imgLarg") when a different thumbnail is clicked. Both the thumbnail
and the enlargement are identically named, one is in /thumbs/ and one is in
/enlargements/ - tricky, huh? ;-) What''s the easiest way to make this work
in other browsers as well?
<script language="JavaScript">
function enlarge() {
oSrcElem = event.srcElement;
imgLarge.src = oSrcElem.src.replace(/thumbs/,''images'');
}
</script>
Thanks,
Wm
推荐答案
LAshooter写道：
LAshooter wrote:
我有一个投资组合页面，可以加载十几个缩略图和一个大图像。一位朋友帮我编写了一个脚本（下面），当点击一个不同的缩略图时，该脚本将换掉大图像（命名为imgLarg）。缩略图和放大都是相同的命名，
一个在/ thumbs /中，一个在/ enlargements / - 棘手，是吧？ ;-)
在其他浏览器中使用此功能的最简单方法是什么？
I have a portfolio page which loads a dozen thumbnails and one large
image. A friend helped me code a script (below) which will swap out
the large image (named "imgLarg") when a different thumbnail is
clicked. Both the thumbnail and the enlargement are identically named,
one is in /thumbs/ and one is in /enlargements/ - tricky, huh? ;-)
What''s the easiest way to make this work in other browsers as well?
根本不使用它，因为它是垃圾。比较
< URL：http：//pointedears.de/scripts/test/hoverMe>
PointedEars
Not to use it at all, because it is junk. Compare
<URL:http://pointedears.de/scripts/test/hoverMe>
PointedEars
该脚本在IE中运行良好，而不是在其他浏览器中。您的参考
显示黑屏，除了关于之外什么都没有。顶部的图形。
应该在那里工作的东西???
Wm
" Thomas''PointedEars''Lahn" <宝********* @ web.de>在消息中写道
news：33 **************** @ PointedEars.de ...
The script works very well in IE, just not in other browsers. Your reference
displays a black screen with nothing but an "About" graphic at the top. Is
something supposed to work there???
Wm
"Thomas ''PointedEars'' Lahn" <Po*********@web.de> wrote in message
news:33****************@PointedEars.de...
LAshooter写道：
LAshooter wrote:
我有一个投资组合页面，可以加载十几个缩略图和一个大的
图像。一位朋友帮我编写了一个脚本（下面），当点击一个不同的缩略图时，该脚本将换掉大图像（命名为imgLarg）。缩略图和放大都是相同的命名，
一个在/ thumbs /中，一个在/ enlargements / - 棘手，是吧？ ;-)
在其他浏览器中使用此功能的最简单方法是什么？
I have a portfolio page which loads a dozen thumbnails and one large
image. A friend helped me code a script (below) which will swap out
the large image (named "imgLarg") when a different thumbnail is
clicked. Both the thumbnail and the enlargement are identically named,
one is in /thumbs/ and one is in /enlargements/ - tricky, huh? ;-)
What''s the easiest way to make this work in other browsers as well?
根本不使用它，因为它是垃圾。比较
< URL：http：//pointedears.de/scripts/test/hoverMe>
PointedEars
Not to use it at all, because it is junk. Compare
<URL:http://pointedears.de/scripts/test/hoverMe>
PointedEars
LAshooter写道：
LAshooter wrote:
我有一个投资组合页面，可以加载十几个缩略图和一个大图像。
一位朋友帮我编写了一个脚本（下面），它将换掉大图像
（命名为imgLarg），当点击不同的缩略图时。缩略图
和放大都是相同的命名，一个在/ thumbs /中，一个在
/ enlargements / - 棘手，是吧？ ;-)在其他浏览器中，最简单的方法是什么？
< script language =" JavaScript">
不推荐使用language属性，类型是必需的：
< script type =" text / javascript">
function enlarge（）{
oSrcElem = event.srcElement;
你在这里使用''event''（即事件对象）是使你的脚本以IE为中心的一个因素。有两种基本的事件模型：W3C和IE [1]。
但是根本不需要使用事件对象 - 你可以直接传递一个
引用元素点击使用''this''。
在缩略图上，使用onclick属性，如：
< img onclick = "放大（本）;" ...>
然后：
功能放大（oSrcElem）{
// ...
现在oSrcElem是对不使用事件对象触发click事件
的元素的引用。在各种浏览器中使用''this''更加可靠，并且b $ b一致。
imgLarge.src = oSrcElem.src.replace（/ thumbs /， ''图片''）;
这里''imgLarge''是大图像元素的名称或id，对吧？
你有第二个以IE为中心的位代码IE生成全局对象的所有
元素名称和ID属性，这是一个相当愚蠢的想法
会导致各种各样的问题。
在其他浏览器中，您可以使用
图像集合（DOM 0的一部分）获取对命名图像的引用，因此在Firefox中：
document.images.imgLarge
是对图像元素的引用，其名称或ID为''imgLarge''。
由于某些未知原因，IE不会'' t支持，你必须使用索引
数。因此，如果imgLarge是文档中的第5张图片：
document.images [4]
可以解决问题（并且也适用于Firefox）。
无论如何，如果你想支持IE 4，你可能最好使用getElementById来回退
document.all。试试以下内容：
功能放大（oSrcElem）
{
var imgLarge;
if（document.getElementById）{
imgLarge = document.getElementById（''imgLarge''）;
} else if（document.all）{
imgLarge = document.all [''imgLarge''];
}
if（imgLarge）{
imgLarge.src = oSrcElem.src.replace（/ thumbs /，''images''）;
}
}
< / script>
I have a portfolio page which loads a dozen thumbnails and one large image.
A friend helped me code a script (below) which will swap out the large image
(named "imgLarg") when a different thumbnail is clicked. Both the thumbnail
and the enlargement are identically named, one is in /thumbs/ and one is in
/enlargements/ - tricky, huh? ;-) What''s the easiest way to make this work
in other browsers as well?
<script language="JavaScript">
The language attribute is deprecated, type is required:
<script type="text/javascript">
function enlarge() {
oSrcElem = event.srcElement;
Your use of ''event'' (i.e. the event object) here is one factor that makes
your script IE-centric. There are two basic event models: W3C and IE [1].
But there is no need to use the event object at all - you can pass a
reference directly from the element clicked on using ''this''.
On your thumbnail, use an onclick attribute like:
<img onclick="enlarge(this);" ... >
then:
function enlarge (oSrcElem){
// ...
Now oSrcElem is a reference to the element that fired the click event
without using the event object. Using ''this'' is much more reliable and
consistent across various browsers.
imgLarge.src = oSrcElem.src.replace(/thumbs/,''images'');
Here ''imgLarge'' is either the name or id of the large image element, right?
And there you have your second IE-centric bit of code. IE makes all
element names and ID properties of the global object, a rather silly idea
that causes all sorts of problems.
In other browsers, you can get a reference to a named image using the
images collection (part of DOM 0), so in Firefox:
document.images.imgLarge
is a reference to the the image element with a name or ID of ''imgLarge''.
For some unknown reason, IE doesn''t support that, you have to use the index
number. So if imgLarge is the 5th image in the document:
document.images[4]
would do the trick (and would work in Firefox too).
Anyhow, you are probably best to use getElementById with fall back to
document.all if you want to support IE 4. Try the following:
function enlarge (oSrcElem)
{
var imgLarge;
if (document.getElementById){
imgLarge = document.getElementById(''imgLarge'');
} else if (document.all){
imgLarge = document.all[''imgLarge''];
}
if (imgLarge){
imgLarge.src = oSrcElem.src.replace(/thumbs/,''images'');
}
}
</script>
在编译上面的时候，我觉得可以使用它：
功能放大（oSrcElem）
{
if（！imgLarge&& document.getElementById ）{
var imgLarge = document.getElementById（''imgLarge''）;
}
if（imgLarge）{
imgLarge.src = oSrcElem.src.replace（/ thumbs /，''images''）;
}
}
未经测试。当然，没有脚本的人都不会发生任何事情。
1.在这里阅读不同的事件模型：
< URL：http： //www.quirksmode.org/js/introevents.html>
-
Rob
While compiling the above, it occurred to me that it may be OK to use:
function enlarge (oSrcElem)
{
if (!imgLarge && document.getElementById){
var imgLarge = document.getElementById(''imgLarge'');
}
if (imgLarge){
imgLarge.src = oSrcElem.src.replace(/thumbs/,''images'');
}
}
Untested. Of course anyone without scripting will see nothing happen.
1. Read about the different event models here:
<URL:http://www.quirksmode.org/js/introevents.html>
--
Rob
这篇关于图像交换仅适用于IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
