What i want to do is to have each of the images that i m using link to a site when i click on them.The images keep changing with the setinterval() method and the function changeimage().I have some html and some javascript code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLES.css">
<title>KURIA SELIDA</title>
<meta charset="utf-8">
</head>
<body>
<table class="tablearxikhs">
<tr>
<td></td>
<td class="tdarxikhs" STYLE="font-size:150%;"> ΚΑΤΑΧΩΡΗΣΕΙΣ </td>
<td class="tdarxikhs"><h1>ΤΑΞΙΔΙΩΤΙΚΟ ΓΡΑΦΕΙΟ </h1></td>
<td class="tdarxikhs" style="font-size:150%;">ΕΠΙΚΟΙΝΩΝΙΑ</td>
</tr>
</table>
<h2 style="text-align: center; ">Κορυφαίοι Προορισμοί Για το 2017-2018</h2>
<center><img id="myimages" src="kalabruta1.jpg" height="230" width="600"></center>
<br><br>
The JS part:
<br><br>
<script>
var image = document.getElementById("myimages");
var images = ["kalabruta1.jpg", "metewra1.jpg", "naxos11.gif", "metewra2.jpg", "kalabruta2.jpg", "naxos2.jpg"];
var i = 0;
function changeimage() {
if (++i >= images.length) i = 0;
image.src = images[i];
images[i].onclick = imglink;
}
setInterval(changeimage, 3000);
function imglink() {
window.location.href = 'https://www.google.gr/';
}
</script>
What i have tried in order to have the images link to a site doesnt work..Can somebody help?
I don't understand the logic of your code, however, this is my suggestion:
This line images[i].onclick = imglink; is using images[i] and that's incorrect because you're getting String objects, instead you need to replace that line with this: image.onclick = imglink; in order to apply the onclick event to the image.
<script>
var image = document.getElementById("myimages");
var images = ["kalabruta1.jpg", "metewra1.jpg", "naxos11.gif", "metewra2.jpg", "kalabruta2.jpg", "naxos2.jpg"];
var i = 0;
function changeimage() {
if (++i >= images.length) i = 0;
image.src = images[i];
image.onclick = imglink;
}
setInterval(changeimage, 3000);
function imglink() {
window.location.href = 'https://www.google.gr/';
}
</script>
Related
I am having major brain ache on this one. I have a webcam that i snap an image from every 5 seconds. I have read all of the comments and I can successfully display an image from the webcam but cannot get the image to update. I have read the similar posts and tried everything.
Am i missing something?
This is what I have:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Webcam</title>
<script type="text/javascript">
var x = 0;
function init() {
window.onmessage = (event) => {
if (event.data) {
var ImageURL = document.getElementById("webcam1");
ImageURL.src = event.data;
Clear();
function Clear() {
document.getElementById("Load").style.display = "None";
document.getElementById("Test").innerHTML = "Clearing";
setInterval(UpdateImage, 20000);
function UpdateImage() {
x = x + 1;
var temp = ImageURL.src;
UpdatedImageURL.src = temp + "?=t" + new Date().getTime();
var UpdatedImageURL = document.getElementById("webcam1");
document.getElementById("Test").innerHTML =
"Updating .... " + x;
}
}
}
}
}
</script>
</head>
<body onload="init();">
<p id="Load">Loading ....</p>
<p id="Test">Starting ....</p>
<img id="webcam1" alt=" " width="700" height="450" />
</body>
</html>
<script type="text/javascript">
var imageCounter = 1;
Function change() {
var image = doc.getElementById("image2");
if( imageCounter==1 ) {
image.src = '2.jpg';
imageNumber = 2;
}
else if( imageCounter==2 {
image.src = '3.jpg';
imageNumber = 3;
} else {
imageCounter = 1;
}
setInterval("change()",6500);
<button id="knapp1" type="button" onclick="change()">==></button>
Can anyone tell me what I am doing wrong? I have been trying to understand what I'm failing.
The main problem is that sometimes you assign to imageCounter and sometimes you assign to imageNumber. Decide on one name and use it consistently.
Also, function does not start with a capital letter. JavaScript is case-sensitive.
One problem is that you have
Function change()
with a capital F.
It should be function change()
another thing is that imageNumber is not declared. Im not sure what it is or what its used for but just do
var imageNumber;
setInterval("function()",6000);
It should not be in quotes.
setInterval(change(),6000);
Next thing, is that if you are running this off your computer, it will not find 3.jpg
Instead you have to give the complete file location of the image.
One last thing: on your function you are missing a curly bracket at the end.
heii
copy this code
<html>
<head>
<link rel="stylesheet" type="text/css" href="boss.css">
<script language="JavaScript">
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = "1.jpg";
path[1] = "2.jpg";
path[2] = "3.jpg";
function change()
{
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0;
setTimeout("swapImage()",6500);
}
window.onload=change;
</script>
</head>
<body>
<center>
<img src="1.jpg" border="1" name="slide" height="300" width="750" id="image2"/>
</center>
<button id="knapp1" type="button" onclick="change()">==></button>
</body>
</html>
For short, I know the question doesn't make that sense, let me clear things up, if i click on the O's it changes to X and vise versa how can i fix this?
Like I don't know how to disable them to stay put and also do you guys know how can I reset the game with a for loop instead of doing it manually
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<script text="javascript" src="tic.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center>
<body>
<h1 style="font-family:arial;">Tic-Tac-Toe</h1>
<table>
<tr>
<td id = "case1" onclick="display_input('case1')"></td>
<td id = "case2" onclick="display_input('case2')"></td>
<td id = "case3" onclick="display_input('case3')"></td>
</tr>
<tr>
<td id = "case4" onclick="display_input('case4')"></td>
<td id = "case5" onclick="display_input('case5')"></td>
<td id = "case6" onclick="display_input('case6')"></td>
</tr>
<tr>
<td id = "case7" onclick="display_input('case7')"></td>
<td id = "case8" onclick="display_input('case8')"></td>
<td id = "case9" onclick="display_input('case9')"></td>
</tr>
</table>
<footer>
<p>Copyright© 2014</p>
</footer>
</body>
</center>
</html>
Javascript:
var player_one = 1;
function display_input(square){
if ( player_one == 1 ){
document.getElementById(square).innerHTML = "X";
player_one = 0;
} else {
document.getElementById(square).innerHTML = "O";
player_one = 1;
}
}
function reset() {
document.getElementById("case1").innerHTML = "";
document.getElementById("case2").innerHTML = "";
document.getElementById("case3").innerHTML = "";
document.getElementById("case4").innerHTML = "";
document.getElementById("case5").innerHTML = "";
document.getElementById("case6").innerHTML = "";
document.getElementById("case7").innerHTML = "";
document.getElementById("case8").innerHTML = "";
document.getElementById("case9").innerHTML = "";
}
You can always check that the square element is empty, and if it is not, then don't perform any action:
function display_input(square) {
//We get the associated DOM element
var element = document.getElementById(square);
//If the element already contains something, then don't change it
if(element.innerHTML != "") return;
if(player_one == 1) {
element.innerHTML = "X";
player_one = 0;
} else {
element.innerHTML = "O";
player_one = 1;
}
}
Overwrite the onclick function of the square by adding the following to display_input(square)
document.getElementById(square).onclick = function() {return};
I am using html5 and javascript .I am reading excel file from java script and showing output..PLease analyze my code first
<input type="button" id="btnSubmit" onclick="readdata(1, 2)" value="Submit" />
var xVal = 1;
var yVal = 2
function readdata(x,y) {
x = xVal;
y = yVal;
try {
var excel = new ActiveXObject("Excel.Application");
excel.Visible = false;
var excel_file = excel.Workbooks.Open("D:\\Test.xls");// alert(excel_file.worksheets.count);
var excel_sheet = excel_file.Worksheets("Sheet1");
var data = excel_sheet.Cells(x, y).Value;
//alert(data);
drawWithexcelValue(data);
xVal = xVal + 1;
}
catch (ex) {
alert(ex);
}
Now I'm reading the file from this code and showing the output with this code:
function drawWithexcelValue(val) {
var txtSpeed = val; //alert(txtSpeed.value);
if (txtSpeed !== null) {
iTargetSpeed = txtSpeed;
// Sanity checks
if (isNaN(iTargetSpeed)) {
iTargetSpeed = 0;
} else if (iTargetSpeed < 0) {
iTargetSpeed = 0;
} else if (iTargetSpeed > 80) {
iTargetSpeed = 80;
}
job = setTimeout("draw()", 5);
}
}
Q .1 every time i click on the submit button it show me the value from excel file ,i want that i didn't have to click every time on submit button ..it automatically show the values at some time interval for say 4 seconds.
Q :-2 I didn't want the submit button ,that means when i run this code it automaticaly start running the script say onload ="readdata(1, 2)" ,but it is showing only one value ...how to show all values with some time interval ..please help!!!!!
Guys if you can give me edited code than it really will be help full for me
here this code will surely work for ya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Speedometer HTML5 Canvas</title>
<script src="script copy.js">
</script>
</head>
<body onload='draw(0);'>
<canvas id="tutorial" width="440" height="220">
Canvas not available.
</canvas>
<div id="divHidden" style="visibility: hidden; width: 0px; height: 0px">
<form id="drawTemp">
<input type="text" id="txtSpeed" name="txtSpeed" value="20" maxlength="2" />
<input type="button" value="Draw" onclick="drawWithInputValue();">
<input type="file" id="file" onchange="checkfile(this);" />
<input type="button" id="btnSubmit" onclick="readdata(1, 2)" value="Submit" />
<button onclick="myStopFunction()">Stop Meter</button>
</form>
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
var myVar=setInterval(function(){readdata(1,2)},2000);
function myStopFunction()
{
clearInterval(myVar);
}
function checkfile(sender) {
var validExts = new Array(".xlsx", ".xls", ".csv");
var fileExt = sender.value;
fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
if (validExts.indexOf(fileExt) < 0) {
alert("Invalid file selected, valid files are of " +
validExts.toString() + " types.");
return false;
}
else return true;
}
var xVal = 1;
var yVal = 2
function readdata(x,y) {
x = xVal;
y = yVal;
try {
var excel = new ActiveXObject("Excel.Application");
excel.Visible = false;
var excel_file = excel.Workbooks.Open("D:\\Test.xls");// alert(excel_file.worksheets.count);
var excel_sheet = excel_file.Worksheets("Sheet1");
var data = excel_sheet.Cells(x, y).Value;
//alert(data);
drawWithexcelValue(data);
xVal = xVal + 1;
if(data==null || data=="")
{
myStopFunction();
}
excel.Application.Quit();
}
catch (ex) {
alert(ex);
}
}
</script>
I am using a simple JavaScript slideshow but am having problems displaying the pictures. After like picture #13 I start getting the red X image place holder. Not sure why, because if I right click on the image and go to properties and check the image source it does exist. I have a total of about 126 pictures at about 1.7 MB average size for each photo. I notice that IE Memory usage can go up to 1 GB.
I have this slideshow on a SharePoint 2007 page.
<!-- Original Source http://www.scribd.com/doc/13618938/Add-a-Slide-Show-on-a-Share-Point-Site-Using-Javascript-HTML-and-Content-Editor-Web-Part -->
<script language="javascript" type="text/javascript">
var folderDir = "/images/my-images_2012/"
var slideShowSpeed = 3000
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array()
var i=1
for (var k=1;k<=126;k++)
{
Pic[i] = folderDir + "ENC_2012_0" + k + ".JPG"
i++
}
var t
var j = 1
var p = Pic.length
var preLoad = new Array()
for (i = 1; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
//------------------------------------------------------------------
// The function to do the "slide show"
//------------------------------------------------------------------
function runSlideShow()
{
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDu ration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j=j+1
if (j > (p-1)) j=1
t = setTimeout('runSlideShow()', slideShowSpeed)
}
// Add the following line to get the JS to run
_spBodyOnLoadFunctionNames.push("runSlideShow");
</script>
<DIV align=left>
<TABLE style="BACKGROUND-COLOR: #288118; BORDER-SPACING: 0px; WIDTH: 358px; BORDER-COLLAPSE: collapse; HEIGHT: 341px" cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD></TD></TR>
<TR>
<TD>
<TABLE border=0 cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD style="BACKGROUND-COLOR: #288118" height=300 width=300>
<P align=left><IMG name=SlideShow align=left src="/images/my-images_2012/ENC_2012_01.JPG" width=334 height=300></P> </TD></TR></TBODY></TABLE></TD>
<TR>
<TD></TD></TR>
<TR></TR></TBODY></TABLE></DIV>
You're loading 126 images at the same time. At about 1.7 MB each, that's about 214.2 MB you're trying to load at once.
Bad idea.
Try using thumbnails instead, or at least load the images sequentially:
var current = 0;
function imgLoaded() {
if(current > 0){ // Remove the previous event listener.
preLoad[current - 1].onload = null;
}
preLoad[current] = new Image();
preLoad[current].src = Pic[current];
current++;
if(current < p){
preLoad[current-1].onload = imgLoaded;
}
}
imgLoaded();
(Not tested, but this should work)