|
JavaScript - Problem With Simple Image Swapping Script
Hi, everyone. I've been scratching my head about what's wrong with my script for awhile now. What I need to do is use the swapImages(id1,id2,id3) function to simply swap three images at an interval of 2 seconds. What happens with my script is that the first image shows up, and after 2 seconds, it switches to the next one. The problem is that the images start rapidly switching infinitely after those first two seconds. Could someone point out where the problem spot in my code is? Here's the code from my external js file:
Code: function swapIt(id1,id2,id3)
{
var object1 = document.getElementById(id1);
var object2 = document.getElementById(id2);
var object3 = document.getElementById(id3);
var z1 = object1.style.zIndex;
var z2 = object2.style.zIndex;
var z3 = object3.style.zIndex;
object1.style.zIndex = z3;
object2.style.zIndex = z1;
object3.style.zIndex = z2;
}
Here's the code invoking this function in my html file: Code: function moveAvalon()
{
var x = xCoord("avalon");
if(x <= (W - 125))
{
shiftIt("avalon", 10, 0);
setInterval("moveAvalon()", 50);
}
else if(x > (W - 125))
{
swapImages();
}
}
function swapImages()
{
showIt("kids");
showIt("fiction");
showIt("nfiction");
setInterval( 'swapIt("kids", "fiction", "nfiction")' , 2000);
}
Similar TutorialsI have selection boxes that when you choose an option an associated picture is supposed to display.. the problem is that with IE i can use whatever attribute i want and i get the desired effect except with the label attribute which happens to be the only attribute (i know of) that firefox will work with... IE still swaps the picture but also changes the text in the selection box to the img url.. here are my codes: Code: function swapImage(){
var theImage2Display = document.comp.caseselect.options[document.comp.caseselect.selectedIndex].label;
var imagePlace = document.getElementById("caseimg");
imagePlace.src = theImage2Display;
}
and in the html Code: <img src="start.jpg" id="caseimg" /> <select name="caseselect" style="width:625px" onchange="Calculate(); swapImage();"> <option label="start.jpg" value="0" selected="true">Case</option> <option label="COOLER MASTER Elite 310red.jpg" value="50">COOLER MASTER Elite 310 Red ($50.00)</option> <option label="COOLER MASTER Elite 310blue.jpg" value="50">COOLER MASTER Elite 310 Blue ($50.00)</option> <option label="COOLER MASTER Elite 310orange.jpg" value="50">COOLER MASTER Elite 310 Orange ($50.00)</option> <option label="COOLER MASTER Elite 310silver.jpg" value="50">COOLER MASTER Elite 310 Silver ($50.00)</option> </select> Hi all, Did some searching but couldn't find anything to help me. I'm looking for a simple quiz script - basically, there would be an image on the screen (would be great if it was randomly generated out of maybe 100 different choices). The visitor would then click on one of two buttons (this is the "quiz" part) answering a question about the photo which was displayed. The script then tells the visitor if they got the answer right or wrong and then loads a new image for them to try again. It would be great if the script could keep a "streak counter" based on how many images a visitors got correct in a row. So for example: Question: is this a cat or a dog? [random image of dog or cat] [button to answer dog] [button to answer cat] Would this be fairly easy to implement (is there something like this already around) or is it more complicated than that? Thanks a bunch in advance for any help you can give. hi everyone. i have to create the 15 puzzle game and im having a difficult time getting started. can anyone help? i need to create a table (4x4) that has one empty space. All the other spaces must have a random generated value between 1 and 15. All i got so far is a onclick image swapping function.... need help! thanks
Hey guys, so I am a designer (not a developer) doing a site for someone. I am playing with some simple free javascripts. I have lightbox and toggler. Both work great individually. They are conflicting and everywhere online says to set the both to onLoad in the body tag. Sounds easy enough. But I can't seem to figure out the call for this script: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/expand.js"></script>
<script type="text/javascript">
$(function() {
$("h2.expand").toggler({method: "fadeToggle"});
});
//--><!]]>
</script>
<body onload="toggler();initLightbox()"> is what is seems like it should be for me. But that isn't working at all. Please help! I feel like I have tried every possible name with the toggler()... If you need more, I can point you to the site itself and you can see all of the (messy) code. Having an unusual problem with the simple validation script below. In my script, I want to validate the username text field so that if the value of the text field (i.e. the amount of characters in the field) is less than 5, it would show a message in the page using innerHTML. The script works, but in a roundabout sort of way, or at least that's what it seems to me. Instead of making sure that the amount of characters in the text field is less than 5, it seems to disregard this entirely and instead make it so that if it has no value at all, the message will be shown. If it has a value of even 1 character, though, the message does not show. Not what I was trying to do, and I really don't know what's happened. Thanks in advance to anyone who can help out a newbie in need. Code: function uservalidate() {
if (document.getElementById("user").value < 5)
{ document.getElementById("userdiv").innerHTML = "Username must be six characters or more." }
else
{
document.getElementById("userdiv").innerHTML = ""
}
}
Code: <body>
<form id="form1">
<input type="text" id="user" onblur="uservalidate()" />
<div id="userdiv"></div>
</form>
</body>
</html>
I've created a javascript version of the classic game SOKOBAN. Basically what happens is you move the man around the "warehouse" and he must push the boxes into the target area. Copy the code and try it yourself to see what I have so far (note-he can't move the boxes yet). My question is: Right now, my map consists of solid color blocks. What I WANT them to be is image files (for example: box.png, wall.png, floor.png) to add a little versatility and life to the map. I am not sure how to make this switch though. I suspect I make the change somewhere in the tile array in the initialize function, but I am not sure what.. Also, how can I get the boxes to actually MOVE? I.e. when my man pushes them, they move around in the direction he pushes? Any help would be much appreciated. Thank you kindly Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sokoban</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 48px;
}
#warehouse
{
width: 680px;
height: 400px;
position: relative;
}
.box
{
background-size: contain;
}
.box, #man
{
margin: 0;
padding: 0;
display: inline-block;
width: 40px;
height: 40px;
float: left;
}
</style>
<script type="text/javascript">
var map_width = 17;
var map_height = 10;
var grid;
var player_x;
var player_y;
var tile;
function initialize()
{
grid = new Array();
grid[0] = new Array(0,0,0,0,0,5,5,5,5,5);
grid[1] = new Array(0,0,0,0,0,5,2,5,2,5);
grid[2] = new Array(0,0,0,0,0,5,2,2,2,5);
grid[3] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[4] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[5] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[6] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[7] = new Array(0,0,0,0,0,5,5,1,5,5);
grid[8] = new Array(5,5,5,5,5,5,5,1,5,0);
grid[9] = new Array(5,1,1,1,5,1,1,1,5,0);
grid[10] = new Array(5,1,3,1,1,1,3,1,5,0);
grid[11] = new Array(5,1,5,1,1,1,3,1,5,0);
grid[12] = new Array(5,1,1,1,3,5,3,1,5,0);
grid[13] = new Array(5,1,1,1,1,1,1,1,5,0);
grid[14] = new Array(5,1,5,5,5,5,1,1,5,0);
grid[15] = new Array(5,5,5,0,0,5,1,1,5,0);
grid[16] = new Array(0,0,0,0,0,5,5,5,5,0);
player_x = 14;
player_y = 1;
tile = new Array(
'green', /* grass */
'#202020', /* interior floor */
'red', /* target */
'brown', /* crate */
'brown', /* crate sitting on target */
'orange' /* brick */
);
draw_background();
position_man();
}
function draw_background()
{
for (var y = 0; y < map_height; ++y)
{
for (var x = 0; x < map_width; ++x)
{
var box = document.getElementById('box_' + x + '_' + y);
box.style.backgroundColor = tile[grid[x][y]];
}
}
}
function position_man()
{
var man = document.getElementById('man');
man.style.position = 'absolute';
man.style.left = 40 * player_x + 'px';
man.style.top = 40 * player_y + 'px';
}
function safe_check(x, y)
{
if (x >= 0 && x < map_width && y >= 0 && y < map_height)
return grid[x][y];
return -1;
}
function handle_key(e)
{
var move_x = 0;
var move_y = 0;
switch(String.fromCharCode(e.which).toLowerCase())
{
case 'w':
move_y = -1;
break;
case 'a':
move_x = -1;
break;
case 's':
move_y = 1;
break;
case 'd':
move_x = 1;
break;
default:
return false;
}
var s = safe_check(player_x + move_x, player_y + move_y);
if (s > 2)
{
return true;
}
player_x += move_x;
player_y += move_y;
position_man();
return true;
}
</script>
</head>
<body onkeypress="handle_key(event)">
<div id="warehouse">
<img src="man.png" id="man" />
</div>
<table>
<tr>
<th>up</th>
<th>left</th>
<th>down</th>
<th>right</th>
</tr>
<tr>
<th>W</th>
<th>A</th>
<th>S</th>
<th>D</th>
</tr>
</table>
<script type="text/javascript">
var warehouse = document.getElementById('warehouse');
for (var y = 0; y < map_height; ++y)
{
for (var x = 0; x < map_width; ++x)
{
var box = document.createElement('div');
box.id = "box_" + x + "_" + y;
box.className = "box";
warehouse.appendChild(box);
}
}
initialize();
</script>
</body>
</html>
i have this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly Code: <script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>
Hi all, Javascript is totally new to me and I am very frustrated. I have been trying to put together this ebay template and it's all set except I can't get my thumbnails to show the large image when you mouseover it! I believe my problem is that I don't have the <script type="text/javascript"> or <language=javascript> tag in the beginning of the template. Problem is im not sure if that's the prob or where to put it!! I tried putting it at the top and it made it so the whole template disappeared. I've tried putting it at various diff places and it messes the whole thing up. I'm lost! Please help! Here's the listing (sorry I would post just the part where there's an issue but I can't tell where that is! ) http://cgi.ebay.com/ws/eBayISAPI.dll...%3DI%26otn%3D2 Lets say I have two images in a box Code: <body> <div id="box"> <img src="image1.jpg" id="image1" width="100" height="100" /> <img src="image2.jpg" id="image2" width="100" height="100" /> </div> </body> When I click on Image1 I want Image2 to get replaced with a new image, called Image3. So I tried this code: Code: var image1 = document.getElementById("image1");
image1.onclick = image1_click ();
function image1_click () {
new_image= new Image
new_image = document.getElementById("image2");
new_image.src="image3.jpg"
}
But instead of replacing the image on click, from some reason it replaces image2 with image3 from start/load. What should I do to make this work? Thank you. I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 Hi, I need a very simple script that will do the following : I have a HTML form. I have an input call "title". Say I wrote "fleur-de-lys" I have a text area call "text" When I hit the submit button I want to do : 1. Create a HTML webpage with the name in input : fleur-de-lys.html 2. Add the text in "text" somewhere in the body of that new file fleur-de-lys.html 3. Add a preview of that text somewhere in my index page Basically it's like you post a new article on wordpress or whatever, but I just want something simple no database and just need help on how I do this. Thank you very much ok i am trying to make a countdown timer from 20 seconds when i click start where am i going wrong with this Code: <html>
<head>
</head>
<body>
<script type="text/javascript">
function timer()
{
var milisec=0
var seconds=20
document.counter.d2.value=20
function display()
{
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
display()
}}
</script>
<form name="counter">
<center>
Text Timer<br>
<input type="text" size="30" name="d2"> <br>
<input type="button" onclick="timer()" value="click me to start">
</center>
</form>
</body>
</html>
Hi everyone, I'm needing some help capturing just the file name rather than the entire path of the SRC on my input type="image". Basically when I hover over an image, the Default Image should change to the image being hovered on. Here is my code, can't quite get it to work. Sorry I'm very new to JavaScript Code: <html>
<head>
<script language = "Javascript">
function ChangeDefault(src)
{
//document.frmMain.DefaultImage.src = src <--Doesn't work at all
alert(src) //<---Displays the entire file path, want just file name
}
</script>
</head>
<body>
<form name="frmMain">
<input type="image" name="DefaultImage" SRC="RWDie1.bmp" HEIGHT=110 WIDTH=160 />
<br />
<input type="image" name="img2" SRC="RWDie2.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img3" SRC="RWDie3.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img4" SRC="RWDie4.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img5" SRC="RWDie5.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
</form>
</body>
</html>
Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation. I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself. The images do have some classes built into them, but no IDs. Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image. Here is my code so far: Code: <div class="images" id="big-image"> <a href="dianaminiflash_shop0001-11.jpg"> <img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a> <div class="thumbnails"> <a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first"> <img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_fern-green_front1.jpg" class="product-thumb "> <imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last"> <img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> </div> </div> One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is: Code: $(".thumbnails a").click( function() {
var changeSrc = $(this).attr("href");
$(".attachment-shop_single").attr("src", changeSrc);
return false;
});
Any suggestions on what I'm doing wrong here? I really appreciate the help in advance. Hi everyone, I am looking for JS script to replace find all the href values on a page and replace those href values matching them with an array of values. my array, lets say is a = {'some.ex.com', 'abc.ex.com/tv', 'some.name.ex.com', 'bcd.ex.com/dir1/dir2/some.jsp' }; etc i want to find all the URLs on a given page, check if each found url matches with any of the values in the array, if match found, just replace only "ex.com" with "example.com" for every match. I am all new to JS and please please help Many thanks I am a very novice web coder and can't get this to work... I've tried everything and am getting no where but frustrated! Thanks in advance!! Code:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function calculateSavings()
{
var lastBill = eval(document.theForm.elements[0].value);
var frequencyRating = eval(document.theForm.elements[1].value);
var savingsRate = .05;
var annualSavings = 0;
/*
if (frequencyRating == 'every day)
{
savingsRate = .01;
}
else if (frequencyRating == 'weekly)
{
savingsRate = .05;
}
else if (frequencyRating == 'monthly')
{
savingsRate = .15;
}
else if (frequencyRating == 'yearly')
{
savingsRate = .2;
}
*/
annualSavings = lastBill * savingsRate;
document.write(annualSavings);
}
// End -->
</SCRIPT>
</head>
<body>
<form name="savingsCalcForm">
How much was your last bill?
<br><INPUT TYPE="text">
<br>
<br>
How often are you using your tractor?
<br><input type="radio" name="group1" value="every day"> every day<br>
<input type="radio" name="group1" value="weekly "> weekly<br>
<input type="radio" name="group1" value="monthly"> monthly<br>
<input type="radio" name="group1" value="yearly"> yearly<br>
<br>
<br>
<INPUT TYPE="button" VALUE="calculate savings" onClick="calculateSavings();">
</form>
</body>
</html>
Hi all, I know this sounds absurd, but I like to display a clickable image in javascript. I have searched the net for like 2 hours, and I simply CANT find any page that can help me with that extremely simple javascript. This is how its look like in html: Code: <a href="http://www.horse.com"><img src="jul.jpg" width="468" height="80" border="0" /></a> Please! How can I make that simple code in javascript?! Thanks! Hey, so I have successfully used this tutorial; http://articles.sitepoint.com/articl...y-javascript/3 to create a web page that "smoothscrolls" down to a certain point of content on the page. So, I know the java works! My problem is, I have changed the website to be along the X axes and not the Y, so instead of it scrolling "down" the page, I would like it to scroll from left to right. i.e on the X axes not the Y. Is there anyway of doing this by editing that java file? All my buttons work and display the correct part of the website, but the java doesn't work slidiing sideways. Thank you in advance! Darren Code: <script type="text/javascript">
function toggleVisibility4(controlId)
{
var z = document.forms["frm_sms"]["phone"].value;
var minimumnum = 10;
var control = document.getElementById(controlId);
if (z.length <= minimumnum)
{
control.style.visibility = "visible";
}
else
{
control.style.visibility = "hidden";
}
</script>
im not sure where im going wrong i am calling this script from a " onkeyup="toggleVisibility4('arrow')" " the arrow is a div i am wanting to hide when the input field "phone" on a form id of "frm_sms" has more than 10 characters any ideas guys For part of my program I need a function that will switch two images, so when image 1 is clicked on, the function saves image 1, then image 2 is clicked on, and the spot where image 2 is receives the first image, while the place where image 2 was becomes the first image, a simple swapping function. yet, I'm having trouble writing it; this is what I have: <script> click=1 function swap(What input do I need? the img src?){ if (click==1){ var1=imgsrc click=2 } else{ var2=imgsrc //then switch them so: x=var1 var1=var2 var2=x click=1 } } </script> |
|||||||