一个特帅的展示图片的js+css

<P><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=it dir=ltr xml:lang="it" 
xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<TITLE>CSS+JS控制图片展示</TITLE>
<STYLE>
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 70% </P>
<P>Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000; PADDING-TOP: 0px; TEXT-</P>
<P>ALIGN: center
}
#outer {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/images/bg-outer.gif) </P>
<P>repeat-y center top; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 780px; PADDING-</P>
<P>TOP: 0px; TEXT-ALIGN: left
}
#wrapper {
 BACKGROUND: #fff; MARGIN: 0px 4px
}
#content {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MIN-HEIGHT: 400px; PADDING-BOTTOM: 20px; </P>
<P>MARGIN: 20px 30px; PADDING-TOP: 0px; POSITION: relative
}
#focus {
 BORDER-RIGHT: #ccc 2px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ccc 2px solid; </P>
<P>PADDING-LEFT: 0px; MIN-HEIGHT: 188px; BACKGROUND: url(/images/tile.gif) #eee repeat</P>
<P>-y left top; PADDING-BOTTOM: 10px; MARGIN: 25px 0px 30px; BORDER-LEFT: #ccc 2px </P>
<P>solid; WIDTH: 100%; PADDING-TOP: 15px; BORDER-BOTTOM: #ccc 2px solid; POSITION: </P>
<P>relative; HEIGHT: 188px
}
#beni {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; </P>
<P>WIDTH: 250px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 15px
}
#beni LI {
 BORDER-TOP: #fff 1px solid; FONT-SIZE: 12px; FLOAT: left; WIDTH: 250px; TEXT-</P>
<P>INDENT: 24px; LINE-HEIGHT: 26px
}
#beni LI.first {
 BORDER-TOP: 0px
}
#beni LI A {
 BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; PADDING-</P>
<P>LEFT: 0px; FONT-WEIGHT: bold; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN: 0px; </P>
<P>BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none
}
#beni LI A:hover {
 BACKGROUND: #f9f9f9
}
</STYLE>
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20type%3D%22text%2Fjavascript%22%3E%0D%0Afunction%20addLoadEvent(func)%20%7B%0D%0A%20var%20oldonload%20%3D%20window.onload%3B%0D%0A%20if%20(typeof%20window.onload%20!%3D%20'function')%20%7B%0D%0A%20%20window.onload%20%3D%20func%3B%0D%0A%20%7D%20else%20%7B%0D%0A%20%20window.onload%20%3D%20function()%20%7B%0D%0A%20%20oldonload()%3B%0D%0A%20%20func()%3B%0D%0A%20%20%7D%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20insertAfter(newelement%2Cexistingelement)%20%7B%0D%0A%20var%20parentelement%20%3D%20existingelement.parentNode%3B%0D%0A%20if%20(parentelement.lastChild%20%3D%3D%20existingelement)%20%7B%0D%0A%20%20return%20parentelement.appendChild(newelement)%3B%0D%0A%20%7D%20else%20%7B%0D%0A%20%20return%0D%0A%20parentelement.insertBefore(newelement%2Cexistingelement.nextSibling)%3B%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20makeSlideshow(details%2Ccoords%2Clinkholder)%20%7B%0D%0A%20if%20(!document.getElementById)%20return%20false%3B%0D%0A%20if%20(!document.getElementById(linkholder))%20return%20false%3B%0D%0A%20var%20pane%20%3D%20document.createElement('div')%3B%0D%0A%20pane.style.width%20%3D%20details%5B'width'%5D%3B%0D%0A%20pane.style.height%20%3D%20details%5B'height'%5D%3B%0D%0A%20pane.style.overflow%20%3D%20'hidden'%3B%0D%0A%20%2F%2Fpane.className%20%3D%20'descrizione'%3B%0D%0A%20pane.style.position%20%3D%20'relative'%3B%0D%0A%20pane.style.top%20%3D%20'0px'%3B%0D%0A%20pane.style.left%20%3D%20'270px'%3B%0D%0A%20pane.setAttribute('id'%2C'descrizione')%3B%0D%0A%20var%20pic%20%3D%20document.createElement('img')%3B%0D%0A%20pic.setAttribute('id'%2Cdetails%5B'id'%5D)%3B%0D%0A%20pic.setAttribute('src'%2Cdetails%5B'image'%5D)%3B%0D%0A%20pic.setAttribute('alt'%2C'')%3B%0D%0A%20pic.style.position%20%3D%20'absolute'%3B%0D%0A%20pane.appendChild(pic)%3B%0D%0A%20var%20l_beni%20%3D%20document.getElementById(linkholder)%3B%0D%0A%20l_beni.parentNode.insertBefore(pane%2Cl_beni)%3B%0D%0A%20var%20lnks%20%3D%20l_beni.getElementsByTagName('a')%3B%0D%0A%20for%20(var%20i%3D0%3Bi%3Clnks.length%3Bi%2B%2B)%20%7B%0D%0A%20%20var%20linktext%20%3D%20lnks%5Bi%5D.childNodes%5B0%5D.nodeValue%3B%0D%0A%20%20if%20(coords%5Blinktext%5D)%20%7B%0D%0A%20%20%20lnks%5Bi%5D.elementId%20%3D%20details%5B'id'%5D%3B%0D%0A%20%20%20lnks%5Bi%5D.x%20%3D%20coords%5Blinktext%5D%5B0%5D%3B%0D%0A%20%20%20lnks%5Bi%5D.y%20%3D%20coords%5Blinktext%5D%5B1%5D%3B%0D%0A%20%20%20lnks%5Bi%5D.sliding%20%3D%20null%3B%0D%0A%20%20%20lnks%5Bi%5D.onmouseover%20%3D%20function()%20%7B%0D%0A%20%20%20%20slideElement(this.elementId%2Cthis.x%2Cthis.y%2C6)%3B%0D%0A%20%20%20%7D%0D%0A%20%20%20lnks%5Bi%5D.onfocus%20%3D%20lnks%5Bi%5D.onmouseover%3B%0D%0A%20%20%7D%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20slideElement(elementId%2Cx%2Cy%2Cinc)%20%7B%0D%0A%20if%20(!document.getElementById)%20return%20false%3B%0D%0A%20if%20(!document.getElementById(elementId))%20return%20false%3B%0D%0A%20var%20element%20%3D%20document.getElementById(elementId)%3B%0D%0A%20if%20(element.sliding)%20clearTimeout(element.sliding)%3B%0D%0A%20if%20(!element.xpos)%20element.xpos%20%3D%200%3B%0D%0A%20if%20(!element.ypos)%20element.ypos%20%3D%200%3B%0D%0A%20if%20(element.xpos%20%3D%3D%20x%20%26%26%20element.ypos%20%3D%3D%20y)%20return%20true%3B%0D%0A%20if%20(element.xpos%20%3E%20x)%20%7B%0D%0A%20%20var%20dist%20%3D%20Math.ceil((element.xpos-x)%2Finc)%3B%0D%0A%20%20element.xpos%20%3D%20element.xpos%20-%20dist%3B%0D%0A%20%7D%0D%0A%20if%20(element.xpos%20%3C%20x)%20%7B%0D%0A%20%20var%20dist%20%3D%20Math.ceil((x-element.xpos)%2Finc)%3B%0D%0A%20%20element.xpos%20%3D%20element.xpos%20%2B%20dist%3B%0D%0A%20%7D%0D%0A%20if%20(element.ypos%20%3E%20y)%20%7B%0D%0A%20%20var%20dist%20%3D%20Math.ceil((element.ypos-y)%2Finc)%3B%0D%0A%20%20element.ypos%20%3D%20element.ypos%20-%20dist%3B%0D%0A%20%7D%0D%0A%20if%20(element.ypos%20%3C%20y)%20%7B%0D%0A%20%20var%20dist%20%3D%20Math.ceil((y-element.ypos)%2Finc)%3B%0D%0A%20%20element.ypos%20%3D%20element.ypos%20%2B%20dist%3B%0D%0A%20%7D%0D%0A%20element.style.left%20%3D%20element.xpos%2B'px'%3B%0D%0A%20element.style.top%20%3D%20element.ypos%2B'px'%3B%0D%0A%20element.sliding%20%3D%20setTimeout('slideElement%3C%2FP%3E%0D%0A%3CP%3E(%22'%2BelementId%2B'%22%2C'%2Bx%2B'%2C'%2By%2B'%2C'%2Binc%2B')'%2C10)%3B%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3E%2F*%20Focus%20Beni%20*%2F%0D%0AaddLoadEvent(showbeni)%3B%0D%0Afunction%20showbeni()%20%7B%0D%0A%20if%20(!document.getElementById)%20return%20false%3B%0D%0A%20if%20(!document.getElementById('beni'))%20return%20false%3B%0D%0A%20var%20panel_details%20%3D%20new%20Array()%3B%0D%0A%20panel_details%5B'id'%5D%20%3D%20'pic'%3B%0D%0A%20panel_details%5B'image'%5D%20%3D%20'http%3A%2F%2Fwww.mhcy.net%2Fhtml%2Fcss%2Bjs_photo%2Fimages%2Ffocus.jpg'%3B%0D%0A%20panel_details%5B'width'%5D%20%3D%20'420px'%3B%0D%0A%20panel_details%5B'height'%5D%20%3D%20'188px'%3B%0D%0A%20var%20coords%20%3D%20new%20Array()%3B%0D%0A%20coords%5B'default'%5D%20%3D%20new%20Array(0%2C0)%3B%0D%0A%20coords%5B'Opere%20e%20oggetti%20d%5C'arte'%5D%20%3D%20new%20Array(0%2C-188)%3B%0D%0A%20coords%5B'Architetture'%5D%20%3D%20new%20Array(0%2C%20-376)%3B%0D%0A%20coords%5B'Reperti%20archeologici'%5D%20%3D%20new%20Array(0%2C-564)%3B%0D%0A%20coords%5B'Stampe%20e%20matrici%20di%20incisione'%5D%20%3D%20new%20Array(0%2C-752)%3B%0D%0A%20coords%5B'Fotografie'%5D%20%3D%20new%20Array(0%2C-940)%3B%0D%0A%20coords%5B'Beni%20etnoantropologici'%5D%20%3D%20new%20Array(0%2C-1128)%3B%0D%0A%20var%20linkholder%20%3D%20'beni'%3B%0D%0A%20makeSlideshow(panel_details%2Ccoords%2Clinkholder)%3B%0D%0A%7D%0D%0A%3C%2FSCRIPT%3E">
</HEAD></P>
<P><BODY id=home>
<DIV id=outer>
<DIV id=wrapper>
   <DIV id=content>
  <DIV id=focus>
   <UL id=beni>
     <LI class=first><A href="#" _ewebeditor_ta_href="%23">Opere e oggetti d'arte</A></LI>
     <LI><A href="#" _ewebeditor_ta_href="%23">Architetture</A></LI>
     <LI><A href="#" _ewebeditor_ta_href="%23">Reperti archeologici</A></LI>
     <LI><A href="#" _ewebeditor_ta_href="%23">Stampe e matrici di incisione</A></LI>
     <LI><A href="#" _ewebeditor_ta_href="%23">Fotografie</A></LI>
     <LI><A href="#" _ewebeditor_ta_href="%23">Beni etnoantropologici</A></LI>
   </UL>
  </DIV>
 </DIV>
</DIV>
</DIV>
</BODY>
</HTML></P>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程