Js + css of a special handsome Image
<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 control Image Display </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 (/I Mages/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: abso Lute; 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> <SCRIPT type = "text/javascript"> function addLoadEvent (func) {var oldonload = window. onload; if (typeof window. onload! = 'Function') {window. onload = func;} else {window. onload = function () {oldonload (); func () ;}}</P> <P> function insertAfter (newelement, existingelement) {var parentelement = existingelement. parentNode; if (parentelement. lastChild = existingelement) {return parentelement. appendChild (newelement);} else {return parentelement. insertBefore (newelement, existingelement. nextSibling) ;}}</P> <P> funct Ion makeSlideshow (details, coords, linkholder) {if (! Document. getElementById) return false; if (! Document. getElementById (linkholder) return false; var pane = document. createElement ('P'); pane. style. width = details ['width']; pane. style. height = details ['height']; pane. style. overflow = 'hiden '; // pane. className = 'scrizione'; pane. style. position = 'relative '; pane. style. top = '0px '; pane. style. left = '70px '; pane. setAttribute ('id', 'scrizione'); var pic = document. createElement ('img '); pic. SetAttribute ('id', details ['id']); pic. setAttribute ('src', details ['image']); pic. setAttribute ('alt', ''); pic. style. position = 'abort'; pane. appendChild (pic); var l_beni = document. getElementById (linkholder); l_beni.parentNode.insertBefore (pane, l_beni); var lnks = l_beni.getElementsByTagName ('A'); for (var I = 0; I <lnks. length; I ++) {var linktext = lnks [I]. childNodes [0]. nodeValue; if (coords [linkte Xt]) {lnks [I]. elementId = details ['id']; lnks [I]. x = coords [linktext] [0]; lnks [I]. y = coords [linktext] [1]; lnks [I]. sliding = null; lnks [I]. onmouseover = function () {slideElement (this. elementId, this. x, this. y, 6);} lnks [I]. onfocus = lnks [I]. onmouseover ;}}</P> <P> function slideElement (elementId, x, y, inc) {if (! Document. getElementById) return false; if (! Document. getElementById (elementId) return false; var element = document. getElementById (elementId); if (element. sliding) clearTimeout (element. sliding); if (! Element. xpos) element. xpos = 0; if (! Element. ypos) element. ypos = 0; if (element. xpos = x & element. ypos = y) return true; if (element. xpos> x) {var dist = Math. ceil (element. xpos-x)/inc); element. xpos = element. xpos-dist;} if (element. xpos <x) {var dist = Math. ceil (x-element.xpos)/inc); element. xpos = element. xpos + dist;} if (element. ypos> y) {var dist = Math. ceil (element. ypos-y)/inc); element. ypos = element. ypos-di St;} if (element. ypos <y) {var dist = Math. ceil (y-element.ypos)/inc); element. ypos = element. ypos + dist;} element. style. left = element. xpos + 'px '; element. style. top = element. ypos + 'px '; element. sliding = setTimeout ('slideelement </P> <P> ("'+ elementId +'", '+ x +', '+ y +', '+ inc + ') ', 10) ;}</P> <P>/* Focus Beni */addLoadEvent (showbeni); function showbeni () {if (! Document. getElementById) return false; if (! Document. getElementById ('beni') return false; var panel_details = new Array (); panel_details ['id'] = 'pic '; panel_details ['image'] =' http://www.mhcy.net/html/css+js_photo/images/focus.jpg '; Panel_details ['width'] = '420px'; panel_details ['height'] = '188px '; var coords = new Array (); coords ['default'] = new Array (188); coords ['opere e oggetti d \ 'arte'] = new Array (0 ); coords ['deleteture '] = new Array (0,-376); coords ['reperti archeologici'] = new Array (0,-564 ); coords ['stampe e matrici di incisione'] = new Array (0,-752); coords ['fotografie'] = new Array (0,-940 ); coords ['beni etnoantropologici '] = new Array (0,-1128); var linkholder = 'beni'; makeSlideshow (panel_details, coords, linkholder );} SCRIPT </HEAD> </P> <BODY id = home> <UL id = beni> <LI class = first> Opere e oggetti d' arte </ LI> <LI> appsetture </LI> <LI> Reperti archeologici </LI> <LI> Stampe e matrici di incisione </LI> <LI> Fotografie </LI> <LI> Beni etnoantropologici </LI> </UL> </BODY> </HTML> </P>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]