JavaScript - Please Help On How To Control Images With Javascript
Hi,
Ok i want to do the following... I am using blogger and I have thousands of posts and each post topic has a specific image assigned to it but every now and then I like to change the image that is being displayed but then I have to go through thousands of posts to change the image URL and this takes super long to complete. I thought of an idea of using Javascript to control this so I need your help please.. I want to be able to have a JS that I can insert the URL's of each image required for the posts and assign an ID like a number or a name to them, then have a seperate JS script that I can insert in ALL my posts and assign the same number to each related post relating to the image ID... So if I need to change images then all I need to do is change the URL in the Javascript and it affects all the posts that contain this image... hope this makes sense.. Please help Thank you. I have seen code like this but it only randomizes the images but is the same concept, perhaps someone can just alter this code for me please... [CODE] <head> <script language="JavaScript"> <!-- var theImages = new Array() theImages[0] = 'http://lh5.ggpht.com/_MAclvGBXzj4/TEtvnlxvvrI/AAAAAAAABQw/N7UVoBvtjxU/s320/video34.png' theImages[1] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEIZlr5FE6I/AAAAAAAABKU/LoBdw7Kqf3w/s200/Inside-blogger-256.png' theImages[2] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TCHDY788QaI/AAAAAAAAAAU/SnWr-NP0dqE/s200/news.png' theImages[3] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TEwgs_hhcXI/AAAAAAAABQ4/JTX1mzmdQLU/s200/croatia-flag.GIF' theImages[4] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEtzAvpIEQI/AAAAAAAABQ0/RiLAfiUsCiA/s320/warning23.png' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } //--> </script> </head> <body> <script language="JavaScript"> <!-- showImage(); </script> </body> [CODE] Similar TutorialsHi. I'll would like to know how can I control a swf with a FLVPlayback, that it's reading a movie from my server, with Javascript. check the link. it's the second image http://www.luisporem.com/projects/pr...nto_glass.html does anyone knows how? thanks Hello friends... i am working on the healthcare project.In which there are user interactive pages such as registration page,profile page. In registration page to register the portal the birth date of user is required . so i have added the calendar control using javascript. I want that whenever user clicks on the calendar the birth date is displayed in the textfield. but it cannot displayed the birth date... So please tell me the sloution... following is the code for calendar control <p> <meta content="text/html;" http-equiv="Content-Type" /> <style type="text/css"> #calender { width: 200px; font-family: ms sans serif, sans serif; font-size: 7pt; } #calenderTable { border-style: outset; border-width: 2px; border-color: black; background-color: #EEE; display: none; position: absolute; z-index: 1; top: 0px; left: 0px; } #calenderTableHead TR { background-color: #5FB404; } #calenderTableDays TR { background-color: #B40404; color: #E6E6E6; } .normalDay { border: 1px dotted black; cursor: pointer; } .hlDay { border: 1px black; background-color: #585858; color: #E6E6E6; cursor: pointer; } .toDay { border: 1px solid #E70; background-color: #FD8; color: #E70; font-weight: bold; cursor: pointer; } .choosenDay { border: 1px #000000; background-color: #585858; color: #E6E6E6; font-weight: bold; cursor: pointer; } </style> <link rel="stylesheet" type="text/css" href="calendar.css" /> <script language="javaScript" type="text/javascript" src="calendar.js"> // Array of max days in month in a year and in a leap year monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; hideSelectTags = []; function getRealYear(dateObj) { return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900); } function getDaysPerMonth(month, year) { /* Check for leap year. These are some conditions to check year is leap year or not... 1.Years evenly divisible by four are normally leap years, except for... 2.Years also evenly divisible by 100 are not leap years, except for... 3.Years also evenly divisible by 400 are leap years. */ if ((year % 4) == 0) { if ((year % 100) == 0 && (year % 400) != 0) return monthMaxDays[month]; return monthMaxDaysLeap[month]; } else return monthMaxDays[month]; } function createCalender(year, month, day) { // current Date var curDate = new Date(); var curDay = curDate.getDate(); var curMonth = curDate.getMonth(); var curYear = getRealYear(curDate) // if a date already exists, we calculate some values here if (!year) { var year = curYear; var month = curMonth; } var yearFound = 0; for (var i=0; i<document.getElementById('selectYear').options.length; i++) { if (document.getElementById('selectYear').options[i].value == year) { document.getElementById('selectYear').selectedIndex = i; yearFound = true; break; } } if (!yearFound) { document.getElementById('selectYear').selectedIndex = 0; year = document.getElementById('selectYear').options[0].value; } document.getElementById('selectMonth').selectedIndex = month; // first day of the month. var fristDayOfMonthObj = new Date(year, month, 1); var firstDayOfMonth = fristDayOfMonthObj.getDay(); continu = true; firstRow = true; var x = 0; var d = 0; var trs = [] var ti = 0; while (d <= getDaysPerMonth(month, year)) { if (firstRow) { trs[ti] = document.createElement("TR"); if (firstDayOfMonth > 0) { while (x < firstDayOfMonth) { trs[ti].appendChild(document.createElement("TD")); x++; } } firstRow = false; var d = 1; } if (x % 7 == 0) { ti++; trs[ti] = document.createElement("TR"); } if (day && d == day) { var setID = 'calenderChoosenDay'; var styleClass = 'choosenDay'; var setTitle = 'this day is currently selected'; } else if (d == curDay && month == curMonth && year == curYear) { var setID = 'calenderToDay'; var styleClass = 'toDay'; var setTitle = 'this day today'; } else { var setID = false; var styleClass = 'normalDay'; var setTitle = false; } var td = document.createElement("TD"); td.className = styleClass; if (setID) { td.id = setID; } if (setTitle) { td.title = setTitle; } td.onmouseover = new Function('highLiteDay(this)'); td.onmouseout = new Function('deHighLiteDay(this)'); if (targetEl) td.onclick = new Function('pickDate('+year+', '+month+', '+d+')'); else td.style.cursor = 'default'; td.appendChild(document.createTextNode(d)); trs[ti].appendChild(td); x++; d++; } return trs; } function showCalender(elPos, tgtEl) { targetEl = false; if (document.getElementById(tgtEl)) { targetEl = document.getElementById(tgtEl); } else { if (document.forms[0].elements[tgtEl]) { targetEl = document.forms[0].elements[tgtEl]; } } var calTable = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(elPos, positions); calTable.style.left = positions[0]+'px'; calTable.style.top = positions[1]+'px'; calTable.style.display='block'; var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$'); var m = matchDate.exec(targetEl.value); if (m == null) { trs = createCalender(false, false, false); showCalenderBody(trs); } else { if (m[1].substr(0, 1) == 0) m[1] = m[1].substr(1, 1); if (m[2].substr(0, 1) == 0) m[2] = m[2].substr(1, 1); m[2] = m[2] - 1; trs = createCalender(m[3], m[2], m[1]); showCalenderBody(trs); } hideSelect(document.body, 1); } function showCalenderBody(trs) { var calTBody = document.getElementById('calender'); while (calTBody.childNodes[0]) { calTBody.removeChild(calTBody.childNodes[0]); } for (var i in trs) { calTBody.appendChild(trs[i]); } } function setYears(sy, ey) { // current Date var curDate = new Date(); var curYear = getRealYear(curDate); if (sy) startYear = curYear; if (ey) endYear = curYear; document.getElementById('selectYear').options.length = 0; var j = 0; for (y=ey; y>=sy; y--) { document.getElementById('selectYear')[j++] = new Option(y, y); } } function hideSelect(el, superTotal) { if (superTotal >= 100) { return; } var totalChilds = el.childNodes.length; for (var c=0; c<totalChilds; c++) { var thisTag = el.childNodes[c]; if (thisTag.tagName == 'SELECT') { if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear') { var calenderEl = document.getElementById('calenderTable'); var positions = [0,0]; var positions = getParentOffset(thisTag, positions); // nieuw var thisLeft = positions[0]; var thisRight = positions[0] + thisTag.offsetWidth; var thisTop = positions[1]; var thisBottom = positions[1] + thisTag.offsetHeight; var calLeft = calenderEl.offsetLeft; var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth; var calTop = calenderEl.offsetTop; var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight; if ( ( /* check if it overlaps horizontally */ (thisLeft >= calLeft && thisLeft <= calRight) || (thisRight <= calRight && thisRight >= calLeft) || (thisLeft <= calLeft && thisRight >= calRight) ) && ( /* check if it overlaps vertically */ (thisTop >= calTop && thisTop <= calBottom) || (thisBottom <= calBottom && thisBottom >= calTop) || (thisTop <= calTop && thisBottom >= calBottom) ) ) { hideSelectTags[hideSelectTags.length] = thisTag; Tag.style.display = 'none'; } } } else if(thisTag.childNodes.length > 0) { hideSelect(thisTag, (superTotal+1)); } } } function closeCalender() { for (var i=0; i<hideSelectTags.length; i++) { hideSelectTags[i].style.display = 'block'; } hideSelectTags.length = 0; document.getElementById('calenderTable').style.display='none'; } function highLiteDay(el) { el.className = 'hlDay'; } function deHighLiteDay(el) { if (el.id == 'calenderToDay') el.className = 'toDay'; else if (el.id == 'calenderChoosenDay') el.className = 'choosenDay'; else el.className = 'normalDay'; } function pickDate(year, month, day) { month++; day = day < 10 ? '0'+day : day; month = month < 10 ? '0'+month : month; if (!targetEl) { alert('target for date is not set yet'); } else { targetEl.value= day+'-'+month+'-'+year; closeCalender(); } } function getParentOffset(el, positions) { positions[0] += el.offsetLeft; positions[1] += el.offsetTop; if (el.offsetParent) positions = getParentOffset(el.offsetParent, positions); return positions; } </script> <link rel="stylesheet" type="text/css" href="calendar.css" /></p> <form> <input name="datum1" type="text" /><a onClick="setYears(1900, 2020); showCalender(this, 'datum1');" href="#"> <img alt="" width="17" height="13" src="/image/image_gallery?uuid=ad0e28d1-ae91-4535-a558-32d62a7df92e&groupId=10136&t=1294233035464" /></a> </form> <!-- Calender Script --> <table id="calenderTable"> <tbody id="calenderTableHead"> <tr> <td colspan="4" align="center"><select id="selectMonth" onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));"> <option value="0" selected="selected">Jan</option> <option value="1">Feb</option> <option value="2">Mar</option> <option value="3">Apr</option> <option value="4">May</option> <option value="5">Jun</option> <option value="6">Jul</option> <option value="7">Aug</option> <option value="8">Sep</option> <option value="9">Oct</option> <option value="10">Nov</option> <option value="11">Dec</option> </select></td> <td colspan="2" align="center"><select id="selectYear" onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));"></select></td> <td align="center"><a onClick="closeCalender();" href="#"><font color="#003333" size="+1">X</font></a></td> </tr> </tbody> <tbody id="calenderTableDays"> <tr> <td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td> <td>Sat</td> </tr> </tbody> <tbody id="calender"> </tbody> </table> <!-- End Calender Script --> Thanking you... I have an ASP.Net page that uses functions in a .js file. I'm trying to reset the values in the controls on the form. The script I'm using works for Text boxes, TextArea boxes, and Check boxes, but, doesn't work for Select-One (DropDownList) or Select-Multi (List) controls. Included is the code. I use the alert() call as troubleshooting to insure the code segment is entered and the control is identified. The SelectIndex of the control is not being set. When this code is hard coded on the page it works. Code: function ClearAllControls() { for (i = 0; i <= document.forms[0].length; i++) { doc = document.forms[0].elements[i]; switch (doc.type) { case 'text':doc.value = ''; break; case 'textarea':doc.value = ''; break; case 'checkbox':doc.checked = false; break; case 'select-one': doc.selectedindex = 0; alert(doc.name + " - " + doc.type) break; default:break;} } } Hi all, How can I insert ads on html5 video tag before the main video plays? Now, I need make a sample allow: - play first advertisment video - play second ad video - play main video after 10 mins (half of duration) . pause main video . and play ad video. after that. continue the main video playback. Can you help me please? Thank you very much! Hello Friends... I am working on the healthcare project.So in that project there are different html pages for the user interaction & Events,such as user registration,patient profiles,doctor registration. So in the patient registration page i want to add the calendar control the requirement is whenever i click on the calendar control the user selected date is displayed in the textbox in the ddmmyyyy format.. So please tell me the answer... Thanking you..... Umesh All, I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well?? Thanks in advance. Hi, Is it possible that when a webpage loads I can have javascript change the class of a div from: .up { transform: translate(0px,-500px) transition: all 5s ease-in; } to .down { transform: translate(0px,0px) transition: all 5s ease-in; } Essentially I would like a div to move down into place from the top of screen to the middle of screen after the page has loaded. Some thing like this?: Code: <script type="text/javascript"> function transform() { document.getElementById("content").className = "down"; </script> <div id="content" class "up" onload="transform()"> </div> </html> would this work or is there a better way? Adrian. Hello, i am doing a test right now. What i have done is 1. A Counter/Timer That Counts until Zero 2. A Button that appears when the counter is Zero When I Click the Button it executes this code in the address bar (Navigates): javascript:gonow(); The id of the Timer: count What i want? When the Button appears, it will be clicked automatically... i started doing a different code, when the timer = 0 to navigate at javascript:gonow(); but it didnt worked.... See my code he Code: function AutoClick(){ var timer = document.getElementById(count); if(timer.value=0) unsafewindow.gonow(); } Tried to explain as more as i could, now im waiting for an answe, dont dissapoint me please. Firstly let me say, im relatively new to Javascript so im still picking things up.. I have a website that i want to add several mp3's onto. When a user clicks a link i wanted to make javascript change the streaming audio to the one that was selected. My HTML is as follows.. Code: <table style="background-color:Black; color:gold; font-weight:700; font-size:16px"> <tr onClick="Click('http://www.m-hops.co.uk/Music/Motown Flavours.mp3')"><td> 1. Motown Flavours </td></tr> <tr onClick="Click('http://www.m-hops.co.uk/Music/All_Around_The_World.mp3')"><td> 2. All Around The World </td></tr> <tr><td> <OBJECT ID="MediaPlayer" WIDTH="290" HEIGHT="50" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"> <PARAM id="TRACK" name="FileName" value="http://www.m-hops.co.uk/Music/Motown Flavours.mp3"> <PARAM name="autostart" value="true"> <PARAM name="ShowControls" value="true"> <param name="ShowStatusBar" value="true"> <EMBED id="sound" TYPE="application/x-mplayer2" src="" NAME="MediaPlayer" WIDTH="290" HEIGHT="50" ShowControls="1" ShowStatusBar="1" autostart="1"> </EMBED> </OBJECT> </td></tr> </table> and my Javascript is.. Code: <script language="javascript" type="text/javascript"> function Click(track) { document.getElementById('TRACK').value = track; window.alert(document.getElementById('TRACK').value); } </script> It appears that the right track is being parsed to the javascript but its not changing the audio thats being played. Any ideas?? This is a question more about an ASP.NET web application, but javascript is involved, so I'm hoping some javascript gurus can assist me. I'm working with a web application that needs to get access to an ASP.NET web control (a button) in javascript. The problen is that since the control is run on the server, javascript can't access it in the standard way (i.e. document.getElementById(controlId); ). I've actually solved this problem before in a different application, but my solution there doesn't seem to work here for some reason. I have this in an aspx file: Code: <script...> ... function myfun() { var b = document.getElementById("<%=SaveButton.ClientID%>"); alert(b); } </script> ... <asp:Button ID="SaveButton" Text="save" OnClientClick="myfun()" ClientIDMode="Static" runat="server" UseSubmitBehavior="False" /> I have a designer class in which the button is declared (and therefore exists in the server-side codebehind): Code: protected global::System.Web.UI.WebControls.Button SaveButton; But when I click on my button, the alert box says "null". Why am I not able to get my button in the javascript function? Some things to note: *The button exists within a content tag: Code: <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> *I'm working within Visual Studios 2008. Hello, I am trying to build a jukebox online. I use a quicktime plugin, the reason for this is that windows media player wouldnt work in firefox. I can now work the plugin with javascript to make it stop play pause and fast forward to a song, thing is i cant make it to play another song. in all sources i looked at , this piece of code should be what i am looking for : document.getElementById('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); well, that in any case wont work for me, then there was another piece of code wich should go in the embed part wich is this: QTNEXT1=myparty.mp3 in firefox it has the effect of opening the myparty.mp3 on another page in wich the quicktime plugin will show but cant find the song, in internet explorer it just simply give's the error "page is ready but with errors". can anyone help me to understand what goes wrong, what would fix it or a simpler way to embed a large amount of songs onto a website? hoping to hear something soon this is the code /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <SCRIPT LANGUAGE = "JavaScript"> function PlayIt(movname) { movname.Play(); } function StopIt(movname) { movname.Stop(); } function rewindIt(movname) { movname.rewind(); } function SetRate(movname,rate) { movname.SetRate(rate); } function SetTime(movname,time) { movname.SetTime(time); } function VolumeIt(movname,v) { movname.SetVolume(v); } document.getElementById('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementByName('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementById('movie2').SetQTNEXTUrl(1,'music/myparty.mp3'); document.getElementByName('movie2').SetQTNEXTUrl(1,'music/myparty.mp3'); </SCRIPT> </head> <body> <embed hidden="false" autostart="true" loop="-1" controls="largeconsole" height="25" width="100"></embed> <body> <br><br> <a href="#" onClick="StartVideo()" ;>startvideo</a><br> <a href="#" onClick="PlayIt(movie2)";>functie</a><br> <a href="javascript:document.movie2.Stop()">Stop</a><br> <a href="javascript:document.movie2.Play()">Play</a><br> <a href="javascript:document.movie2.SetRate(1.0);">SetRate(1.0)</a><br> <a href="javascript:document.movie2.SetRate(2.0);">SetRate(2.0)</a><br> <a href="javascript:document.movie2.SetVolume(100);"> SetVolume(100) </a><br> <a href="javascript:document.movie2.SetVolume(255);"> SetVolume(255) </a><br> <br> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="180" height="160" id="movie2"> <param name="src" value="music/camaro.mp3"> <param name="Autoplay" value="false"> <embed width="180" height="160" src="music/camaro.mp3" QTNEXT1=myparty.mp3 name="movie2" enablejavascript="true" autostart="false"> </object> <br> <SCRIPT LANGUAGE = "JavaScript"> document.getElementById('movie1').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementByName('movie1').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementById('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); document.getElementByName('movie2').SetQTNEXTUrl(2,'music/myparty.mp3'); </SCRIPT> <br> <br> http://userwww.sfsu.edu/~infoarts/te...avascript.html </body> </html> /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Hi All, I have a select html control as below ; <SELECT > <OPTION VALUE="1"> This is option 1 </OPTION> <OPTION VALUE="2" >This is option 2 </OPTION> <OPTION VALUE="3" >This is option 3 </OPTION> </SELECT> My requirement is that when user moves pointer over the items the value of the item should be shown in a hint box. How could I show the value of the item in a hint box as user moves pointer over an item using javascript? Thanks, Dev Help will be greatly appreciated! Situation: I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END. condition of the frame, fixed width/height, no scroll, no border. Very new to javascript but need this code to make a page work for BIZ. Thank you in advance for anyone kind enough to point the right direction! Hi i have created a scrolling gallery using javascript but i am having trouble aligning my images. right now they are in the center of the page but at the bottom, but i want them on top of the page. here is my code. <html> <head> <title>Gallery</title> <link href="website.css" rel="stylesheet" type="text/css"> <left> <table border="0" width="50" height="200"> <tr><td><a href="unique sports.html"><img width="400" height="230" align="center" src="unique sports logo.gif" border="0"></td></tr> <tr><td><a href="unique sports.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/home button.gif" border="0"><a/></td></tr> <tr><td><a href="about us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/about us.gif" border="0"></a> </td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/reviews.gif" border="0"></a> </td></tr> <tr><td><a href="Contact us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/contact us button.gif" border="0"></a></td></tr> </td></tr> <tr><td><a href="shop section.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/shop section .gif" border="0"></td></tr> <tr><td><a/><a href="http://google.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/latest news .gif" border="0"></a></td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/photo gallery .gif" border="0"></a></td></tr> </table> <center> <table> <td> <script language="JavaScript1.2"> var scrollerwidth='500px' var scrollerheight='500px' var pausebetweenimages=3000 var slideimages=new Array() slideimages[0]='<img src="72757631_9c35b8eff2_o.jpg">' slideimages[1]='<img src="363507907_FEDxk-L.jpg">' slideimages[2]='<img src="2542265127_6108971aa4.jpg">' slideimages[3]='<img src="2795508357_66b1cea812.jpg">' var ie=document.all var dom=document.getElementById if (slideimages.length>2) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",50) } else{ tlayer.top=parseInt(scrollerheight) tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",50) } else{ tlayer2.top=parseInt(scrollerheight) tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){ tdiv.style.top=0+"px" setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2_obj)",pausebetweenimages) return } if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){ tdiv.style.top=parseInt(tdiv.style.top)-5+"px" setTimeout("move3(tdiv)",50) } else{ tdiv.style.top=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){ tdiv2.style.top=0+"px" setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2_obj)",pausebetweenimages) return } if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){ tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px" setTimeout("move4(second2_obj)",50) } else{ tdiv2.style.top=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (ie||dom){ first2_obj=ie? first2 : document.getElementById("first2") second2_obj=ie? second2 : document.getElementById("second2") move3(first2_obj) second2_obj.style.top=scrollerheight second2_obj.style.visibility='visible' } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=parseInt(scrollerheight)+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide> <layer id="first" left=0 top=1 width=&{scrollerwidth};> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[0]) </script> </layer> <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) </script> </layer> </ilayer> <script language="JavaScript1.2"> if (ie||dom){ document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">') document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</div>') } </script> </td> </tr> </table> </head> <body> </body> </html> Thank you Hi to all, Plaese any body help me out. I have a problem with the flash. The flash file has been written in the javascript. just am calling the javascript file to my main page. Now i have a prob. When page loads, the flash image has jump to 2nd or 3rd image depending on the internet speed. if the net is fast, it is working well and starts from image 1 to till the end image. Now i have my query... if Is it possible to put the static image for the every time the page loads depending on the net speed and after complete the loading the flash has to start. Please egarly waiting for the answer. www.fabulant.com features a JavaScript that is capable to create a mirrored image out of any image. The script requires a lot of clipping and repositioning of those clipping. My question: is there al less cumbersome way to create mirrored images with JavaScript?
I'm writing a matching game. I have uploaded an example. I want to be able to read the current image rather than the default image as a variable to compare in an IF statement. http://www.mediafire.com/file/8nq4s5...a/matching.zip Hi All. I am new to all this and I am posting a problem up here that I think is quite rare or has not been looked into for a long time now. I am basically looking to create a background for my website and when you refresh the page the image changes to another picture for the background. I have asked one of my good friends to have a look at it and he gave me some code to work with and so I have changed bits here and there and it worked in firefox and safari but will not work in IE. When I asked him he had no clue what to do. So here I am now! I am hoping it is simple but I also know it wont be to an extent! Any help would be much appreciated here. I have attached the code here for you and also the html file. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> </head> <style type="text/css"> <!-- #myFlash { position:absolute; width:100%; height:100%; margin:0; padding:0; left:0; right:0; z-index:20; } --> </style> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Experts Connect</title> <meta name="keywords" content="Experts connect Preston, Experts connect Lancashire, Medical reports, Preston medical and legal agency, Lancashire medical and legal agency, specialist providers of independent medical evidence, diagnostic and rehabilitation services to the personal injury market, Medico Legal, personal injury claims, refferers." /> <meta name="description" content="Experts Connect are an established legal and medical agency providing reports for persobal injury claims. We work to get the best possible examination we can to ensure your claim goes through with no fuss. We are based nationally and work all over the United Kingdom." /> <meta name="robots" content="INDEX,FOLLOW" /> <meta name="revisit-after" content="10 days" /> <link rel="stylesheet" type="text/css" href="/common/basic.css" /> <script type="text/javascript" src="crossfade.js"></script> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf"); </script> <style type="text/css"> body { width:auto; height:auto; background-color:#CCCCCC;} #bgimage { filter:alpha(opacity=40); -moz-opacity:0.40; -khtml-opacity:0.40; opacity:0.40; width:100%; height:100%; position:absolute; margin:0; padding:0; left:0; right:0; } </style> <title>Untitled Document</title> <SCRIPT LANGUAGE="JavaScript"> <SCRIPT/> <!-- Begin // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theImages[0] = 'back4.jpg' theImages[1] = 'back2.jpg' theImages[2] = 'back5.jpg' theImages[3] = 'back6.jpg' theImages[4] = 'back8.jpg' // do not edit anything below this line var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img id="bgimage" src="'+theImages[whichImage]+'">'); // End --> </script> </head> <div id="myFlash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" name="expertsconnect" align="middle"> <param name="movie" value="experts-connectwebsite.swf" /> <param name="quality" value="high" /> <param name="scale" value="exactfit" /> <param name="wmode" value="transparent" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="experts-connectwebsite.swf" width="100%" height="100%" align="middle"> <param name="quality" value="high" /> <param name="scale" value="exactfit" /> <param name="wmode" value="transparent" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <!--<![endif]--> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> <!-- Script Size: 1.49 KB --> </body> </html> There is also a flash file embedded into this document! Any help would be great with this. Thank you, Mark Hello everyone! This is my first post. I know some html and css, but not much about javascript, and I have an existential problem with a portfolio i'm helping to design: The portfolio itself is for a night photographer that covers different events. For each event there is a page where the photos from that event are displayed. The thing is i don't want to write html code for each and every event, so i've been investigating how to automate this process and i've been answered: javascript. I want a horizontal layout page for each event, where all the images from its folder are displayed, with a horizontal scrollbar and no vertical scrollbar. I've managed to cover this with a combination between css and javascript code. The javascript code i'm using: <script src="../../docs/js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $("#page-wrap").wrapInner("<table cellspacing='30'><tr>"); $(".post").wrap("<td>"); }); </script> Then i call for each image in the body of the html page: <div id="page-wrap"> <div class="post"> <img src="../../images/baobab04.02.11/1.jpg" width="720" height="480" border="0" /> </div> <div class="post"> <img src="../../images/baobab04.02.11/2.jpg" width="720" height="480" border="0" /> </div> </div> I've read about this function to loop for each image in a directory: foreach(string fileName f in Directory.GetFiles("SomeDirectory")) { ... } But i'm lost as to how to implement it and make a new <div class="post"> for each file in the directory. Thank you all in advance Hello! I am trying to set up a javascript to code radio buttons as images a la this site: http://www.shopbop.com/swan-ruffle-n...her-shopbysize I have been playing around w/ a couple scripts I found online, but haven't been able to find one that works very well. Some of them are too broad & just change all the buttons to a general selected/unselected image. I would want it to apply to different sizes & colours. If anyone could help me or point me in the right direction that would be great! Oh, & if it makes any difference I am working w/ 3d cart. |