JavaScript - Give A Hexagon Shape To An Image
Hello,
I have a image which need to be cropped from edges slightly to give a hexagon shape. Please see the attached image to see how the appear ance should be. Would lik to crop images while loading on to this frames/boxes. can we do using javascript, can someone help. Thanks. Similar TutorialsI've got the following html code for a button - how can I get the cursor to turn into the hand shape when the mouse is over the button? Thanks PHP Code: <INPUT NAME="btn_cancel" TYPE="button" VALUE="Cancel" onClick="cancel_button_click()";> I need some goals/projects because without them, it is very hard to stay interested. Does anyone have any interesting/fun projects that I can work out so I can learn some more javascript? Thanks coders! Hi, The purpose of a function newValue() is to get the value of input text field at the moment the 'roll' button is clicked. It is also necessary to give the value of the the_value variable out of newValue() function. This is to store the value in another variable, so that a moment later it is possible to know what was the value at the time the 'roll' button was clicked. It does not work the way it is at the moment, since always when newValue() function is called, it knows the present value in the text field but not the one at the time of the click. Cookies could do if everyone allows them, so in this case they will not work. Any ideas how to give a value out of the function / (to another function)? [CODE] <script type="text/javascript"> function newValue() { var the_value; the_value = document.the_form.text_name.value; } </script> <form name="the_form" > <input type="text" name="text_name" value="117" size="5" maxlength="3" /> <input type="button" name="button_name" value="roll" onclick="newValue();rollNumbers();" /> </form> [CODE] Hi! Can anyone help me make this spoiler slide open and close instead of just appear and disappear? I'd be really grateful Code: <html> <head> <link href="http://fallscountanywhere.com/bbcodes/spoiler.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript"> function showSpoiler(btn, show) { var node = btn; while ( node.className == null || node.className != "spoiler" ) { node = node.parentNode; if ( node == null ) { alert("The html for spoiler is invalid"); return; } } var inners = node.getElementsByTagName("div"); inners[0].style.display = show ? "none" : "block"; inners[1].style.display = show ? "block" : "none"; } </script> </head> <body> <div class="spoiler"> <img src="http://i.imgur.com/6Uq7Y.png" align="right"> <div class="inner"> <input type="button" onclick="showSpoiler(this, true);" value="Show" /> </div> <div class="inner" style="display:none;"> <input type="button" onclick="showSpoiler(this, false);" value="Hide" /> <div class="text">{param}</div> </div> </div> </body> </html> <script> function calculateamt() { //var ckdp122 = parseFloat(document.getElementById('ckdp').value,2); var ty = parseFloat(document.getElementById('t1').value,2); var zx = parseFloat(document.getElementById('t3').value,2); var zy = parseFloat(document.getElementById('t2').value,2); var zz = parseFloat(document.getElementById('t4').value,2); //var zz = parseFloat(document.getElementById('t3').value,2); //var eey=(((ty)-(zz))/(ty))*100; //var deey=eey.toFixed(2); var qq=(ty)*(zx); var rr=(zy)*(zz); //document.getElementById('diffob').value=deey; var r=(qq)+(rr); document.getElementById('ta').value=r; } function calculateamt1() { //var ckdp122 = parseFloat(document.getElementById('ckdp').value,2); var ty1 = parseFloat(document.getElementById('t11').value,2); var zx1 = parseFloat(document.getElementById('t15').value,2); var zy1 = parseFloat(document.getElementById('t12').value,2); var zz1 = parseFloat(document.getElementById('t14').value,2); //var zz = parseFloat(document.getElementById('t3').value,2); //var eey=(((ty)-(zz))/(ty))*100; //var deey=eey.toFixed(2); var qq=(ty1)*(zx1); var rr=(zy1)*(zz1); //document.getElementById('diffob').value=deey; var r1=(qq)+(rr); document.getElementById('tb').value=r1; } </script> <body> <p> </p> <form id="form1" name="form1" method="post" action=""> <table width="688" height="64" border="1"> <tr> <td width="62">Fork</td> <td width="146"><label> <input type="text" name="t1" id="t1" /> </label></td> <td width="146"><label> <input type="text" name="t3" id="t3" /> </label></td> <td width="140"><label></label></td> <td width="160"><label> <input type="text" name="ta" id="ta" /> </label></td> </tr> <tr> <td> </td> <td><label> <input type="text" name="t2" id="t2" /> </label></td> <td><label> <input type="text" name="t4" id="t4" onkeyup="calculateamt()" /> </label></td> <td> </td> <td><label> <input type="text" name="textfield6" id="textfield6" /> </label></td> </tr> <tr> <td width="62">Brake</td> <td width="146"><label> <input type="text" name="t11" id="t11" /> </label></td> <td width="146"><label> <input type="text" name="t15" id="t15" /> </label></td> <td width="140"><label></label></td> <td width="160"><label> <input type="text" name="tb" id="tb" onkeyup="calculateamt1()" /> </label></td> </tr> <tr> <td> </td> <td><label> <input type="text" name="t12" id="t12" /> </label></td> <td><label> <input type="text" name="t14" id="t14" /> </label></td> <td> </td> <td><label> <input type="text" name="textfield6" id="textfield6" /> </label></td> </tr> </table> </form> i have written 2 functions for the above ta and tb calculations but tb and tb are same calculations so what i want to do is only one funcntion to calculate both values plz help me to do this using one function plzzzzzzzzzzzz help me I'm trying to allow a user to download a file off my server without opening a new page. How would I do that with JavaScript? Thanks! Hello everybody I have a page where I have several input text fields (the number of fields is variable), the input text fields are disable , only the first one is enable, as the user goes filling out the text fields, the next text field becomes available, each time the user fills out an input text field, the form is submitted. As I said, the number of text fields is variable, some times I have only one and other time I can have 7. I would like to create a javaScript function to put the next available text field ready to star writing, without having to click in the text field first. The id of my form is "reports" , the id of the table is,"run_params" and the id of my input texts is "inputp". I am using JSF, the HTML output generated for each field is id="reports:run_params:1:input" , the number 1 indicated that is the first input text, this number can go from 1 to 20. I have tried to create a code where I can read how many input fields I have and then create a loop that checks all of them and search for the field that is enable and empty, and put that field on focus. But so far my code doesn't work. I don't have too much experience with javaScript and I already have tried many different ideas, without success, I have not idea how to achieve this objective, because I don't know very well javascript's capabilities, so I don't know what it is possible and what it is not. Any help????!!! Thanks in advance Hi, i have a page with lots of checkboxes and hidden fields. When i tick a checkbox i want it to give the hidden filed a value. But give it no value if it is not ticked. For every checkbox i have a hidden field is with it. Both the checkbox and the hidden field send information. I have used some js scripts but they don't seem to work with more than one checkbox. Please can you help. Example: <input type="checkbox" name="box1" id="box1" value="4th July 2009,"> <input type="hidden" name="price1" id="price1" value="0"> So when box1 is ticked it then gives price1 a value. But if not ticked then the value remains at 0. I want it to give a value of 699. There will be about 100 checkboxes and hidden fields on the page. Also onclick behaviours do not work because it may still send the information if the checkbox is not checked. So for the next checkbox and hidden field i use box2 and price2. Thanks for your help. Hi, am newbie in this domain ,so i appreciate any help of you. Am making a site for tattoos and i see somewhere an application in Java for changing text, it was simple text box where you write the text you want and down you choose the Font and down you have the text you want in the wanted fond. Thank you!
Hi, my javascript calculates a total figure. It rounds it up though and I want it to give me a decimal (x2) total. Please help. Here is my code so far: Code: <script type="text/javascript"> function calculateText() { var op1=document.getElementById('Age02'); var op2=document.getElementById('Girl35'); var op3=document.getElementById('Boy35'); var op4=document.getElementById('Girl610'); var op5=document.getElementById('Boy610'); var op6=document.getElementById('Age11'); var op7=document.getElementById('Guest'); var op8=document.getElementById('VIP'); var op9=document.getElementById('School'); var op10=document.getElementById('3DFilm'); var op11=document.getElementById('BFast'); var op12=document.getElementById('PNGift'); var op13=document.getElementById('PStand'); var op14=document.getElementById('PLrg'); var op15=document.getElementById('PReP'); var op16=document.getElementById('KyMg'); var op17=document.getElementById('SnwGlb'); var op18=document.getElementById('PBbl'); var op19=document.getElementById('USB'); var op20=document.getElementById('SantaL'); var op21=document.getElementById('SantaK'); var op22=document.getElementById('FreeP'); var op23=document.getElementById('PUpgrd'); var op24=document.getElementById('StaffP'); var op25=document.getElementById('CompEntry'); var op26=document.getElementById('241'); var op27=document.getElementById('50Percent'); var op28=document.getElementById('Voucher'); var result=document.getElementById('Total'); if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0; if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0; if(op3.value=="" || op3.value!=parseFloat(op3.value)) op3.value=0; if(op4.value=="" || op4.value!=parseFloat(op4.value)) op4.value=0; if(op5.value=="" || op5.value!=parseFloat(op5.value)) op5.value=0; if(op6.value=="" || op6.value!=parseFloat(op6.value)) op6.value=0; if(op7.value=="" || op7.value!=parseFloat(op7.value)) op7.value=0; if(op8.value=="" || op8.value!=parseFloat(op8.value)) op8.value=0; if(op9.value=="" || op9.value!=parseFloat(op9.value)) op9.value=0; if(op10.value=="" || op10.value!=parseFloat(op10.value)) op10.value=0; if(op11.value=="" || op11.value!=parseFloat(op11.value)) op11.value=0; if(op12.value=="" || op12.value!=parseFloat(op12.value)) op12.value=0; if(op13.value=="" || op13.value!=parseFloat(op13.value)) op13.value=0; if(op14.value=="" || op14.value!=parseFloat(op14.value)) op14.value=0; if(op15.value=="" || op15.value!=parseFloat(op15.value)) op15.value=0; if(op16.value=="" || op16.value!=parseFloat(op16.value)) op16.value=0; if(op17.value=="" || op17.value!=parseFloat(op17.value)) op17.value=0; if(op18.value=="" || op18.value!=parseFloat(op18.value)) op18.value=0; if(op19.value=="" || op19.value!=parseFloat(op19.value)) op19.value=0; if(op20.value=="" || op20.value!=parseFloat(op20.value)) op20.value=0; if(op21.value=="" || op21.value!=parseFloat(op21.value)) op21.value=0; if(op22.value=="" || op22.value!=parseFloat(op22.value)) op22.value=0; if(op23.value=="" || op23.value!=parseFloat(op23.value)) op23.value=0; if(op24.value=="" || op24.value!=parseFloat(op24.value)) op24.value=0; if(op25.value=="" || op25.value!=parseFloat(op25.value)) op25.value=0; if(op26.value=="" || op26.value!=parseFloat(op26.value)) op26.value=0; if(op27.value=="" || op27.value!=parseFloat(op27.value)) op27.value=0; if(op28.value=="" || op28.value!=parseFloat(op28.value)) op28.value=0; result.value=0; result.value=parseInt(result.value); result.value=parseInt(result.value)+parseInt(op1.value*5)+parseInt(op2.value*5)+parseInt(op3.value*5)+parseInt(op4.value*5)+parseInt(op5.value*5)+parseInt(op6.value*5)+parseInt(op7.value*0)+parseInt(op8.value*8.50)+parseInt(op9.value*3.75)+parseInt(op10.value*0)+parseInt(op11.value*10)+parseInt(op12.value*5)+parseInt(op13.value*3)+parseInt(op14.value*4)+parseInt(op15.value*2)+parseInt(op16.value*4)+parseInt(op17.value*5)+parseInt(op18.value*3)+parseInt(op19.value*5)+parseInt(op20.value*4)+parseInt(op21.value*3)+parseInt(op22.value*0)+parseInt(op23.value*1)+parseInt(op24.value*0)+parseInt(op25.value*0)+parseInt(op26.value*4)+parseInt(op27.value*2)-parseInt(op28.value); } </script> I currently am using a mootools popup on www.Hope1st.com to play his music videos.....and its working really well...only thing is on some computers (mac with firefox browser) when someone pauses the video ...the draggable box gets stuck on their mouse weird right? yea i know... so i thought of a solution...instead of the whole box being draggable why not just the black titlebar be draggable? i have absolutely no idea on how to do this....but i do have the entire JS code....are you ready? its a mouthful....a million thanks to whoever is talented enough to help me Code: var mooSimpleBox = new Class({ options: { width: 300, height: 200, opacity: '0.8', btnTitle: "Ok", closeBtn: null, boxTitle: "messageBox", boxClass: 'mainBox', id: 'myID', fadeSpeed: 500, box: null, addContentID:null, addContent: null, boxTxtColor: '#000', isVisible: false, isDrag: true }, initialize: function(options){ this.isVisible = false; if(options['isDrag']) this.isDrag = options['isDrag']; if(options['width']) this.width = options['width']; if(options['height']) this.height = options['height']; if(options['opacity']) this.opacity = options['opacity']; if(options['btnTitle']) this.btnTitle = options['btnTitle']; if(options['boxTitle']) this.boxTitle = options['boxTitle']; if(options['boxClass']) this.boxClass = options['boxClass']; if(options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor']; if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed']; if(options['id']) this.id = options['id']; if(options['closeBtn']) this.closeBtn = $(options['closeBtn']); if(options['addContentID']) this.addContentID = options['addContentID']; if(options['addContentID']) { this.addContent = $(this.addContentID).innerHTML; $(this.addContentID).setStyle('visibility','hidden'); $(this.addContentID).remove(); } this.createBox(); }, createBox: function(){ this.box = new Element('div'); this.box.addClass(this.boxClass); }, clickClose: function(){ $(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){ }).start(this.opacity,0); this.box.setStyle('display','none'); this.isVisible = false; }, fadeOut: function(){ if(this.isVisible){ $(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){ }).start(this.opacity,0); this.isVisible = false; } }, fadeIn: function(){ if (document.documentElement && document.documentElement.clientWidth) { theWidth=document.documentElement.clientWidth; }else if (document.body) { theWidth=document.body.clientWidth; } if (window.innerHeight) { theHeight=window.innerHeight; }else if (document.documentElement && document.documentElement.clientHeight) { theHeight=document.documentElement.clientHeight; }else if (document.body) { theHeight=document.body.clientHeight; } var top = window.getScrollTop(); var boxTop = (theHeight - this.height) / 2 ; boxTop = (boxTop + top); var boxLeft = (theWidth - this.width) / 2; this.box.setStyle('top',boxTop); this.box.setStyle('left',boxLeft); this.box.setStyle('position','absolute'); this.box.setStyle('width',this.width); this.box.setStyle('height',this.height); this.box.setStyle('opacity',this.opacity); this.box.setStyle('cursor','move'); this.box.setStyle('z-index','999990000'); this.box.setAttribute('id', this.id); this.box.setStyle('visibility','hidden'); this.box.injectInside(document.body); if(this.isVisible == false){ this.box.effect('opacity',{ wait:true, duration: this.fadeSpeed, transition: Fx.Transitions.linear }).start(0,this.opacity); this.addHT(); this.isVisible = true; } }, addHT: function(){ this.closeBtn = new Element('button', { styles: { 'border': 'none', 'background-image':'url(modules/mod_moopopup/moopopup/images/bg_button.gif)', 'color':'#fff', 'position':'absolute', 'bottom':'3px', 'right':'3px', 'width':'44px', 'height':'19px', 'font-size':'13px', 'font-weight':'bold', 'font-family':'arial', 'cursor':'pointer' } }) var width = this.width.toInt() + 5; if(window.ie){ var titleBar = new Element('div', { styles: { 'width' : width, 'height': 'auto', 'background-repeat': 'repeat-x', 'background-position': 'right top', 'line-height': '20px', 'padding': '5px 5px 5px 10px', 'position': 'absolute', 'clear': 'both', 'margin-bottom': '10px', 'top': '0px', 'left': '0px', 'color': '#eee' } }) }else{ var titleBar = new Element('div', { styles: { 'width' : width, 'height': 'auto', 'background-repeat': 'repeat-x', 'background-position': 'right top', 'line-height': 'auto', 'padding': '5px 5px 5px 10px', 'position': 'absolute', 'clear': 'both', 'margin-bottom': '10px', 'top': '0px', 'left': '0px', 'color': '#eee' } }) } $(titleBar).innerHTML = this.boxTitle; var insideDiv = new Element('div',{ styles: { 'padding':'10px' } }); insideDiv.setAttribute('id','myContent'); this.box.innerHTML = ""; insideDiv.injectInside(this.box); insideDiv.innerHTML = this.addContent; this.closeBtn.innerHTML = this.btnTitle; $(this.closeBtn).addEvent('click',this.clickClose.bindWithEvent(this)); titleBar.injectInside(this.box); this.closeBtn.injectInside(this.box); if(this.isDrag == 'true'){ this.box.makeDraggable(); } } }); mooSimpleBox.implement(new Options, new Events); Dear friends, I was looking for some help on getting all the ten digits mobile numbers in the current webpage and assign an onclick event to it just by a click of a button. Likewise, Suppose there are mobile numbers Code: <p>9876543210 Blah....Blah...Any other content.9654321000</p> <input type="button" value="Get 10 digit mobile numbers" onclick="getnumbers();" /> in the current webpage. and the user clicks on a button. Then all the ten digit mobile numbers(in this case two numbers 9876543210 and 9654321000) gets the html as Code: <p><span onclick="openpopup('9876543210')">9876543210</span> Blah....Blah...Any other content.<span onclick="openpopup('9654321000')">9654321000</span></p> I am a PHP guy and probably suck at JS. Tried experimenting with the following code but didn't got it to work. Code: var html = document.getElementsByTagName('body')[0].innerHTML; and match = new RegExp("/\d{10}/"); replaceWith = "<span style='text-decoration:underline;' onclick=\"openpopup('--NUMBER--')\" >--NUMBER--</span>", replaced = html.replace(pattern,replaceWith); Please get me out of this glitch as it is getting harder for me to do it. If number is more than 24 digits, modulus operator is not giving correct output here attached sample code [code]<script type="text/javascript"> var a=10000000000000000000000.0; var b=10.0; var c=a % b; alert("c"+c); </script>[code] please tel me solution ----------SOLUTION---------- ----------ORIGINAL PROBLEM---------- The second line of code. What does it do? It's confusing because it doesn't have a semicolon at the end and it doesn't end with (). Code: var centreicon = new GIcon(); centreicon.constructor centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png "; centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png "; centreicon.iconSize = new GSize(12, 20); centreicon.shadowSize = new GSize(22, 20); centreicon.iconAnchor = new GPoint(6, 20); centreicon.infoWindowAnchor = new GPoint(5, 1); I found this on stackoverflow while trying to find a way to make my own icons on a map. With that being said. I'm still confused about how to apply the new graphic to a map. I don't see how they apply that picture to a coordinate. Does anyone know how to do that? Can I do this? Code: var centreicon = new GIcon(); centreicon.constructor centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png "; centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png "; centreicon.iconSize = new GSize(12, 20); centreicon.shadowSize = new GSize(22, 20); centreicon.iconAnchor = new GPoint(6, 20); centreicon.infoWindowAnchor = new GPoint(5, 1); var marker = new GMarker( new GLatLng(-34.397, 150.644) , centreicon); map.addOverlay(marker); -------- A tad bit later -------- So this is the code I have on my testing site Even thought I'ved defined the the icon's image and location It does not show up on the map. What am I missing? Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAWhjy3iZ8g6BZszj299c0yUY6ahKpSr1U&sensor=false"> </script> <script type="text/javascript"> function initialize() { var myOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var centreicon = new GIcon(); centreicon.constructor centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png "; centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png "; centreicon.iconSize = new GSize(12, 20); centreicon.shadowSize = new GSize(22, 20); centreicon.iconAnchor = new GPoint(6, 20); centreicon.infoWindowAnchor = new GPoint(5, 1); var marker = new GMarker( new GLatLng(-34.397, 150.644) , centreicon); map.addOverlay(marker); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript"> function Change_Big_One(thumb){ document.getElementById('BigOne').src=thumb.src.replace("_th","") } </script> HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> QUESTION 1: Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction. Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings. I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image. So, let's say this is the URL: www.adomainname.com/image.jpg and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k. So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px. For an image that's 300 px x 500 px, it should remain as such. For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px. I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited. Note: The part that I am most interested in is in being able to detect the size / dimensions of the image. QUESTION 2: On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.) Hello, I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document). Links: http://www.courtneyhunt.com.au/press_bg.html http://www.courtneyhunt.com.au/press_gallery.html I am a complete novice with JavaScript so if anyone could help that would be great. Thank you in advance. Hello, My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here. When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here Can anybody help me debug this?? I'm going nuts Thank you Hi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! |