JavaScript - Multiple Image Source If Statement
I cannot get this function to work properly. Any help would be appreciated, please understand i am not so good at scripting i am trying to check the source of multiple images in one if statement to run a sound.
Code: function victory() { if (document.getElementById("Image0").src == "0.jpg" + document.getElementById("Image1").src == "1.jpg" + document.getElementById("Image2").src == "2.jpg" + document.getElementById("Image3").src == "3.jpg" + document.getElementById("Image4").src == "4.jpg" + document.getElementById("Image5").src == "5.jpg" + document.getElementById("Image6").src == "6.jpg" + document.getElementById("Image7").src == "7.jpg" + document.getElementById("Image8").src == "8.jpg" + document.getElementById("Image9").src == "9.jpg") { document.getElementById("vic").currentTime = 0; document.getElementById("vic").play(); } else{ } } Reply With Quote 01-21-2015, 05:19 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts + is the addition, concatenation and number casting operator. the logical AND operator is &&. cf. https://developer.mozilla.org/en-US/..._and_Operators Similar TutorialsI am currently trying to write a javascript function which checks whether the source of an image is one thing, if so do this, if not do something else. Any help is much appreciated. Below is the code I have tried... Code: if(document.getElementById("field").src == "images/tick.png"){ alert("this is the tick image"); } Very new to Javascript (been a HTML/CSS guy for a while, but never really got into more than tinkering with other other people's Javascript coding), but I came across a situation I can't find canned coding for, and trying to create it from bits and pieces I Googled has led me to a dead-end. In summary, I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content. Below is as far as I tried to get on my own, I appreciate any assistance from the folks here to help a JS novice like myself, thanks! Code: (function() { var as,ae; as = document.getElementsByTagName("img"); for (var i = 0; i < as.length; i++) { ae = as[i]; ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail"); } })(); This is really annyoing. I'm trying to set up an image's source from a function within the document's head, but to no avail. The code is something like this: ------------------------------------------------------- <head> .....js code..... function updatePieChart() { document.pie_chart.src = "piechart.php?p1&p2"; // php-generated image, with parameters } // A FUNCTION WHICH SUCCESSFULLY RUNS EVERY 2-3 SECONDS function ajax() { ....stuff..... // THE NEXT LINE DOESN'T WORK!!! // updatePieChart(); ...stuff..... } ....js code...... // THE NEXT LINE DOESN'T WORK!!! // updatePieChart(); </head> //THIS LINE WORKS LIKE A CHARM <body onload="updatePieChart();"> ....bla bla bla... <img src="#" name="pie_chart" /> ...bla bla bla.... </body> ------------------------------------------------------- As you can see, the function updatePieChart works wonderfully from the <body> tag of the function, but any attempt to call it from within the <head> tags fails. Also, I've tried to change the function updatePieChart so that it wouldn't call any php code and changed it to a simple document.pie_chart.src = "#"; but that still causes errors on the page when called from inside the <head> tags. On the other hand, if the function updatePieChart merely made an alert() call, then the ajax element works fine, and every so and so seconds I get an alert. Anyone, help? An explanation how come I can't set the image from within the <head> tags? Greetings, First off - You can see my problem at psychopathgames.com I have an image stretched to fit as the page background in a DIV and the page content inside a seperate DIV. When you mouseover the links, the background changes to represent each link (as does the color of the link... but that is working fine). Trouble is, the images that are being pulled aren't fullsized as the main background is... it is being cut off by some code I can't figure out and isn't resizing. Please visit the site to see what talking about. Here is the code... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Psychopath Games</title> <style type="text/css"> html, body {height:100%; margin:0; padding:0;} #page-background {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position: relative; z-index:1; padding:10px;} </style> <!--[if IE 6]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> <style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: none} </style> <script language="JavaScript"> <!-- img0_on = new Image(100,11); img0_on.src="images/titlesred.png"; img0_off = new Image(100,11); img0_off.src="images/titles.png"; img1_on = new Image(130,11); img1_on.src="images/contactred.png"; img1_off = new Image(130,11); img1_off.src="images/contact.png"; img2_on = new Image(170,11); img2_on.src="images/talentred.png"; img2_off = new Image(170,11); img2_off.src="images/talent.png"; function over_image(parm_name) { document[parm_name].src = eval(parm_name + "_on.src"); } function off_image(parm_name) { document[parm_name].src = eval(parm_name + "_off.src"); } --> </script> <script type="text/javascript"> function showIt1(imgsrc) { newImage = "url(images/backgroundone.jpg)"; document.getElementById('content').style.backgroundImage = newImage; } function showIt2(imgsrc) { newImage = "url(images/backgroundtwo.jpg)"; document.getElementById('content').style.backgroundImage = newImage; } function showIt3(imgsrc) { newImage = "url(images/backgroundthree.jpg)"; document.getElementById('content').style.backgroundImage = newImage; } function hideIt() { newImage = "url(images/background.jpg)"; document.getElementById('content').style.backgroundImage = newImage; } </script> </head> <body> <div id="page-background"> <img src="images/background.jpg" width="100%" height="100%"> </div> <div id="content"> <center> <img src="images/title.png"> <br><br> <br> <table width="100%"> <tr> <td width="40%" align="right" valign="bottom"> <a href="titles.html" onmouseover="over_image('img0'); showIt1(this.src);" onmouseout="off_image('img0'); hideIt();"> <img src="images/titles.png" border="0" name="img0"> </a> <br> <br> <a href="contact.html" onmouseover="over_image('img1'); showIt2(this.src);" onmouseout="off_image('img1'); hideIt();"> <img src="images/contact.png" border="0" name="img1"> </a> <br> <br> <a href="talent.html" onmouseover="over_image('img2'); showIt3(this.src);" onmouseout="off_image('img2'); hideIt();"> <img src="images/talent.png" border="0" name="img2"> </a> <br> <br> </td> <td width="60%"> <center> <img src="images/eye.png"> </td> <tr> </table> </div> </body> </html> I need to change the source of an image but I can't seem to figure out how. I believe that I have the correct syntax, but it does not seem to be working. Maybe I am typing it in wrong or something. I try to test my javascript by typing the script: <strong>javascript:document.getElementById('img1').src='./images/image1.jpg';</strong> into the address bar. Nothing happens. I also try to test it out by putting this on the page, but once again, nothing happens. Code: <script type="text/javascript"><!-- document.getElementById('im1').src="./scripts/'.$upload_image.'"; //--></script> This is what my HTML code looks like: Code: <img src="./images/temp_wizard_picture.gif" alt="" style="padding:4px; background:#fff; border:1px #bbb solid;" id="img1" /> Can somebody please fill me in on what I am doing wrong. Thank you. Hi, I am using a multiple select with javascript to update the navigation bar <li> depending on which single option is selected and it's working well. The only problem however, is when multiple are selected, I want all a class to be added to all the <li> but it's not working. if (document.getElementById("status_advanced").value == "1"){ $('.moduleTitle').html("<h2>Enquiries</h2><span class='utils'> <a id='create_image' href='index.php?module=AOS_Invoices&action=EditView&return_module=AOS_Invoices&return_ac tion=DetailView' class='utilsLink'><img src='custom/themes/default/images/create-record.gif?v=9FuiS_EWfdVgVhHTU4vK3g' alt='Create'></a><a id='create_link' href='index.php?module=AOS_Invoices&action=EditView&return_module=AOS_Invoices&return_ac tion=DetailView' class='utilsLink'>Create</a></span>"); $("#enquiries-nav").addClass("currentTab"); $("#jobs-nav").removeClass("currentTab"); } else if (document.getElementById("status_advanced").value == "2"){ $('.moduleTitle').html("<h2>Jobs</h2>"); $("#jobs-nav").addClass("currentTab"); $("#enquiries-nav").removeClass("currentTab"); } else if (document.getElementById("status_advanced").value == "3"){ $('.moduleTitle').html("<h2>Clearance</h2>"); $("#clearance-nav").addClass("currentTab"); $("#jos-nav").removeClass("currentTab"); } else if ((document.getElementById("status_advanced").value == "1") && (document.getElementById("status_advanced").value == "2")){ $('.moduleTitle').html("<h2>All</h2>"); $("#enquiries-nav").addClass("currentTab"); $("#jos-nav").addClass("currentTab"); } Any suggestions? Reply With Quote 01-20-2015, 01:56 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Suggest you have a select option "All". Use this example:- Code: <!DOCTYPE html> <html> <head> </head> <body> <form id="InventoryList" method="post" action=""> <select id="SelBranch" class="class1" size="5" multiple="multiple"> <option value="All Branches">All Branches</option> <option value="001 London">001 London</option> <option value="002 Birmingham">002 Birmingham</option> <option value="003 Manchester">003 Manchester</option> <option value="004 Nottingham">004 Nottingham</option> <option value="005 Bradford">005 Bradford</option> <option value="006 Newcastle">006 Newcastle</option> </select> <input type="button" id ="ViewReport" value="View" class="class1" onclick="GetInventory();"> </form> <script type = "text/javascript"> function GetInventory() { var sel = document.getElementById("SelBranch"); var count = 0; var SelBranchVal = []; for (x=0; x<sel.length; x++) { if (sel[x].selected) { SelBranchVal[count] = sel[x].value; count++; } } alert(SelBranchVal); } </script> </body> </html> Quizmaster: Which word for a spring or town with thermal or mineral waters used for drinking or bathing takes its name from a town in Belgium which is famed for its supposedly curative waters? Contestant: Volvic recently i noticed that all of my embedded JavaScript code and external style sheets are being shown IN "view source." this happens in all browsers ( IE, FF, Chrome, and Safari [windows]) ... oddly enough it only happens when viewing on my vista or win2k3 machines. is this something added to these OS's or the result of an installed program? has anyone seen this before? Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? I am new to this and I am pretty lost, basically I want the div to start out completely minimized at 0% height and then when I click the button that calls the function it should increase the size to 100%, once it is maximized I want it to set the height back to 0% when the button is clicked again. Heres what I have so far. I can get it to minimize and maximize itself but I can't get the height set correctly. Code: <SCRIPT language="javascript"> var y = 100; var q = 5; var f = 0; var g = 0; function changeheight(){ if(y>170&&g==0){g=1;return;} if(y<101&&g==1){g=0;return;} if(g)q=-5;if(!g)q=5;y=y+q; e=document.getElementById("examplediv"); e.style.height = y + 'px'; t=setTimeout("changeheight();",0); </SCRIPT> Can anyone help me out, or is there an easier way to do this? Basically I want to have a different background image for every time of the day. The function by itself works okay with onclick or onload placed in body. Code: function changesky() { document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x"; } What I want to do is have my background change in addition to a message. So instead of just "Good Morning" text I also want the background to change. Code: if (time>=4 && time<12) { document.write ("<p>Good Morning!</p>"); document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x"; } Tried this, but it didn't work so what's the format for calling a function inside of an if statement? Or what other method should I use to do this? http://www.pennonconstruction.com/projects.php I'm trying to rotate an array of images (including different urls the images are linked to). The two images below "Featured Projects" are the images that should be rotating with an array of different images/links. I know this can be done in a fairly simple way, I'm just having a hard time finding something that is simple and works. Any help is much appreciated! Good morning all. I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work. However, when adding in another slider, I have only confused the situation. Below is the html and css. Let me know where I've gone wrong here. Will I need another set of css classes for each slider? How do I call a second slider? Thanks! The html/javascript 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" /> <link media="screen" type="text/css" link rel="stylesheet" href="style.css" /> <link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" /> <link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" /> <link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script> <script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script> <script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script> <title>idigify</title> </head> <body> <div class="main"> <div class="container"> <div class="header"> <ul class="nav"> <ul> <div class="allbuttons"> <div class="navabout"><li>about</li></div> <div class="navwork"><li>work</li></div> <div class="navcontact"><li>contact</li></div> </div><!--end of all buttons--> </ul><!--end of nav list--> </ul><!--end of nav--> </div> <!--end of header--> <div class="headeraboutme">the work</div> <div class="sitemainfeature"> <div class="aboutme_text"> <h2>Just for Fun</h2> <div class="workslider_justforfun"> <div class="workslider_justforfun_container"> <div class="wt-scroller"> <div class="prev-btn"></div> <div class="slides"> <ul> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> </ul> </div><!--end of slider--> <div class="next-btn"></div> <div class="lower-panel"> <div class="scroll-bar"> <div class="thumb"> </div><!--end of thumb--> </div><!--end of scroll-bar--> </div><!--end of lower panel--> </div><!--end of wt scroller just for fun--> </div><!--end of just for fun container--> </div><!--end of workslider--> <h2>Ads/Advertising</h2> <div class="workslider_justforfun"> <div class="workslider_justforfun_container"> <div class="wt-scroller2"> <div class="prev-btn"></div> <div class="slides"> <ul> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> </ul> </div><!--end of slider--> <div class="next-btn"></div> <div class="lower-panel"> <div class="scroll-bar"> <div class="thumb"> </div><!--end of thumb--> </div><!--end of scroll-bar--> </div><!--end of lower panel--> </div><!--end of wt scroller just for fun--> </div><!--end of just for fun container--> </div><!--end of workslider--> <h2>Logos</h2> <div class="workslider_justforfun"> <div class="workslider_justforfun_container"> <div class="wt-scroller"> <div class="prev-btn"></div> <div class="slides"> <ul> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> </ul> </div><!--end of slider--> <div class="next-btn"></div> <div class="lower-panel"> <div class="scroll-bar"> <div class="thumb"> </div><!--end of thumb--> </div><!--end of scroll-bar--> </div><!--end of lower panel--> </div><!--end of wt scroller just for fun--> </div><!--end of just for fun container--> </div><!--end of workslider--> <h2>Billboards</h2> <div class="workslider_billboard"> </div><!--end of workslider--> <h2>Business Cards</h2> <div class="workslider_businesscard"> </div><!--end of workslider--> <h2>Resumes</h2> <div class="workslider_resume"> </div><!--end of workslider--> <h2>Sales Pieces</h2> <div class="workslider_salespiece"> </div><!--end of workslider--> </div><!--end of about me text--> </div><!--end of site main feature--> <div class="worksplash"></div><!--end of background splash--> </div><!--end of container--> </div><!--end of main--> <div class="footercontainer"> <ul class="nav"> <ul> <div class="navabout"><li>about</li></div> <div class="navwork"><li>work</li></div> <div class="navcontact"><li>contact</li></div> </ul><!--end of nav list--> </ul><!--end of nav--> </div> <!--end of footer container--> <script type="text/javascript"> $(document).ready( function() { //initialize scroller $(".container").wtScroller({ num_display:3, slide_width:240, slide_height:180, slide_margin:1, button_width:25, ctrl_height:15, margin:1, auto_scroll:false, delay:4000, scroll_speed:1000, easing:"", auto_scale:true, move_one:false, ctrl_type:"scrollbar", display_buttons:true, display_caption:true, mouseover_caption:false, caption_align:"bottom", caption_position:"inside", cont_nav:true, shuffle:false }); //initialize lightbox for scroller $("a[rel='scroller']").wtLightBox({ rotate:true, delay:4000, transition_speed:600, display_number:true, display_dbuttons:true, display_timer:true, display_caption:true, caption_align:"bottom", cont_nav:true, auto_fit:true, easing:"" }); } ); </script> </body> </html> the css Code: .wt-scroller{ position:relative; display:block; font-family:Arial,Helvetica,sans-serif; background-color:#CCCCCC; width:720px; height:180px; } .wt-scroller .slides{ position:relative; width:700px; height:200px; float:left; overflow:hidden; z-index:1; } .wt-scroller .slides ul{ list-style:none; position:relative; width:999999px; margin:0px; padding:0px; z-index:0; overflow:hidden; } .wt-scroller .slides ul li{ position:relative; display:block; float:left; overflow:hidden; width:240px; height:200px; margin-left:5px; } .wt-scroller .slides ul li img{ position:absolute; top:0; left:0; z-index:0; border:0; } .wt-scroller .slides ul li p{ position:absolute; top:0; left:0; z-index:1; color:#FFF; font-size:12px; width:200px; padding:5px; margin:0; visibility:hidden; } .wt-scroller .outside{ background-color:#222; } .wt-scroller .inside{ -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); background-color:rgba(0,0,0,0.75); } .wt-scroller .prev-btn{ float:left; position:relative; width:20px; height:170px; cursor:pointer; } .wt-scroller .next-btn{ float:right; position:relative; width:20px; height:170px; cursor:pointer; } .wt-scroller .prev-btn{ background:url(assets/prev.png) center no-repeat; } .wt-scroller .next-btn{ background:url(assets/next.png) center no-repeat; } .wt-scroller .lower-panel{ display:block; position:relative; clear:both; text-align:center; font-size:0; } .wt-scroller .scroll-bar{ position:relative; background-color:#999; background:-moz-linear-gradient(top, #999 0%, #666 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0); -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; width:100%; height:5px; cursor:pointer; overflow:hidden; } .wt-scroller .thumb{ position:absolute; top:0; left:0; width:100px; height:5px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#FFF; background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0); } .wt-scroller .index, .wt-scroller .index-hl{ position:relative; display:inline-block; width:7px; height:7px; margin:0 4px; background-image:url(assets/circle.png); background-repeat:no-repeat; } .wt-scroller .index{ background-position:0 0; cursor:pointer; } .wt-scroller .index-hl{ background-position:-7px 0; cursor:default; } /*start of scroller2 */ .wt-scroller2{ position:relative; display:block; font-family:Arial,Helvetica,sans-serif; background-color:#CCCCCC; width:720px; height:180px; } .wt-scroller2 .slides{ position:relative; width:700px; height:200px; float:left; overflow:hidden; z-index:1; } .wt-scroller2 .slides ul{ list-style:none; position:relative; width:999999px; margin:0px; padding:0px; z-index:0; overflow:hidden; } .wt-scroller2 .slides ul li{ position:relative; display:block; float:left; overflow:hidden; width:240px; height:200px; margin-left:5px; } .wt-scroller2 .slides ul li img{ position:absolute; top:0; left:0; z-index:0; border:0; } .wt-scroller2 .slides ul li p{ position:absolute; top:0; left:0; z-index:1; color:#FFF; font-size:12px; width:200px; padding:5px; margin:0; visibility:hidden; } .wt-scroller2 .outside{ background-color:#222; } .wt-scroller2 .inside{ -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); background-color:rgba(0,0,0,0.75); } .wt-scroller2 .prev-btn{ float:left; position:relative; width:20px; height:170px; cursor:pointer; } .wt-scroller2 .next-btn{ float:right; position:relative; width:20px; height:170px; cursor:pointer; } .wt-scroller2 .prev-btn{ background:url(assets/prev.png) center no-repeat; } .wt-scroller .next-btn{ background:url(assets/next.png) center no-repeat; } .wt-scroller2 .lower-panel{ display:block; position:relative; clear:both; text-align:center; font-size:0; } .wt-scroller2 .scroll-bar{ position:relative; background-color:#999; background:-moz-linear-gradient(top, #999 0%, #666 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0); -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; width:100%; height:5px; cursor:pointer; overflow:hidden; } .wt-scroller2 .thumb{ position:absolute; top:0; left:0; width:100px; height:5px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#FFF; background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0); } .wt-scroller2 .index, .wt-scroller2 .index-hl{ position:relative; display:inline-block; width:7px; height:7px; margin:0 4px; background-image:url(assets/circle.png); background-repeat:no-repeat; } .wt-scroller2 .index{ background-position:0 0; cursor:pointer; } .wt-scroller2 .index-hl{ background-position:-7px 0; cursor:default; } /*end of scroller2 */ I am new to web design and purchased "Instant PopOver" thinking it would do all the javascripting for me, BUT it doesn't combine the popovers in a single document and their customer service doesn't provide custom coding help. I must not be scripting this right. Here's what I'm working on: http://www.hallornothingdesigns.com/...ew/map_pop.htm The popovers are suppose to all be unique in different locations. Can someone help me? My butchered code is below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- IPO CODE: ALBOX START --> <script language="javascript"> function showAlert1() {makeAlert('Discover','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert2() {makeAlert('Hang','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert3() {makeAlert('Encounter','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert4() {makeAlert('Challenge','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert5() {makeAlert('Explore','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert6() {makeAlert('Behold','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert7() {makeAlert('Send','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert8() {makeAlert('Take','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert9() {makeAlert('Conquer','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} function showAlert10() {makeAlert('Seize','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');} </script> <!-- IPO CODE: ALBOX END --> <title>Grande Villas Spinnakers Kids' Club</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--Fireworks CS3 Dreamweaver CS3 target. Created Sun Dec 20 18:18:27 GMT-0500 (EST) 2009--> </head> <body bgcolor="#74b1bf" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <script language="javascript" src="AlertPopOVER.js"></script> <img name="map_background2" src="map_background2.gif" width="1500" height="864" border="0" id="map_background2" usemap="#m_map_background2" alt="" /><map name="m_map_background2" id="m_map_background2"> <area shape="rect" coords="844,449,1028,535" href="http://www.gvcondos.com" target="_blank" title="Grande Villas Homepage" alt="Grande Villas Homepage" /> <area shape="rect" coords="525,195,597,216" href='javascript:void(0);' onClick="javascript:showAlert1();"> <area shape="rect" coords="944,201,989,223" href='javascript:void(0);' onClick="javascript:showAlert2();"> <area shape="rect" coords="716,239,798,257" href='javascript:void(0);' onClick="javascript:showAlert3();"> <area shape="rect" coords="509,332,591,351" href='javascript:void(0);' onClick="javascript:showAlert4();"> <area shape="rect" coords="723,365,792,384" href='javascript:void(0);' onClick="javascript:showAlert5();"> <area shape="rect" coords="856,324,919,343" href='javascript:void(0);' onClick="javascript:showAlert6();"> <area shape="rect" coords="958,373,1000,394" href='javascript:void(0);' onClick="javascript:showAlert7();"> <area shape="rect" coords="824,427,868,446" href='javascript:void(0);' onClick="javascript:showAlert8();"> <area shape="rect" coords="648,518,695,535" href='javascript:void(0);' onClick="javascript:showAlert9();"> <area shape="rect" coords="497,449,562,468" href='javascript:void(0);' onClick="javascript:showAlert10();"> </map> <!-- IPO CODE: ALBOX START --> <div id="stl_alert1" style="position: absolute; visibility: hidden; left: 527px; top: 215px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert2" style="position: absolute; visibility: hidden; left: 945px; top: 221px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert3" style="position: absolute; visibility: hidden; left: 717px; top: 258px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert4" style="position: absolute; visibility: hidden; left: 511px; top: 350px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert5" style="position: absolute; visibility: hidden; left: 727px; top: 295px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert6" style="position: absolute; visibility: hidden; left: 859px; top: 344px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert7" style="position: absolute; visibility: hidden; left: 957px; top: 393px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert8" style="position: absolute; visibility: hidden; left: 825px; top: 447px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert9" style="position: absolute; visibility: hidden; left: 497px; top: 470px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <div id="stl_alert10" style="position: absolute; visibility: hidden; left: 648px; top: 538px; width: 270px; height: 150px; border: 1px solid #330E00; background-color: #FFFFFF" > <div align=right> <font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font> </div> <font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe></font> </div> <!-- IPO CODE: ALBOX END --> </body> </html> I'd also like these popovers to activate on rollover and close upon mouseout, but I'm trying not to be picky. I'd be happy if I could just get the right content to popup. Thanks for your help!!!! hi master. I need some help. I need a function that change multiple images on click maybe by id Ex.: PHP Code: <table> ..... <td><img src="folder1/image1.jpg"></td> <td><img src="folder1/image2.jpg"></td> <td><img src="folder1/image3.jpg"></td> <td><img src="folder2/image1.jpg"></td> <td><img src="folder2/image2.jpg"></td> <td><img src="folder2/image3.jpg"></td> ..... </table> NOW BUTTONS (IMAGES) PHP Code: <!-- clicking this imagen will change to another button image and will change the folder1/image1.jpg and folder2/image1.jpg --> <div><img src="buttons/buton1.jpg" alt=""></div> <!-- clicking this imagen will change to another button image and will change the folder1/image2.jpg and folder2/image2.jpg --> <div><img src="buttons/buton1.jpg" alt=""></div> <div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> <!-- clicking this imagen will change to another button image and will change the folder1/image3.jpg and folder2/image3.jpg --> <div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> really, I don't know much about javascript, I'm waiting for your help. actually, I have loaded jquery-1.2.6.min.js hi im creating a simple slide show and i was wondering how to add multiple sets of image. heres my current code Code: <html> <head> <script type="text/javascript"> var Images = new Array ('images/up.jpg','images/right.jpg','images/down.jpg','images/left.jpg'); //my second group of images... //('images/bottemleft.jpg','images/topleft.jpg','images/centerstep.jpg','images/topleft.jpg','images/bottemright.jpg'); var thisPic = 0; function initLinks() { document.getElementById("nextLink").onclick = processNext; document.getElementById("backlink").onclick = processBack; document.getElementById("fplaylink").onclick = processfplay; document.getElementById("bplaylink").onclick = processbplay; document.getElementById("stoplink").onclick = processstop; } function processNext() { thisPic++; if (thisPic == Images.length) { thisPic = 0; } document.getElementById("myPicture").src = Images[thisPic]; return false; } function processBack() { thisPic--; if (thisPic == -1 ) { thisPic = (Images.length -1); } document.getElementById("myPicture").src = Images[thisPic]; return false; } var stop = 0 function processfplay() { if (stop == 1) { thisPic++; if (thisPic == Images.length) { thisPic = 0; } setTimeout("processfplay()", 200); } else { stop = 1 ; } document.getElementById("myPicture").src = Images[thisPic]; return false; } function processbplay() { if (stop == 2) { thisPic--; if (thisPic == -1 ) { thisPic = (Images.length -1); } setTimeout("processbplay()", 200); } else { stop = 2; } document.getElementById("myPicture").src = Images[thisPic]; return false; } function processstop (){ (stop = 0) document.getElementById("myPicture").src = Images[thisPic]; return false; } </script> </head> <body onload=initLinks() > <h2 align= center>Images used in the slideshow below</h2> <table align= center> <tr><td><img src= "images/left.jpg"></td><td><img src= "images/down.jpg"></td> <td><img src= "images/up.jpg"></td><td><img src= "images/right.jpg"></td></tr> </table> <table align= center> <td><img src= "images/bottemleft.jpg"></td><td><img src= "images/topleft.jpg"></td> <td><img src= "images/centerstep.jpg"></td> <td><img src= "images/topright.jpg"></td><td><img src= "images/bottemright.jpg"></td> </table> <div align="center"> <h2>The Slidshow</h2> <img src="images/ddrlogo.jpg" id="myPicture" alt="Slideshow" /> <h2> <a href="any_old.html" id="nextLink">Next >></a><br/> <a href="any_old.html" id="backlink">Back <<</a><br/> <a href="any_old.html" id="fplaylink">Forward Play <<</a><br/> <a href="any_old.html" id="bplaylink">backward Play <<</a><br/> <a href="any_old.html" id="stoplink">Stop <<</a><br/> </h2> </div> </body> </html> thanx in advance Hi, I have a list of pictures like this: <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1474');return false"><img src="image.php?path=source/shoes/0788.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1440');return false"><img src="image.php?path=source/shoes/0754.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1430');return false"><img src="image.php?path=source/shoes/0744.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=54&pic=1407');return false"><img src="image.php?path=source/shoes/0127.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=18&pic=1390');return false"><img src="image.php?path=source/shoes/0106.jpg" class="img" border="0"></a> Size of pictures in class is width 155px and hight 175px. Now I want, when I click on any picture from the list, to replace class "img" on all pictures with new class that have width 100px and height 75px. Is this possible? Thanks Hello, I have 3 smaller thumbnail images and when I click on any of them, the resulting image displays in the larger image space. The tricky part is that I want the larger image to become a link that changes, depending on which image is displaying. (I don't want the little images to be links.) Click here for a visual to help explain what I am wanting to do. Here is what I have for script...but I can't figure out the links... Code: <script> function changeImage(filename) { document.main.src = filename; } </script> <table><tr><td><img name="main" src="images/4.gif"></td> <td> <a href="#" onClick="javascript:changeImage('images/1.gif')"><img src="images/11.gif"></a><br> <a href="#" onClick="javascript:changeImage('images/2.gif')"><img src="images/22.gif"></a><br> <a href="#" onClick="javascript:changeImage('images/3.gif')"><img src="images/33.gif"></a><br> </td></tr></table> This script works fine, but I can't figure out how to make the larger image have 3 separate links, depending on which image is displaying in it. Thanks for any help you can be! Hi I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while... Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while.... ... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined". All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas? Here's the code... Code: <SCRIPT LANGUAGE="JavaScript"> <!-- 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] = 'images/240 Images/belmarsh-peat-240.jpg' theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg' theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg' theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg' theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg' theImages[5] = 'images/240 Images/Justin_Barton-240.jpg' theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg' theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg' // do not edit anything below this line var theImages2 = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg' theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg' theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg' theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg' theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg' theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg' theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg' // do not edit anything below this line var theAlts = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theAlts[0] = 'Peat bog excavations at Belmarsh Prison.' theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.' theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.' theAlts[3] = 'Fieldwalking.' theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.' theAlts[5] = 'An MA Student from University College London a records ceramic vessel.' theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).' theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.' var theAlts2 = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theAlts2[0] = 'Building Recording Services.' theAlts2[1] = 'Fieldwork Services.' theAlts2[2] = 'Finds and Environmental Specialist Services.' theAlts2[3] = 'Forensic Archaeology.' theAlts2[4] = 'Geoarchaeological Services.' theAlts2[5] = 'Heritage Management Services.' theAlts2[6] = 'Landscape Research Services.' 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]+'" border="1" alt="'+theAlts[whichImage]+'">'); } function showImage2(){ document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">'); } // End --> </script> and its called by the code... Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> and.. Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage2(); // End --> </script> Many thanks in advance. I'm trying to create a portfolio website in which I have multiple galleries showing different work on the same page . Each to work separately and change the default image on click. I have seen it work he http://www.fajnechlopaki.com/ I was able to follow this: http://codingforums.com/showthread.php?p=941419 but then couldn't duplicate it. Please help! Thanks. |