Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » AniNav
URL: https://www.javascriptbank.com/aninav.html
Hiệu ứng tạo một trình đơn bằng cách sử dụng hình ảnh làm các mục chọn, mỗ khi người dùng rê con trỏ chuột đến các mục chọn thì sẽ có chú thích tương ứng trượt từ dưới lên để chú giải.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » AniNav
URL: https://www.javascriptbank.com/aninav.html
<SCRIPT language=JavaScript1.2>// AniNav: pop-up-menu and slideshow all in one// INSTALLATION:// 1.Delete the DIV-container with the id 'deletethisdiv'. //This is the only part of this file that is not required for the script. //Save the rest of the code as HTML-file.// 2.Go to the body-section and add or delete as many DIV-blocks as you //need for your menu (call them menu1, menu2, menu3 and so on). These DIV-blocks//will stuffed with your submenus later on by the script. //So if you have 6 menu-items you need 6 DIV-blocks.// 3.Now let's do to the visual-creative job!//Create an imagemap with your your buttons (menu-items)//If you do not know what an imagemap is and//how you can create one then you are lost - unless you //have a nice granny or your uncle who can explain it to you. Sorry folks!//Call this imagemap 'imgnewsnav.gif' and put it inside the //DIV-block with the id="scrollerbgimg".// 4.Insert <a href="javascript:showmenu('menuX')"> inside the href-tags of your //imagemap-hotspots. Replace the X with the correct number of the menu-item.// 5. Configure the size and position of your textfield positioned upon//your imagemap. This is quite tricky. Yet trial and error will do it for you.//You will find all necessary parameters on the top of the script.// 6.Configure the images of your slideshow as follows //imgname[x]="yourimage.jpg|http://www.yourlink.com"// 7.Configure the menu_X Arrays in the same way as shown above with the images.// 8.Configure the variables below:var imgname= new Array()// Please read section 5 above on how the images have to be configured.// You may add as many images as you like!// Configure and separate each images exactly as follows: // imgname[x]="yourimagename.jpg|http://www.yourlink.com"imgname[0]="../image/logojs.gif|http://JavaScriptBank.com"imgname[1]="../image/logojs.gif|http://JavaScriptBank.com"imgname[2]="../image/logojs.gif|http://JavaScriptBank.com"imgname[3]="../image/logojs.gif|http://JavaScriptBank.com"imgname[4]="../image/logojs.gif|http://JavaScriptBank.com"// Configure text|URL the of menu1var menu_1= new Array()menu_1[0]="Ferrari Boss happy|http://JavaScriptBank.com"menu_1[1]="Lotus comes back|http://JavaScriptBank.com"menu_1[2]="Testarossa revival|http://JavaScriptBank.com"menu_1[3]="Long good-bye|http://JavaScriptBank.com"// Configure text|URL the of menu2var menu_2= new Array()menu_2[0]="Headhunter requested|http://JavaScriptBank.com"menu_2[1]="Maddest Scripts|http://JavaScriptBank.com"menu_2[2]="Scripters jailed|http://JavaScriptBank.com"menu_2[3]="Link thrill|http://JavaScriptBank.com"// Configure text|URL the of menu3var menu_3= new Array()menu_3[0]="Herbert R. Miller|http://JavaScriptBank.com"menu_3[1]="Ronny D. Smartegg|http://JavaScriptBank.com"menu_3[2]="Lisa Warner jun.|http://JavaScriptBank.com"// Configure text|URL the of menu4var menu_4= new Array()menu_4[0]="Give me a call|http://JavaScriptBank.com"menu_4[1]="Fax your comments|http://JavaScriptBank.com"menu_4[2]="Mail your compliments|http://JavaScriptBank.com"menu_4[3]="Shut up please|http://JavaScriptBank.com"// Configure text|URL the of menu5var menu_5= new Array()menu_5[0]="Long round desk|http://JavaScriptBank.com"menu_5[1]="Short fat desk|http://JavaScriptBank.com"// Configure text|URL the of menu6var menu_6= new Array()menu_6[0]="Silly question?|http://JavaScriptBank.com"menu_6[1]="Silly answers?|http://JavaScriptBank.com"menu_6[2]="Silly scripts?|http://JavaScriptBank.com"menu_6[3]="Why am I so silly|http://JavaScriptBank.com"// The height of the imagefield (pixels)var scrollerheight=60// The width of the imagefield (pixels)var scrollerwidth=140// The distance to the top border of the window (pixels)var scrollertop=60// The distance to the left border of the window (pixels)var scrollerleft=180// The background-image's (imagemap's) horizontal shift in relation to the imagefield (pixels)var leftdif=160// The background-image's (imagemap's) vertical shift in relation to the imagefield (pixels)var topdif=38// Font attributes of the submenu-linksvar font_linkface="Verdana"var font_linkcolor="lightgreen"var font_linksize=1// The targets of the subemusvar linktarget="_blank"// standstill between the images of the slideshow (milliseconds)var standstillfix=3000// how long shall the submenus be visible (milliscronds)var submenutime=5000// the total number of your menu-items (menu-buttons on your imagemap)var buttonnumber=6// Do not edit below this linevar scrollerpadding=0var cliptop=0var clipbottom=scrollerheight-2*scrollerpaddingvar clipleft=0var clipright=scrollerwidthvar backgroundborder=0var i_imgname=0var mes_joinedvar mes_splitvar menu_joinedvar menu_splitvar contenttextvar contentmenuvar contentbgvar scrollerbgcolor="000000"var totalheight=scrollerheight*(imgname.length)var i_height=0var step=1var pause=20var standstillflex=0var imgpreload=new Array()for (i=0;i<=imgname.length-1;i++) {menu_joined=imgname[i]menu_split=menu_joined.split("|")imgpreload[i]=new Image()imgpreload[i].src=menu_split[0]}function initiatemenus(){for (ii=1;ii<=buttonnumber;ii++) {contentmenu="<table cellpadding=0 cellspacing=0 border=0 width="+(scrollerwidth-2*scrollerpadding)+">"contentmenu+="<tr valign='top'><td height='"+scrollerheight+"'>"var thismenu=eval("menu_"+ii)for (i=0;i<=thismenu.length-1;i++) {menu_joined=thismenu[i]menu_split=menu_joined.split("|")contentmenu+="<a href='"+menu_split[1]+"' target='"+linktarget+"'><font face='"+font_linkface+"' color='"+font_linkcolor+"' size='"+font_linksize+"'>"+menu_split[0]+"</font></a><br>"}contentmenu+="</td></tr>"contentmenu+="</table>"if (document.all) {var thismenudiv=eval("document.all.menu"+ii+".style")var thisinnerhtml=eval("menu"+ii)thisinnerhtml.innerHTML=contentmenuthismenudiv.posTop=scrollertopthismenudiv.posLeft=scrollerleft}if (document.layers) {var thismenudiv=eval("document.menu"+ii)thismenudiv.document.write(contentmenu)thismenudiv.document.close()thismenudiv.top=scrollertopthismenudiv.left=scrollerleft}contentmenu=""}initiatescroller()}function initiatescroller(){contenttext="<table cellpadding=0 cellspacing=0 border=0 width="+(scrollerwidth-2*scrollerpadding)+">"contenttext+="<tr valign='top'><td height='"+scrollerheight+"'><br></td></tr>"for (i=0;i<=imgname.length-1;i++) {mes_joined=imgname[i]mes_split=mes_joined.split("|")contenttext+="<tr valign='top'><td height='"+scrollerheight+"'><a href='"+mes_split[1]+"'><img src='"+mes_split[0]+"' border=0></a></td></tr>"}contenttext+="</table>"contentbg="<table cellpadding=0 cellspacing=0 border="+backgroundborder+" width='"+scrollerwidth+"'><tr><td height='"+scrollerheight+"' bgcolor="+scrollerbgcolor+"> </td></tr></table>"if (document.all) {scrollertext.innerHTML=contenttextscrollerbg.innerHTML=contentbgdocument.all.scrollertext.style.posTop=scrollertopdocument.all.scrollertext.style.posLeft=scrollerleftdocument.all.scrollerbg.style.posTop=scrollertop-scrollerpaddingdocument.all.scrollerbg.style.posLeft=scrollerleft-scrollerpaddingdocument.all.scrollerbgimg.style.posTop=scrollertop-scrollerpadding-topdifdocument.all.scrollerbgimg.style.posLeft=scrollerleft-scrollerpadding-leftdifdocument.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"}if (document.layers) {document.scrollertext.document.write(contenttext)document.scrollertext.document.close()document.scrollerbg.document.write(contentbg)document.scrollerbg.document.close()document.scrollertext.top=scrollertopdocument.scrollertext.left=scrollerleftdocument.scrollerbg.top=scrollertop-scrollerpaddingdocument.scrollerbg.left=scrollerleft-scrollerpaddingdocument.scrollerbgimg.top=scrollertop-scrollerpadding-topdifdocument.scrollerbgimg.left=scrollerleft-scrollerpadding-leftdifdocument.scrollertext.clip.left=clipleft document.scrollertext.clip.right=clipright document.scrollertext.clip.top=cliptop document.scrollertext.clip.bottom=clipbottom}scroll()}function scroll(){standstillflex=standstillfixif (document.all){if (i_height<scrollerheight) {i_height+=stepcliptop+=stepclipbottom+=stepdocument.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.scrollertext.style.posTop-=stepvar timer=setTimeout("scroll()",pause)}else {if (document.all.scrollertext.style.posTop<=-(totalheight)) {document.all.scrollertext.style.posTop=scrollertopcliptop=0clipbottom=scrollerheight-2*scrollerpaddingdocument.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"standstillflex=0}i_height=0clearTimeout(timer)var timer=setTimeout("scroll()",standstillflex)}}if (document.layers){if (i_height<scrollerheight) {i_height+=stepcliptop+=stepclipbottom+=stepdocument.scrollertext.clip.left=clipleft document.scrollertext.clip.right=clipright document.scrollertext.clip.top=cliptop document.scrollertext.clip.bottom=clipbottomdocument.scrollertext.top-=stepvar timer=setTimeout("scroll()",pause)}else {if (document.scrollertext.top<=-(totalheight)) {document.scrollertext.top=scrollertopcliptop=0clipbottom=scrollerheight-2*scrollerpaddingdocument.scrollertext.clip.left=clipleft document.scrollertext.clip.right=clipright document.scrollertext.clip.top=cliptop document.scrollertext.clip.bottom=clipbottomstandstillflex=0}i_height=0clearTimeout(timer)var timer=setTimeout("scroll()",standstillflex)}}}function showmenu(whichmenu) {clearTimeout(timer)hidealldivs()if (document.all) {var thismenu=eval("document.all."+whichmenu+".style")thismenu.visibility="VISIBLE"}if (document.layers) {var thismenu=eval("document."+whichmenu)thismenu.visibility="VISIBLE"}var timer=setTimeout("showtextagain()",submenutime)}function hidealldivs() {for (ii=1;ii<=buttonnumber;ii++) {if (document.all) {var thismenudiv=eval("document.all.menu"+ii+".style")thismenudiv.visibility="HIDDEN"}if (document.layers) {var thismenudiv=eval("document.menu"+ii)thismenudiv.visibility="HIDDEN"}}if (document.all) {document.all.scrollertext.style.visibility="HIDDEN"}if (document.layers) {document.scrollertext.visibility="HIDDEN"}}function showtextagain() {for (ii=1;ii<=buttonnumber;ii++) {if (document.all) {var thismenudiv=eval("document.all.menu"+ii+".style")thismenudiv.visibility="HIDDEN"}if (document.layers) {var thismenudiv=eval("document.menu"+ii)thismenudiv.visibility="HIDDEN"}}if (document.all) {document.all.scrollertext.style.visibility="VISIBLE"}if (document.layers) {document.scrollertext.visibility="VISIBLE"}}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=initiatemenus()><DIV id=scrollerbgimg style="POSITION: absolute; TOP: -1000px"> <IMG border=0 src="imgnewsnav.gif" useMap=#menunewsnav width="460" height="118"> <MAP name=menunewsnav><AREA coords=19,35,130,53 href="javascript:showmenu('menu1')" shape=RECT><AREA coords=19,61,131,75 href="javascript:showmenu('menu2')" shape=RECT><AREA coords=19,81,133,99 href="javascript:showmenu('menu3')" shape=RECT><AREA coords=327,36,445,53 href="javascript:showmenu('menu4')" shape=RECT><AREA coords=328,59,442,76 href="javascript:showmenu('menu5')" shape=RECT><AREA coords=327,82,443,97 href="javascript:showmenu('menu6')" shape=RECT><AREA coords=18,5,130,17 href="http://JavaScriptBank.com" shape=RECT target=_blank><AREA coords=329,3,444,19 href="http://JavaScriptBank.com" shape=RECT target=_blank></MAP></DIV><DIV id=scrollerbg style="POSITION: absolute; TOP: -1000px"></DIV><DIV id=scrollertext style="POSITION: absolute; TOP: -1000px"></DIV><DIV id=menu1 style="POSITION: absolute; TOP: -1000px; VISIBILITY: hidden"></DIV><DIV id=menu2 style="POSITION: absolute; TOP: -1000px; VISIBILITY: hidden"></DIV><DIV id=menu3 style="POSITION: absolute; TOP: -1000px; VISIBILITY: hidden"></DIV><DIV id=menu4 style="POSITION: absolute; TOP: -1000px; VISIBILITY: hidden"></DIV><DIV id=menu5 style="POSITION: absolute; TOP: -1000px; VISIBILITY: hidden"></DIV><DIV id=menu6 style="POSITION: absolute; TOP: -1000px; VISIBILITY: hidden"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/menu/imgnewsnav.gif