DHTML移动图像 | Onmouseout

< 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：[email protected]" >联系< / 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 gratefullAm 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 4if(ns4){document.layers[id].visibility = "show";}// Explorer 4else 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 4if(ns4){document.layers[id].visibility = "hide";}// Explorer 4else 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:[email protected]" >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 luckHey 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 Chrisx<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 4if(ns4){document.layers[id].visibility = "show";}// Explorer 4else 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 4if(ns4){document.layers[id].visibility = "hide";}// Explorer 4else 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:[email protected]" >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移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！