|
JavaScript - Easy Q: Coding A Button Image
Hi,
I' will be using the code he http://javascriptkit.com/script/cut1.shtml which uses a button to randomly redirect - just what I need! As a newby to JS: 1. Can i simply insert a special image for the button? 2. As I need to offer a hundred or more destinations ( internal pages) must I list them on the initiating page? 3. My intention is to use iframes to contain the imported pages. OR, is there an easier way? :-) TIA, Similar TutorialsI have a basic Javascript slideshow that flicks through a series of 6 jpg images very quickly. I also have a button that i need coded so that when a user clicks on the button, the script for the slide show slows down the speed of the flicking images slowly over the coarse of ten seconds and stops on an image. How do i go about coding the button in javascript? I hope this makes sense. Thankyou Here is my code so far. var i, imgs, pic; function rotate() { pic.src=imgs[i]; (i===(imgs.length -1))? i=0:i++; setTimeout(rotate,500); } function diceroll() { pic=document.getElementById("yes"); imgs=["photo1.jpg", "photo2.jpg","photo3.jpg","photo4.jpg","photo5.jpg"]; var preload=new Array(); for(i=0;i<imgs.length;i++) { preload[i]=new Image(); preload[i].src=imgs[i]; } i=0; rotate(); } Hi all, thank you in advance for reading this thread. I have a very simple web page that is comprised of the same image over and over again. I have it to when you click on it, it swaps the image out and adds 1 to the counter. I need it to subtract 1 when you click it again. I am having the most difficult time trying to solve this one, so hopefully someone can help. Here are the scripts I am working with: <script type="text/javascript"> var namesVec = new Array("block.png", "block_hover.png"); var root='images/'; function swapImg(ima){ // divides the path nr = ima.getAttribute('src').split('/'); // gets the last part of path, ie name nr = nr[nr.length-1] // former was .split('.')[0]; if(nr==namesVec[0]){ima.setAttribute('src',root+namesVec[1]);} else{ima.setAttribute('src',root+namesVec[0]);} } function addItem(thecount){ if (document.images) { document.getElementById(thecount).innerHTML = parseFloat(document.getElementById(thecount).innerHTML)+1; } } </script> I mean, is there a way to assign "add 1 when clicked" or "subtract 1 when clicked" to image properties? Or may this needs a complete rewrite? Any direction and advise would be appreciated. Sincerely, Jaime 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. Short version at bottom Need to add an array before an array to init thousands of arrays. Mostly worked out, just need to add an array before an array. ........Please check it out. Really want to finish this tonight or tomorrow. Alright, so two days later I finally have this portion working but its only because of the awesome people of this forum and unforunately these people thought I had some half decent grasp of javascript (which I don't) and so their answers were meant to solve my problem but each time I was left with no idea how to repeat what they did. So, I've learned a lot of extra stuff that I really could have done without in the effort to try and understand what they did. This is all well and good because I'm much farther than I am had I gone it alone (so thank you!) but please, anyone that posts an answer, could you try and explain a bit of how I might use your solution again. For example, today I was confused for about an hour because I didn't understand how [CODE]var newArray=[], a, i=0;CODE] worked but only after staring at it long enough and not finding anything on google related to "values inputed after array initialization" did I finally realized that these were not params of a new array but just new variables. Code:
var alphabetArray =['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','all1'];
var a;
var i=0;
while(a=alphabetArray[i++]){
eval('var _img_'+a+' = []');
eval('var _h_'+a+' = []');
eval('var _r_'+a+' = []');
eval('var _m_'+a+' = []');
eval('var _yt_'+a+' = []');
}
alert(_h_all1)
and its working perfectly but I somehow I need to add Code: var pageNum = ['','p2_','p3_','p4_','p5_','p6_','p7_','p8_','p9_','p10_'] need to add pageNum to every alphabetArray so... _img_a = [],_img_p2_a = [], img_p3_a = [].... _img_p10_a = [] repeated for every variable in alphabetArray. _yt_p10_all1=[] Super short version Code: var alphabetArray =[letters/numbers];
var a;
var i=0;
while(a=alphabetArray[i++]){
eval('var _img_'+a+' = []');
}
// works now I need to add 10 page prefixes before each var in alphabetArray
Code: var pageNum = ['','p2_','p3_','p4_','p5_','p6_','p7_','p8_','p9_','p10_'] need to add pageNum to every alphabetArray so... _img_a = [],_img_p2_a = [], img_p3_a = [].... _img_p10_a = [] repeated for every variable in alphabetArray. _yt_p10_all1=[] Please explain how this might be possible in a way that your dog might understand. i got javascripts button : Code: <input type="button" value="select" onClick="document.getElementById('input').select()" />
how can i transform "button" to image button (gif) i am trying to change my background image after click on given in grid option. any body show me complete code in java script. resource: HP Laptop Repair and Solution Service Center in Delhi I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button: Code: <input type="button" value="Preview" onClick="popupform();"> works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry). When I substitute Code: <input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();"> everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found. The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff. Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php) Thanks in advance. Hey i have a map (belgium) with markers on it, when i press a marker an alert has to appear with some text but it just doesnt appear I dont want to use javascript in my html this is what i got atm, html: Code: <div class="mapdiv">
<img class="map" src="images/Map.gif"/>
<img type="image" id="markerJoly" src="images/dot.png"/>
<img type="image" id="markerDielis" src="images/dot.png"/>
<img type="image" id="markerRietje" src="images/dot.png"/>
<img type="image" id="markerClissen" src="images/dot.png"/>
</div>
javascript: Code: addEventListener("load", Map, false);
function Map(event) {
var knop1 = document.getElementById("markerJoly");
if (knop1.onclick){
AlertBox1();
}
function AlertBox1() {
alert("1.")
}
function AlertBox2() {
alert("2.")
}
function AlertBox3() {
alert("3")
}
function AlertBox4() {
alert("4")
}
}
Alert doesnt show up, pls help Thanks in advance Hello, first of all: sorry for my english, not native language. so i have: <body> <img src="hello.png" /> </body I want a "next button", when i press to skip at "hello2.png". Probably it's very simple but i really don't like javascript, i don't know how to make this. I want to be very simple and small if that's possible, what i founded on google it's too hard for me to edit. Thanks u very much! Hope this is right section. Hi, I have a button with a class name as below: <input type="button" class="test" value="Add" onclick=Dothis(this);> class test { background-image: url("test.png"); } I would like to disable the button when clicked function Dothis (element) { element.disabled = 'true'; } This is working fine (i'm seeing it as disabled(grayedout)) when i wont set any class. But when i set the class to "test" i'm not seeing any change. Can you please let me know how i can resolve this. 1) I have a group of radio buttons and have an image for each button. is there anyway to get that image to go with the value of the radio button to the next page when the radio button is pressed. I already have a script to place the value of the radio button into a text box but i cant seem to get the image to follow. 2) also is the a script to have 3 text boxes in a form post in a second form hidden and reappear in a third form before submit I am trying to make a button that would change the background image whenever somebody clicks it. I have tried something along the lines of this: Quote: <input type="button" value="Pattern1" onClick="background-image: url(background.png);background-repeat: no-repeat;"> and, Quote: <input type="button" value="Pattern2" onClick="background: url(background.png);background-repeat: no-repeat;"> as you can see, I am a beginner at coding in general so any help is appreciated. My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong. I just started my javascript class two weeks ago and am having troubles already and my book is no help. My first assignment is having a list of country names and when you click the radio button next to the name the country flag pops up in a designated area for the image. I have tried a few different things but nothing is working. I have the list of countrys and the radio buttons but when i click the radio button the image doesn't pop up. Also, when i click another radio button they all stay selected. hi, on my website http://zend.warrencreative.com/gemini-group/index.html I am using thickbox, if you click on Subscribe to newsletter at the top it opens up a box, I need to change type="button" to type="image" but this doesn't work?! is there any other way? Code: <a class="newsletter thickbox" href="#TB_inline?height=325&width=365&inlineId=myOnPageContent&modal=true">Subscribe to eNewsletter</a> <div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p> </p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&width=365&inlineId=myOnPageContent1"> <input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div> <div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div> thanks in advance Hi to All, I have this problem: I' dl ike that, if one clicks a button, appear window_explorer in which it' s possible to choose an image that it will put in the specific td of the table. <head> <script> function add_pic() { document.forms[0].pic.value == code to choose image ... } </script> </head> <body> <form method="POST" name="FrontPage_Form1"> ... <table> <tr><td><button onClick="add_pic()">Insert Statitistic map</button></td></tr> <tr><td>Comments</td></tr> <tr><td id="pic" name="pic"> PLACE IN WHICH IMAGE APPEAR </td></tr> </table> ... </body> Thanks in advance !!! P.S. I use IE6 and Windows XP Hi, I have this button: Code: <input type="image" src="pause.png" onmouseover="src='pauseon.png'" onmouseout="src='pause.png'" onclick="togglePause()" id="pauseBtn"/> which changes from the play image to the pause image when clicked, using this function: Code: function togglePause(){
if (paused){
paused=false;
document.getElementById('pauseBtn').src="pause.png";
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
document.getElementById('pauseBtn').src="play.png";
}
}
but it doesn't really work how I want it to - first off, I can't get the same mouseover and mouseout effect working for when the button is on the "play" image secondly, the button reverts to the pause image regardless of if it is in play or pause state. I'm kind of lost - can someone throw me a line? the page I'm working on is here if you want to have a look I am trying to follow this article on doing a POST request with AJAX and PHP and it works fine, but as soon as I switch from the default submit button to an image I get an error. I would really appreciate any assistance on why switching the submit button to an image would affect it. Thanks http://www.hiteshagrawal.com/ajax/form-post-in-php-using-ajax/comment-page-1 So I found this script and i give all props to the author but can anyone help me to add text to the random images. Also i need a button that will generate the random images/text not when you refresh the page but when your press the button and to not display any image/text till the button is pressed? Thanks in advance. [CODE] <script language="Javascript"> var currentdate = 0 var core = 0 function StringArray (n) { this.length = n; for (var i =1; i <= n; i++) { this[i] = ' ' } } image = new StringArray(10) image[0] = 'images' image[1] = 'images' image[2] = 'images' image[3] = 'images' image[4] = 'images' image[5] = 'images' image[6] = 'images' image[7] = 'images' image[8] = 'images' image[9] = 'images' var ran = 60/image.length function ranimage() { currentdate = new Date() core = currentdate.getSeconds() core = Math.floor(core/ran) return(image[core]) } document.write("<img src='" +ranimage()+ "'>") </script> <form> <p><input type="button" name="B1" value="Switch It Up" onclick="ranimage()"></p> </form> [CODE] I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image. I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click". The only code sources i have found will swap images in the same table area and not to any image existing in the entire document. thanx |
|||||||