|
JavaScript - Perform Images
I have a page HTML. In HTML have 1 button, when click into button that'll appear 1 window. In this window, it's show 1 image and after 5s it will change the other image. Plz, help me. I can't do this. Thanks
Similar TutorialsHi there, To summarize my problem: For example: Sales : $ 5 (id=sales) Discount: 11% (id=disc) Total Discount: $ 0.55 (id=disc) Rounded Discount: $ 0.6 (1 decimal) (id=rounded) Net Sales: $ 4.40 (id=net_sales) document.getElementById("net_sales").value = sales - rounded.toFixed(1); Net Sales: $ <input id = "net_sales" type="Text" name="net_sales" size="4" value="<?php if (!empty($net_sales)) echo $net_sales; ?>"> I tried the above, it is working in the browser. However, it cannot be written into MYSQL (with PHP). What is wrong with my Javascript? Thanks. I want to have a real time text ticker. I would be able to type something in and it would continue to scroll until I typed something else (followed by the return key), and it would scroll that, without the end-user having to refresh their screen to see the update. I was hoping their might be a script out there already that does that, but since I can't find one, I thought I'd see about trying to create one. What would be the most practical scripting language to use? Or if you know of something that does this already, could you point me in the right direction. Hey I am having trouble getting my javascript code to work. It seems to not register the event or even carry out the code. I have attached my code. index.php 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 rel="stylesheet" href="StyleSheet.css" type="text/css" />
<script type="text/javascript" src="register.js"></script>
<title>CollegeStop.com - Your stop for used college books!</title>
</head>
<body>
<div class="wrapper">
<div class="logo">Logo goes Here</div>
<div class="login_bar">
<form action="" method="post">
<table>
<tr>
<td>Email:</td>
<td><input type="text" name="email"></td>
<td>Password:</td>
<td><input type="password" name="password"></td>
<td><input type="submit" name="login" value="Login"/></td>
</tr>
</table>
</form>
<p>Not yet a member? <a href="index.php">Register</p>
</div>
<div class="nav_bar">
<ul class="menu">
<li class="home"><a href="index.php">Home</a></li>
<li class="browse"><a href="browse.php">Browse</a></li>
<li class="contact"><a href="contact.php">Contact</a></li>
</div>
<div class="content_container">
<div id="recent">
<p>box of recent additions to the site</p>
</div>
<div id="about_us">
<p>Hi and welcome to CollegeStop.com. This is a site dedicated to hopefully getting you a bit of a return
on the money you spent on books.</p>
</div>
<div id="registration">
<h5>Your password must be atleast six characters in length. Please enter a valid email as
it will be our method to ensure you get an account!</h5>
<form id="registration_form" action="" method="post">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" id="firstName" name="first_name"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="lastName" name="last_name"/></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="intEmail" name="email_first"/></td>
</tr>
<tr>
<td>Retype Email:</td>
<td><input type="text" id="secEmail" name="email_second"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="intPass" name="pass_first"/></td>
</tr>
<tr>
<td>Retype Password:</td>
<td><input type="password" id="secPass" name="pass_second"/></td>
</tr>
<tr>
<td><input type="submit" value="Register"/></td>
<td><input type="reset" value="Clear Form"/></td>
</tr>
</table>
</form>
<script type="text/javascript" src="registerR.js">
</script>
</div>
</div>
</div>
</div>
<div class="footer"><p>2012 © Hassan Said</p></div>
</body>
</html>
register.js Code: function checkReg(){
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var intEmail = document.getElementById("intEmail");
var secEmail = document.getElementById("secEmail");
var intPassw = document.getElementById("intPass");
var secPassw = document.getElementById("secPass");
if((firstName == "")||(lastName == "")||(intEmail == "")||(secEmail == "")||
(intPassw == "")||(secPassw =="")){
alert("Please fill in all fields!");
firstName.focus();
return false;
}
}
registerR.js Code: document.getElementById("registration_form").onsubmit = checkRegister;
never mind
Hey everyone! I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click. I've uploaded the progress he http://www.aldousmassie.com/newprogress I'm using this code at the moment to scroll through the background: Code: <!-- SCRIPT FOR CHANGING BG ON CLICK -->
<script type="text/javascript">
imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->
<script type="text/javascript">
imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==5) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick? I'd appreciate any tips that point me in the right direction. Thank you. Hi there, I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help. All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that. What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones. It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them. I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images. I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image. Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time. Please help have a look at the scripts... Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out? I've wanted to make the image disappear shortly before a new image is loaded. I've worked on this and played around with the scripts, yet no finding... Please do tell me if you know the answer to it. Thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
var pic = document.getElementById("pic");
document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
}
var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
var o = 100;
var t;
var p = 0;
var f = 1;
function nextImageFading(){
t = setInterval(
function(){
pic.src = img[p];
pic.style.filter = "alpha(opacity="+o+")";
pic.style.MozOpacity = o/100;
pic.style.opacity = o/100;
o -= 1;
if(o<=0){
clearInterval(t);
if(p<img.length-1){
p = p+1;
}
else {p=0;}
pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;
o = 100;
}
},f);
}
</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>
if the elements have name attributes with the same value, according to legacy DOM, it will return an array of those elements if you access the name property of 'document'. However, this doesn't apply to img elements. If the HTML code is as follows: Code: <img src="img/a.jpg" name="pic" /><img src="img/b.jpg" name="pic" /> <form name="pic">a</form> <form name="pic">b</form> then document.forms["pic"] (return an array) <-- as expected document["pic"] or document.pic (return an array) <-- as expected document.images["pic"] : in IE -- it returns the last image in FF -- it returns the first image ~~OMG~~ any idea? thx in advance. Good afternoon I am trying to make a form and keep getting stuck on one thing, don't know if JavaScript is the way to go so any advise would be helpful. basicly i have a form giftcert.html -that has text input boxes the user fills in and a link to the next page for the user to pick a gift card giftcards.asp -the user picks a gift card by radio buttons (over 100)grouped by name and then pushes a button to take them to the next page passing the value of the radio and image (here is the issue) giftcert.asp -this page displays the text boxes from the first page with the value already present (used asp to achieve) and the value of the radio button (a stock number - used asp to achieve) and i want a sample of the image attached to the stock number. how do i pass the image attached to the radio button from giftcards.asp to giftcert.asp i don't know where i am going wrong a) how do i attach the image to the button do i use an onclick="pass src" and how b) how do i get the image to show up in giftcert.asp Hi to all, Plaese any body help me out. I have a problem with the flash. The flash file has been written in the javascript. just am calling the javascript file to my main page. Now i have a prob. When page loads, the flash image has jump to 2nd or 3rd image depending on the internet speed. if the net is fast, it is working well and starts from image 1 to till the end image. Now i have my query... if Is it possible to put the static image for the every time the page loads depending on the net speed and after complete the loading the flash has to start. Please egarly waiting for the answer. Hello guyz! I need to fetch some images whit custom sizes in Google Images, this is the API from Google that let me search end fetch images: Code: /*
* How to search for images and restrict them by size.
* This demo will also show how to use Raw Searchers, aka a searcher that is
* not attached to a SearchControl. Thus, we will handle and draw the results
* manually.
*/
google.load('search', '1');
function searchComplete(searcher) {
// Check that we got results
if (searcher.results && searcher.results.length > 0) {
// Grab our content div, clear it.
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = '';
// Loop through our results, printing them to the page.
var results = searcher.results;
for (var i = 0; i < results.length; i++) {
// For each result write it's title and image to the screen
var result = results[i];
var imgContainer = document.createElement('div');
var title = document.createElement('h2');
// We use titleNoFormatting so that no HTML tags are left in the title
title.innerHTML = result.titleNoFormatting;
var newImg = document.createElement('img');
// There is also a result.url property which has the escaped version
newImg.src = result.tbUrl;
imgContainer.appendChild(title);
imgContainer.appendChild(newImg);
// Put our title + image in the content
contentDiv.appendChild(imgContainer);
}
}
}
function onload() {
// Our ImageSearch instance.
var imageSearch = new google.search.ImageSearch();
// Restrict to extra large images only
imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
google.search.ImageSearch.IMAGESIZE_MEDIUM);
// Here we set a callback so that anytime a search is executed, it will call
// the searchComplete function and pass it our ImageSearch searcher.
// When a search completes, our ImageSearch object is automatically
// populated with the results.
imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
// Find me a beautiful car.
imageSearch.execute("Subaru STI");
}
google.setonloadCallback(onload);
But all I could find about restricted images sizes is this: Code: imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
google.search.ImageSearch.IMAGESIZE_MEDIUM);
My problem is that I need custom fixes images sizes, not between a range of values like the above script was giving me... Google API reference says that: Code: google.search.ImageSearch.RESTRICT_IMAGESIZE - When this is specified as the value of type, the image search results will be restricted to images with certain pixel dimensions. Valid optional values for this type are as follows: * google.search.ImageSearch.IMAGESIZE_SMALL - restrict to small images, icons * google.search.ImageSearch.IMAGESIZE_MEDIUM - restrict to medium images * google.search.ImageSearch.IMAGESIZE_LARGE - restrict to large images * google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE - restrict to extra large images Those who wants to play whit Google Playground, this is the link: Code: http://goo.gl/sPs2 Could some one help me get that images whit fixed sizes? http://visualslideshow.com/ I want the code for the pictures slideshow that is used in the above link. Help me out! is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?
Hi, I tried displaying few images as MENU using Javascript. These images are showed normally in Firefox and chrome except Internet Explorer. Help plz
I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script: Code: <!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
// -->
Where does the index come from? And how do I interpret images[index] if I were to read it out loud? I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks! Code: <body>
<center>
<script type="text/javascript">
var imageSrc = ['<img www.mysite.com/subfolder/001.jpg></img>','002.jpg','003.jpg',
'004.jpg','005.jpg','006.jpg'];
var imageSrc2 = [];;
function copyRandom(){
if (0 == imageSrc2.length) {
imageSrc2 = imageSrc.concat();
}
var randNum = (Math.random()*imageSrc2.length) | 0;
return imageSrc2.splice(randNum, 1);
}
</script>
<!-- <button
onclick="document.getElementById('xx').innerHTML = (copyRandom());"> -->
<button
onclick="document.getElementById('xx').innerHTML = (copyRandom());">
Draw A Card
</button>
<div id="xx"></div>
<!-- <div id="xx"></div> -->
</center>
</body>
Why are my images broken in this script? Specifically "<img www.mysite.com/subfolder/001.jpg></img>" as the rest are just placeholders until I solve the first one. 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 i have created a scrolling gallery using javascript but i am having trouble aligning my images. right now they are in the center of the page but at the bottom, but i want them on top of the page. here is my code. <html> <head> <title>Gallery</title> <link href="website.css" rel="stylesheet" type="text/css"> <left> <table border="0" width="50" height="200"> <tr><td><a href="unique sports.html"><img width="400" height="230" align="center" src="unique sports logo.gif" border="0"></td></tr> <tr><td><a href="unique sports.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/home button.gif" border="0"><a/></td></tr> <tr><td><a href="about us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/about us.gif" border="0"></a> </td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/reviews.gif" border="0"></a> </td></tr> <tr><td><a href="Contact us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/contact us button.gif" border="0"></a></td></tr> </td></tr> <tr><td><a href="shop section.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/shop section .gif" border="0"></td></tr> <tr><td><a/><a href="http://google.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/latest news .gif" border="0"></a></td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/photo gallery .gif" border="0"></a></td></tr> </table> <center> <table> <td> <script language="JavaScript1.2"> var scrollerwidth='500px' var scrollerheight='500px' var pausebetweenimages=3000 var slideimages=new Array() slideimages[0]='<img src="72757631_9c35b8eff2_o.jpg">' slideimages[1]='<img src="363507907_FEDxk-L.jpg">' slideimages[2]='<img src="2542265127_6108971aa4.jpg">' slideimages[3]='<img src="2795508357_66b1cea812.jpg">' var ie=document.all var dom=document.getElementById if (slideimages.length>2) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",50) } else{ tlayer.top=parseInt(scrollerheight) tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",50) } else{ tlayer2.top=parseInt(scrollerheight) tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){ tdiv.style.top=0+"px" setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2_obj)",pausebetweenimages) return } if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){ tdiv.style.top=parseInt(tdiv.style.top)-5+"px" setTimeout("move3(tdiv)",50) } else{ tdiv.style.top=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){ tdiv2.style.top=0+"px" setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2_obj)",pausebetweenimages) return } if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){ tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px" setTimeout("move4(second2_obj)",50) } else{ tdiv2.style.top=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (ie||dom){ first2_obj=ie? first2 : document.getElementById("first2") second2_obj=ie? second2 : document.getElementById("second2") move3(first2_obj) second2_obj.style.top=scrollerheight second2_obj.style.visibility='visible' } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=parseInt(scrollerheight)+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide> <layer id="first" left=0 top=1 width=&{scrollerwidth};> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[0]) </script> </layer> <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) </script> </layer> </ilayer> <script language="JavaScript1.2"> if (ie||dom){ document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">') document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</div>') } </script> </td> </tr> </table> </head> <body> </body> </html> Thank you hi all, i wanna make a 3d cube made of images (like this one: http://www.petitpub.com/labs/media/flash/3dcube/). it should rotate by itself randomly in various directions and stop on demand. does anyone know where to find a prototype or tutorial for that? thanx, |
|||||||