Full version: jsB@nk » Menu » Navigation » AniNav: pop-up-menu and slideshow all in one
URL: https://www.javascriptbank.com/aninav.html
Combination of pop-up-menu and slideshow. By default the slideshow will scroll from bottom to top pausing between each image. If the visitor clicks on a menu-item the slideshow will be hidden and the submenu-links will be displayed. After some time the slideshow appears again. More features: each image may be linked separately. Most elements can be configured without programming-knowledge inside the head-scetion of the script: background-color, borderwidth, scrollerwidth, scrollerheight, pause between the images and so on.
Full version: jsB@nk » Menu » Navigation » AniNav: pop-up-menu and slideshow all in one
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