DHTML移动图像 [英] DHTML moving an image
问题描述
大家好。如果有人可以帮我一把，我会很感激
我正在做一个需要移动元素并使用DHTML来做这件事的网站。有一个简单的浏览器检测脚本来从Netscape排序IE。 IE浏览器还可以，但包括Firefox和Safari在内的Netscape浏览器现在还不行。不知道为什么。这个想法是当你将鼠标悬停在箭头上时，画廊div向左和向右移动。
我已经改变了剧本，现在图像确实单向移动了五个像素然后停止。 TimeOut似乎没有工作或某些东西阻止该功能运行。
这是
< html>
< head>
< title>观察者< / title>
< script type =" text / javascript">
var ns4 =（document.layers ）;
var ie4 =（document.all&&！document.getElementById）;
var ie5 =（document.all&& document.getElementById） ;
var ns6 =（！document.all&& document.getElementById）;
函数show（id）{
// Netscape 4
if（ns4）{
document.layers [id] .visibility =" show";
}
// Explorer 4
else if（ie4）{
document.all [id] .style.visibility =" visible" ;;
}
// W3C - Explorer 5+和Netscape 6+
else if（ie5 || ns6）{
document.getElementById（id）.style.visibility =" visible";
}
}
函数hide（id）{
/ / Netscape 4
if（ns4）{
document.layers [id] .visibility =" hide";
}
// Explorer 4
else if（ie4）{
document.all [id] .style.visibility =" hidden" ;;
}
// W3C - Explorer 5+和Netscape 6+
else if（ie5 || ns6）{
document.getElementById（id）.style.visibility =" hidden";
}
}
函数showPic（whichpic）{
if（document.getElementById）{
document.getElementById（''swap''） .src = whichpic.href;
返回false;
}否则{
返回true;
}
}
函数移动（）{
if（document.getElementById（" slider"）。style.left< 1000 0）
document.getElementById（" slider"）。style.left- = 5
moveid = setTimeout（" moving（）"，50）
}
function stop（）{
clearTimeout（moveid）
}
函数moving2（id）{
if（document.getElementById（" slider"） .style.left< 1000 0）
document.getElementById（" slider"）。style.left + = 5
moveid2 = setTimeout（" moving2（）" ，50）
}
函数stop2（）{
clearTimeout（moveid2）
}
< / script>
< meta http-equiv =" Content-Type"含量=" text / html的; charset = iso-8859-1">
< link href =" obtotalcss.css"的rel ="样式表" type =" text / css">
< / head>
< body>
< div class =" bstrip" onMouseOver =" show（''placeholder''），hide（''gallery''），h ide（''bio''），hide（''kamera''）" onMouseOut =" hide（''placeholder''），show（''gallery''）">< / div>
< div class =" topbar" ; onMouseOver =" show（''placeholder''），hide（''gallery''），h ide（''bio''），hide（''kamera''）" onMouseOut =" hide（''placeholder''），show（''gallery''）">
< div class =" gallery" ID = QUOT;滑块" > < img src =" images / space.jpg" style =" border：solid 0px;能见度：隐藏;">
< a href =" http://observationist.co.uk/images/mane-1.jpg" onclick =" return showPic（this）">< img src =" images / mane-1-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-2.jpg" onclick =" return showPic（this）">< img src =" images / mane-2-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-3.jpg" onclick =" return showPic（this）">< img src =" images / mane-3-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-4.jpg" onclick =" return showPic（this）">< img src =" images / mane-4-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-5.jpg" onclick =" return showPic（this）">< img src =" images / mane-5-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-6.jpg" onclick =" return showPic（this）">< img src =" images / mane-6-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-7.jpg" onclick =" return showPic（this）">< img src =" images / mane-7-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-8.jpg" onclick =" return showPic（this）">< img src =" images / mane-8-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-9.jpg" onclick =" return showPic（this）">< img src =" images / mane-9-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/ponies.jpg" onclick =" return showPic（this）">< img src =" thumb / ponies.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/snowman.jpg" onclick =" return showPic（this）">< img src =" thumb / snowman.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/cream-tea.jpg" onclick =" return showPic（this）">< img src =" thumb / cream-tea.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/masks.jpg" onclick =" return showPic（this）">< img src =" thumb / masks.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/turrets.jpg" onclick =" return showPic（this）">< img src =" thumb / turrets.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/wetleaves.jpg" onclick =" return showPic（this）">< img src =" thumb / wetleaves.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/innerplant.jpg" onclick =" return showPic（this）">< img src =" thumb / innerplant.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/beachflower.jpg" onclick =" return showPic（this）">< img src =" thumb / beachflower.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/elephantgod.jpg" onclick =" return showPic（this）">< img src =" thumb / elephantgod.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/lookather.jpg" onclick =" return showPic（this）">< img src =" thumb / lookather.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/templeflowers.jpg" onclick =" return showPic（this）">< img src =" thumb / templeflowers.jpg"边界=" 0" >< / A>
< / div>
< / div>
< div class =" botbarl" >
< img src =" images / logo5.jpg" style =" border：solid 0px;">
< br>< br>< br>
< a href ="＃" ; onClick =" show（''bio''），hide（''kamera''），hide（''gallery''），hide（''placeholder''）" >传记< / A> < br>
< a href ="＃" onClick =" show（''kamera''），hide（''bio''），hide（''gallery''），hide（''placeholder''）" >展览< / A> < br>
< a href =" mailto：keith@keithdavey.wanadoo.co.uk" >联系< / a>< br>
< / div>
< div class =" screen" ID = QUOT;占位符"风格= QUOT;能见度：可见; vertical-align：middle;边界：0像素;">
< img src =" images / kdavey.jpg" style =" vertical-align：middle; border：solid #aaaaaa 10px;" ID = QUOT;交换">
< / div>
< div class =" screen" ID = QUOT;画廊"风格= QUOT;背景图像：网址（图像/ kdavey.jpg）; background-repeat：no-repeat; border：solid 10px #aaaaaa;" >
< p class =" gallerytext">要滚动缩略图，请将鼠标放在箭头上，或者使用屏幕底部的滚动条。 < br>
< br>
点击thumnail查看更大版本的图片。保持你的鼠标
超过所选图像，直到veiwed。 < / p>
< / div>
< div class =" screen" ID = QUOT;生物" style =" background-image：url（images / portrait.jpg）; background-repeat：no-repeat;" >
< p class =" biotext">基思是皮姆利科艺术与媒体计划的一部分。他的
作品在伦敦各地的画廊和艺术空间展出。他是TimeOut的贡献者，他的作品定期发布在QXmagazine。他的图像
经常被伦敦的俱乐部制造商制定的规则用于其主要广告活动的许多
。 < / p>
< / div>
< div class =" screen" ID = QUOT; KAMERA" style =" background-image：url（images / exhibitions-2.jpg）; background-repeat：no-repeat;" >
< p class =" extext"> < span style =" color：000000; font-size：15px">''Shop Girls''< br>
2006年7月的盒子< br>
32-34 Monmouth Street，Seven Dials ，考文特花园< / span>< br>
< a style ="颜色：000000;字体大小：15px的" href =" http://maps.google.com/maps?q = WWW.BOXBAR.COM +无。& sll = 51.513804，-0.127491& spn = 0.009197,0.019834& sspn = 0.009681,0.020 878& NUM = 1&安培;开始= 0&安培; HL = EN">
map< / a> < br>
< br>
''Shop Girls''< br>
Blue Room 2005年5月〜2005年6月< ; br>
3，Bateman st。 Soho London< br>
< br>
''Shop Girls''< br>
Green March 2005~ April 2005< ; br>
74，Upper st。 Islington London N1< br>
< br>
''Leche-Vitrines''< br>
Freedom Soho 2004年12月〜 2005年2月< br>
66，Wardour st。伦敦W1F 0TA< br>
< br>
< / p>
< / div>
< div class =" arr"的onmouseout = QUOT;停止（）" onMouseOver =" moving（），show（''placeholder''），hide（''la llery''），hide（''bio''），hide（''kamera''）" >
< img src =" images / rightarrow.gif" >
< / div>
< div class =" arl"的onmouseout = QUOT;停止2（）" onMouseOver =" moving2（），show（''placeholder''），hide（''g allery''），hide（''bio''），hide（''kamera''）" >
< img src =" images / leftarrow.gif">
< / div>
< / body>
< / html>
我能够在firefox中使用它，你用逗号混淆了你的分号。
你的：
[html]
< div class =" topbar" onMouseOver =" show（''placeholder''），hide（''gallery''），h ide（''bio''），hide（''kamera''）" onMouseOut =" hide（''placeholder''），show（''gallery''）">
[/ html]
应该be：
[html]
< div class =" topbar" onMouseOver =" show（''placeholder''）; hide（''gallery''）; h ide（''bio''）; hide（''kamera''）;" onMouseOut =" hide（''placeholder''）; show（''gallery''）;">
[/ html]
你必须改变所有这些，你的代码才能运作。
祝你好运
嘿谢谢你的快速反应。
我尝试用冒号替换冒号但是什么也没做。也许你有不同版本的firefox？或者也许我在此期间为JS做了些什么。我可以麻烦你再看看，也许可以告诉我你在firefox中运行的东西。我希望你是对的，这是一个简单的解决方案，但没有任何区别。
谢谢Chris
x
< html>
< head>
< title>观察者< / title>
< ; script type =" text / javascript">
var ns4 =（document.layers）;
var ie4 =（document.all& &！document.getElementById）;
var ie5 =（document.all&& document.getElementById）;
var ns6 =（！document.all& & document.getElementById）;
函数show（id）{
// Netscape 4
if（ns4）{
document.layers [id] .visibility =" show";
}
// Explorer 4
否则if（ie4）{
document.all [id] .style.visibility =" visible";
}
// W3C - Explorer 5+和Netscape 6+
else if（ie5 || ns6）{
document.getElementById（id）.styl e.visibility =" visible";
}
}
function hide（id）{
// Netscape 4
if（ns4）{
document.layers [id] .visibility =" hide";
}
//资源管理器4
否则if（ie4）{
document.all [id] .style.visibility =" hidden" ;
}
// W3C - Explorer 5+和Netscape 6+
else if（ie5 || ns6）{
document.getElementById（id）.style.visibility =" hidden";
}
}
函数showPic（whichpic）{
if（document.getElementById）{
document.getElementById（''swap''） .src = whichpic.href;
返回false;
}否则{
返回true;
}
}
函数移动（）{
if（document.getElementById（" slider"）。style.left< 1000 0）
document.getElementById（" slider"）。style.left- = 5
moveid = setTimeout（" moving（）"，50）
}
function stop（）{
clearTimeout（moveid）
}
函数moving2（）{
if（document.getElementById（"） slide.left< 1000 0）
document.getElementById（" slider"）。style.left + = 5
moveid2 = setTimeout（" moving2（&） ），50）
}
函数stop2（）{
clearTimeout（moveid2）
}
< / script>
< meta http-equiv =" Content-Type"含量=" text / html的; charset = iso-8859-1">
< link href =" obtotalcss.css"的rel ="样式表" type =" text / css">
< / head>
< body>
< div class =" bstrip" onMouseOver =" show（''placeholder''）; hide（''gallery''）; h ide（''bio''）; hide（''kamera''）" onMouseOut =" hide（''placeholder''）; show（''gallery''）">< / div>
< div class =" topbar" ; onMouseOver =" show（''placeholder''）; hide（''gallery''）; h ide（''bio''）; hide（''kamera''）" onMouseOut =" hide（''placeholder''）; show（''gallery''）">
< div class =" gallery" ID = QUOT;滑块" > < img src =" images / space.jpg" style =" border：solid 0px;能见度：隐藏;">
< a href =" http://observationist.co.uk/images/mane-1.jpg" onclick =" return showPic（this）">< img src =" images / mane-1-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-2.jpg" onclick =" return showPic（this）">< img src =" images / mane-2-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-3.jpg" onclick =" return showPic（this）">< img src =" images / mane-3-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-4.jpg" onclick =" return showPic（this）">< img src =" images / mane-4-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-5.jpg" onclick =" return showPic（this）">< img src =" images / mane-5-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-6.jpg" onclick =" return showPic（this）">< img src =" images / mane-6-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-7.jpg" onclick =" return showPic（this）">< img src =" images / mane-7-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-8.jpg" onclick =" return showPic（this）">< img src =" images / mane-8-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/mane-9.jpg" onclick =" return showPic（this）">< img src =" images / mane-9-th.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/ponies.jpg" onclick =" return showPic（this）">< img src =" thumb / ponies.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/snowman.jpg" onclick =" return showPic（this）">< img src =" thumb / snowman.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/cream-tea.jpg" onclick =" return showPic（this）">< img src =" thumb / cream-tea.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/masks.jpg" onclick =" return showPic（this）">< img src =" thumb / masks.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/turrets.jpg" onclick =" return showPic（this）">< img src =" thumb / turrets.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/wetleaves.jpg" onclick =" return showPic（this）">< img src =" thumb / wetleaves.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/innerplant.jpg" onclick =" return showPic（this）">< img src =" thumb / innerplant.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/beachflower.jpg" onclick =" return showPic（this）">< img src =" thumb / beachflower.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/elephantgod.jpg" onclick =" return showPic（this）">< img src =" thumb / elephantgod.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/lookather.jpg" onclick =" return showPic（this）">< img src =" thumb / lookather.jpg"边界=" 0" >< / A>
< a href =" http://observationist.co.uk/images/templeflowers.jpg" onclick =" return showPic（this）">< img src =" thumb / templeflowers.jpg"边界=" 0" >< / A>
< / div>
< / div>
< div class =" botbarl" >
< img src =" images / logo5.jpg" style =" border：solid 0px;">
< br>< br>< br>
< a href ="＃" ;的onClick = QUOT;显示（生物）;隐藏（ KAMERA）;隐藏（画廊）;隐藏（占位符）" >传记< / A> < br>
< a href ="＃"的onClick = QUOT;显示（ KAMERA）;隐藏（生物）; hide（''gallery''）;隐藏（占位符）" >展览< / A> < br>
< a href =" mailto：keith@keithdavey.wanadoo.co.uk" >联系< / a>< br>
< / div>
< div class =" screen" ID = QUOT;占位符"风格= QUOT;能见度：可见; vertical-align：middle;边界：0像素;">
< img src =" images / kdavey.jpg" style =" vertical-align：middle; border：solid #aaaaaa 10px;" ID = QUOT;交换">
< / div>
< div class =" screen" ID = QUOT;画廊"风格= QUOT;背景图像：网址（图像/ kdavey.jpg）; background-repeat：no-repeat; border：solid 10px #aaaaaa;" >
< p class =" gallerytext">要滚动缩略图，请将鼠标放在箭头上，或者使用屏幕底部的滚动条。 < br>
< br>
点击thumnail查看更大版本的图片。保持你的鼠标
超过所选图像，直到veiwed。 < / p>
< / div>
< div class =" screen" ID = QUOT;生物" style =" background-image：url（images / portrait.jpg）; background-repeat：no-repeat;" >
< p class =" biotext">基思是皮姆利科艺术与媒体计划的一部分。他的
作品在伦敦各地的画廊和艺术空间展出。他是TimeOut的贡献者，他的作品定期发布在QXmagazine。他的图像
经常被伦敦的俱乐部制造商制定的规则用于其主要广告活动的许多
。 < / p>
< / div>
< div class =" screen" ID = QUOT; KAMERA" style =" background-image：url（images / exhibitions-2.jpg）; background-repeat：no-repeat;" >
< p class =" extext"> < span style =" color：000000; font-size：15px">''Shop Girls''< br>
2006年7月的盒子< br>
32-34 Monmouth Street，Seven Dials ，考文特花园< / span>< br>
< a style ="颜色：000000;字体大小：15px的" href =" http://maps.google.com/maps?q = WWW.BOXBAR.COM +无。& sll = 51.513804，-0.127491& spn = 0.009197,0.019834& sspn = 0.009681,0.020 878& NUM = 1&安培;开始= 0&安培; HL = EN">
map< / a> < br>
< br>
''Shop Girls''< br>
Blue Room 2005年5月〜2005年6月< ; br>
3，Bateman st。 Soho London< br>
< br>
''Shop Girls''< br>
Green March 2005~ April 2005< ; br>
74，Upper st。 Islington London N1< br>
< br>
''Leche-Vitrines''< br>
Freedom Soho 2004年12月〜 2005年2月< br>
66，Wardour st。伦敦W1F 0TA< br>
< br>
< / p>
< / div>
< div class =" arr"的onmouseout = QUOT;停止（）" onMouseOver =" moving（）; show（''placeholder''）; hide（''la llery''）; hide（''bio''）; hide（''kamera''）" >
< img src =" images / rightarrow.gif" >
< / div>
< div class =" arl"的onmouseout = QUOT;停止2（）" onMouseOver =" moving2（）; show（''placeholder''）; hide（''g allery''）; hide（''bio''）; hide（''kamera''）" >
< img src =" images / leftarrow.gif">
< / div>
< / body>
< / html>
我去了你链接你的图像和工作的网站... firefox 2.0.0.6
Hello everyone. If anyone can give me a hand I would be gratefull
Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE from Netscape. IE is ok but the Netscape browser including Firefox and Safari are not working now. Not sure why. The idea is that when you mouseover the arrows the gallery div moves to left and right.
I have changed the script and now the image does move five pixel one way and then stops. The TimeOut does not seem to be working or something is stopping the function from running.
Here it is
<html>
<head>
<title>observationist</title>
<script type="text/javascript">
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
function show(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "visible";
}
}
function hide(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
}
}
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById(''swap'').src = whichpic.href;
return false;
} else {
return true;
}
}
function moving(){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left-=5
moveid=setTimeout("moving()",50)
}
function stop(){
clearTimeout(moveid)
}
function moving2(id){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left+=5
moveid2=setTimeout("moving2()",50)
}
function stop2(){
clearTimeout(moveid2)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="obtotalcss.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bstrip" onMouseOver="show(''placeholder''),hide(''gallery''),h ide(''bio''),hide(''kamera'')" onMouseOut="hide(''placeholder''),show(''gallery'')"></div>
<div class="topbar" onMouseOver="show(''placeholder''),hide(''gallery''),h ide(''bio''),hide(''kamera'')" onMouseOut="hide(''placeholder''),show(''gallery'')">
<div class="gallery" id="slider" > <img src="images/space.jpg" style="border: solid 0px; visibility:hidden;">
<a href="http://observationist.co.uk/images/mane-1.jpg" onclick="return showPic(this)"><img src="images/mane-1-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-2.jpg" onclick="return showPic(this)"><img src="images/mane-2-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-3.jpg" onclick="return showPic(this)"><img src="images/mane-3-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-4.jpg" onclick="return showPic(this)"><img src="images/mane-4-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-5.jpg" onclick="return showPic(this)"><img src="images/mane-5-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-6.jpg" onclick="return showPic(this)"><img src="images/mane-6-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-7.jpg" onclick="return showPic(this)"><img src="images/mane-7-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-8.jpg" onclick="return showPic(this)"><img src="images/mane-8-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-9.jpg" onclick="return showPic(this)"><img src="images/mane-9-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/ponies.jpg" onclick="return showPic(this)"><img src="thumb/ponies.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/snowman.jpg" onclick="return showPic(this)"><img src="thumb/snowman.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/cream-tea.jpg" onclick="return showPic(this)"><img src="thumb/cream-tea.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/masks.jpg" onclick="return showPic(this)"><img src="thumb/masks.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/turrets.jpg" onclick="return showPic(this)"><img src="thumb/turrets.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/wetleaves.jpg" onclick="return showPic(this)"><img src="thumb/wetleaves.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/innerplant.jpg" onclick="return showPic(this)"><img src="thumb/innerplant.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/beachflower.jpg" onclick="return showPic(this)"><img src="thumb/beachflower.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/elephantgod.jpg" onclick="return showPic(this)"><img src="thumb/elephantgod.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/lookather.jpg" onclick="return showPic(this)"><img src="thumb/lookather.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/templeflowers.jpg" onclick="return showPic(this)"><img src="thumb/templeflowers.jpg" border="0" ></a>
</div>
</div>
<div class="botbarl" >
<img src="images/logo5.jpg" style="border:solid 0px ;">
<br><br><br>
<a href="#" onClick="show(''bio''), hide(''kamera''), hide(''gallery''),hide(''placeholder'')" >biography</a> <br>
<a href="#" onClick="show(''kamera''), hide(''bio''),hide(''gallery'') ,hide(''placeholder'')" >exhibitions</a> <br>
<a href="mailto:keith@keithdavey.wanadoo.co.uk" >contact</a><br>
</div>
<div class="screen" id="placeholder" style="visibility:visible; vertical-align: middle; border:0px;">
<img src="images/kdavey.jpg" style="vertical-align: middle; border:solid #aaaaaa 10px;" id="swap">
</div>
<div class="screen" id="gallery" style="background-image:url(images/kdavey.jpg); background-repeat: no-repeat; border:solid 10px #aaaaaa;" >
<p class="gallerytext">To scroll through the thumbnail pictures place your mouse
over the arrows, or use the scrollbar at the bottom of the screen. <br>
<br>
Click on the thumnail to see a larger version of the image. Keep your mouse
over the chosen image, until veiwed. </p>
</div>
<div class="screen" id="bio" style="background-image: url(images/portrait.jpg);background-repeat: no-repeat;" >
<p class="biotext"> Keith was part of The Pimlico Arts and Media Scheme. His
work is shown in galleries and art spaces throughout London. He is a contributor
to TimeOut, and his work is regularly published in QXmagazine. His imagery
is frequently used by London based clubwear manufacturer ''Regulation'' in many
of their major advertising campaigns. </p>
</div>
<div class="screen" id="kamera" style="background-image: url(images/exhibitions-2.jpg);background-repeat: no-repeat;" >
<p class="extext"> <span style="color:000000; font-size:15px">''Shop Girls''<br>
The Box throughout July 2006<br>
32-34 Monmouth Street, Seven Dials, Covent Garden</span><br>
<a style="color:000000; font-size:15px" href="http://maps.google.com/maps?q=WWW.BOXBAR.COM+None.&sll=51.513804,-0.127491&spn=0.009197,0.019834&sspn=0.009681,0.020 878&num=1&start=0&hl=en">
map</a> <br>
<br>
''Shop Girls''<br>
The Blue Room May 2005 ~ June 2005<br>
3, Bateman st. Soho London<br>
<br>
''Shop Girls''<br>
The Green March 2005 ~ April 2005<br>
74, Upper st. Islington London N1<br>
<br>
''Leche-Vitrines''<br>
Freedom Soho Dec 2004 ~ Feb.2005<br>
66, Wardour st. London W1F 0TA<br>
<br>
</p>
</div>
<div class="arr" onMouseOut="stop()" onMouseOver="moving(),show(''placeholder''),hide(''ga llery''),hide(''bio''),hide(''kamera'')" >
<img src="images/rightarrow.gif" >
</div>
<div class="arl" onMouseOut="stop2()" onMouseOver="moving2(),show(''placeholder''),hide(''g allery''),hide(''bio''),hide(''kamera'')" >
<img src="images/leftarrow.gif">
</div>
</body>
</html>
i was able to get it working in firefox, you have mixed up your semi-colons with commas.
yours:
[html]
<div class="topbar" onMouseOver="show(''placeholder''),hide(''gallery''),h ide(''bio''),hide(''kamera'')" onMouseOut="hide(''placeholder''),show(''gallery'')">
[/html]
should be:
[html]
<div class="topbar" onMouseOver="show(''placeholder'');hide(''gallery'');h ide(''bio'');hide(''kamera'');" onMouseOut="hide(''placeholder'');show(''gallery'');">
[/html]
you have to change all of them and your code will work.
good luck
Hey thanks for a quick response.
I tried swapping over the commas for the colons but doesnt do anything.. Maybe you have a different version of firefox ?? Or maybe I have done something to the JS in the meantime. Could I trouble you to take a second look and maybe past me what you have which works in firefox. I was hoping you were right and it was a simple solution, but has not made any difference.
Thanks Chris
x
<html>
<head>
<title>observationist</title>
<script type="text/javascript">
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
function show(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "visible";
}
}
function hide(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
}
}
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById(''swap'').src = whichpic.href;
return false;
} else {
return true;
}
}
function moving(){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left-=5
moveid=setTimeout("moving()",50)
}
function stop(){
clearTimeout(moveid)
}
function moving2(){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left+=5
moveid2=setTimeout("moving2()",50)
}
function stop2(){
clearTimeout(moveid2)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="obtotalcss.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bstrip" onMouseOver="show(''placeholder'');hide(''gallery'');h ide(''bio'');hide(''kamera'')" onMouseOut="hide(''placeholder'');show(''gallery'')"></div>
<div class="topbar" onMouseOver="show(''placeholder'');hide(''gallery'');h ide(''bio'');hide(''kamera'')" onMouseOut="hide(''placeholder'');show(''gallery'')">
<div class="gallery" id="slider" > <img src="images/space.jpg" style="border: solid 0px; visibility:hidden;">
<a href="http://observationist.co.uk/images/mane-1.jpg" onclick="return showPic(this)"><img src="images/mane-1-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-2.jpg" onclick="return showPic(this)"><img src="images/mane-2-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-3.jpg" onclick="return showPic(this)"><img src="images/mane-3-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-4.jpg" onclick="return showPic(this)"><img src="images/mane-4-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-5.jpg" onclick="return showPic(this)"><img src="images/mane-5-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-6.jpg" onclick="return showPic(this)"><img src="images/mane-6-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-7.jpg" onclick="return showPic(this)"><img src="images/mane-7-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-8.jpg" onclick="return showPic(this)"><img src="images/mane-8-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-9.jpg" onclick="return showPic(this)"><img src="images/mane-9-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/ponies.jpg" onclick="return showPic(this)"><img src="thumb/ponies.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/snowman.jpg" onclick="return showPic(this)"><img src="thumb/snowman.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/cream-tea.jpg" onclick="return showPic(this)"><img src="thumb/cream-tea.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/masks.jpg" onclick="return showPic(this)"><img src="thumb/masks.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/turrets.jpg" onclick="return showPic(this)"><img src="thumb/turrets.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/wetleaves.jpg" onclick="return showPic(this)"><img src="thumb/wetleaves.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/innerplant.jpg" onclick="return showPic(this)"><img src="thumb/innerplant.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/beachflower.jpg" onclick="return showPic(this)"><img src="thumb/beachflower.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/elephantgod.jpg" onclick="return showPic(this)"><img src="thumb/elephantgod.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/lookather.jpg" onclick="return showPic(this)"><img src="thumb/lookather.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/templeflowers.jpg" onclick="return showPic(this)"><img src="thumb/templeflowers.jpg" border="0" ></a>
</div>
</div>
<div class="botbarl" >
<img src="images/logo5.jpg" style="border:solid 0px ;">
<br><br><br>
<a href="#" onClick="show(''bio''); hide(''kamera''); hide(''gallery'');hide(''placeholder'')" >biography</a> <br>
<a href="#" onClick="show(''kamera''); hide(''bio''); hide(''gallery'') ; hide(''placeholder'')" >exhibitions</a> <br>
<a href="mailto:keith@keithdavey.wanadoo.co.uk" >contact</a><br>
</div>
<div class="screen" id="placeholder" style="visibility:visible; vertical-align: middle; border:0px;">
<img src="images/kdavey.jpg" style="vertical-align: middle; border:solid #aaaaaa 10px;" id="swap">
</div>
<div class="screen" id="gallery" style="background-image:url(images/kdavey.jpg); background-repeat: no-repeat; border:solid 10px #aaaaaa;" >
<p class="gallerytext">To scroll through the thumbnail pictures place your mouse
over the arrows, or use the scrollbar at the bottom of the screen. <br>
<br>
Click on the thumnail to see a larger version of the image. Keep your mouse
over the chosen image, until veiwed. </p>
</div>
<div class="screen" id="bio" style="background-image: url(images/portrait.jpg);background-repeat: no-repeat;" >
<p class="biotext"> Keith was part of The Pimlico Arts and Media Scheme. His
work is shown in galleries and art spaces throughout London. He is a contributor
to TimeOut, and his work is regularly published in QXmagazine. His imagery
is frequently used by London based clubwear manufacturer ''Regulation'' in many
of their major advertising campaigns. </p>
</div>
<div class="screen" id="kamera" style="background-image: url(images/exhibitions-2.jpg);background-repeat: no-repeat;" >
<p class="extext"> <span style="color:000000; font-size:15px">''Shop Girls''<br>
The Box throughout July 2006<br>
32-34 Monmouth Street, Seven Dials, Covent Garden</span><br>
<a style="color:000000; font-size:15px" href="http://maps.google.com/maps?q=WWW.BOXBAR.COM+None.&sll=51.513804,-0.127491&spn=0.009197,0.019834&sspn=0.009681,0.020 878&num=1&start=0&hl=en">
map</a> <br>
<br>
''Shop Girls''<br>
The Blue Room May 2005 ~ June 2005<br>
3, Bateman st. Soho London<br>
<br>
''Shop Girls''<br>
The Green March 2005 ~ April 2005<br>
74, Upper st. Islington London N1<br>
<br>
''Leche-Vitrines''<br>
Freedom Soho Dec 2004 ~ Feb.2005<br>
66, Wardour st. London W1F 0TA<br>
<br>
</p>
</div>
<div class="arr" onMouseOut="stop()" onMouseOver="moving();show(''placeholder'');hide(''ga llery'');hide(''bio'');hide(''kamera'')" >
<img src="images/rightarrow.gif" >
</div>
<div class="arl" onMouseOut="stop2()" onMouseOver="moving2();show(''placeholder'');hide(''g allery'');hide(''bio'');hide(''kamera'')" >
<img src="images/leftarrow.gif">
</div>
</body>
</html>
i went to the site where you are linking your images from and its working...firefox 2.0.0.6
这篇关于DHTML移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
