<script>
function lighton() {
document.getElementById('myimage').src = "images\download.png";
}
function lightoff() {
document.getElementById('myimage').src = "images\link.png";
}
</script>
<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
document.getElementById('myimage').src = "images\download.png";
}
function lightoff() {
document.getElementById('myimage').src = "images\link.png";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="images\link.png" width="100" height="180" />
<p>Click mouse and hold down!</p>
</body>
</html>
see why this is not working when i click the mouse button first image disappears and second image does not open
I attached the event handers this way, and it started working. Remember to do this after "onload".
var el = document.getElementById("myimage");
el.addEventListener("mousedown",lightoff);
el.addEventListener("mouseup",lighton);
The error I was seeing with your code was that it could not find the functions.
Related
Hey i want to change a image when the img is clicked with javascript it works once if i click the picture it changes the scr but doesnt change it back
function ImgClick() {
var img = document.getElementById("b1")
if (img.src = "img/RoteAmpel.jpg") {
img.src = "img/GrueneAmpel.jpg";
} else {
img.src = "img/RoteAmpel.jpg";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<meta charset="UTF-8">
</head>
<body>
<h3>Mouse Events</h3>
<img src="img/RoteAmpel.jpg" alt="Bildwechsel" title="Bildwechsel" id="b1" onclick="ImgClick()" />
</body>
</html>
There are two problems with your code:
1. Assignment vs Comparison
You're assigning the src instead of making a comparison:
if (img.src="img/RoteAmpel.jpg") { }
should be
if (img.src === "img/RoteAmpel.jpg") { }
2. img.src might not be what you expect
When accessing img.src you'll get the full qualified URL including protocol, domain etc.
To compare the actually attribute's value use this:
img.getAttribute('src')
You can test it yourself:
function test() {
var img = document.getElementById("b1")
console.log(img.src);
console.log(img.getAttribute('src'));
}
test();
<img id="b1" src="img/RoteAmpel.jpg">
I have a button. When I click the button, I want an image of a cat to be created. I have created a function to do this. I have added an event listener to the button that triggers the function when the button is clicked. But no such image is created. Here's the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="1">hello</button>
<script>
function create(){
var image= document.createElement("img")
image.src="https://encrypted-tbn0.gstatic.com/images?
q=tbn%3AANd9GcQeP6zBFWjK10gNYUK1kxM6I-AbF8vK_zPGSHrk38JzCb_5ZpRd&usqp=CAU"
document.body.appendChild(image)
}
var element=document.getElementById("1")
element.addEventListener("click", create)
</script>
</body>
</html>
That because the url got corrupted and white space got introduced between images? and next line. Concat them using + or copy the url , try in the browser and then copy the same url from browser and put it between quotes
function create() {
var image = document.createElement("img")
image.src="https://encrypted-tbn0.gstatic.com/images?"+
"q=tbn%3AANd9GcQeP6zBFWjK10gNYUK1kxM6I-AbF8vK_zPGSHrk38JzCb_5ZpRd&usqp=CAU";
document.body.appendChild(image)
}
var element = document.getElementById("1")
element.addEventListener("click", create)
<button id="1">hello</button>
Add semicolons and remove the linebreak in the url:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="1">hello</button>
<script>
function create(){
var image= document.createElement("img");
image.src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQeP6zBFWjK10gNYUK1kxM6I-AbF8vK_zPGSHrk38JzCb_5ZpRd&usqp=CAU";
document.body.appendChild(image);
}
var element=document.getElementById("1");
element.addEventListener("click", create);
</script>
</body>
</html>
So this is what i did when i used the put the JavaScript on a separate page: Why is it not working?????(And i made sure the source page name is yellow.js and i just dont know how to seperate the javascript file on here)
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
function change() {
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
}
window.onload = function change()
{
var box = document.getElementById("box");
var boxStyle = box.style;
boxStyle.color = 'red';
}
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
Here is the difference between both
window.onload - it is called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
onload="" - It is called once DOM loaded. This is equal to $(document).ready(function() {});
It is always good to write clean code and I always prefer to use window.onload, instead of using onload event on element.
First put your javascript code into the body.If you want to change color when the page load you can use window.onload = change() event. And your boxStyle variable is not defiend before you use it.I did some changes .
<body>
<h1 id="box">NBA legends</h1>
<script type="text/javascript">
function change() {
var box = document.getElementById("box");
var boxStyle = box.style;
boxStyle.color = 'red';
}
window.onload = change();
</script>
</body>
So I'm trying to loop through this array and change an image source every few seconds. Right now I have an onload event calling a setTimeOut method which should change the image 5 seconds after the page has loaded I would think, but it is doing it instantly. What is the problem? Here is my code:
<html>
<head>
<title>Ad Rotaror</title>
<script type="text/javascript">
var i = 0;
var ads = new Array(4);
ads[0]='promo1.gif';
ads[1]='promo2.gif';
ads[2]='promo3.gif';
ads[3]='promo4.gif';
ads[4]='promo5.gif';
function change()
{
if(i > 4)
i = 0;
document.images[0].src = ads[i];
i++;
}
</script>
</head>
<body>
<img src="promo1.gif" onload="setInterval(change(), 5000)" />
</body>
</html>
Change 'change()' to 'change'. You are calling the function immediately.
As part of my website projects, I would like to add a script, javascript or whatever, that changes the background image, but the problem is, I'm don't know how to program with Java. I only know Lua, HTML, & CSS.
The reason for that is because I'd like the background image to change after 5 seconds (fades into another image) and then again to another. A loop.
I have found something but it's said that it doesn't work:
<script language="JavaScript">
var Rollpic1 = "1.jpg";
var Rollpic2 = "2.jpg";
var Rollpic3 = "3.jpg";
var PicNumber=1;
var NumberOfPictures=3;
var HowLongBetweenPic=5;
function SwitchPic(counter){
if(counter < HowLongBetweenPic){
counter++;
document.roll.src = eval("Rollpic" + PicNumber);
CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500);
}
else{
if(PicNumber < NumberOfPictures){
PicNumber++;
SwitchPic(0);
}
else{
PicNumber=1;
SwitchPic(0);
}
}
}
</script>
<body onload="SwitchPic(0)">
<img src="1.jpg" height="300" width="400" border="0" name="roll">
This will do it:
<script>
document.body.style.backgroundImage="url('path/to/background.png')";
</script>
Or if you want it to happen when you click something:
<script>
function change() {
document.body.style.backgroundImage="url('path/to/background.png')";
}
</script>
<input type="button" onclick="change()" value="Change it" />
To have some code loop on a timer:
<script>
function timedCount() {
// some code here
setTimeout("timedCount()",1000); //1000 milliseconds
}
</script>
Run that function ^ somehow (like with the onclick hander of a button as shown above) and it will loop forever, executing the function every 1000 ms
By the way, Java has nothing to do with Javascript. They're completely separate and are very different.
You can use CSS with Javascript to accomplish this easily like this:
<style>
.myImageClass { background-image: url(images/header.jpg); }
.extraClass { background-image: url(images/extra.jpg); }
</style>
<script type="text/javascript">
function changeMyBackground(elementID, myClassName = 'myImageClass'){
document.getElementById(elementID).className=myClassName;
}
// Change BG of element with id bgImage with the default class 'myImageClass'
changeMyBackground('bgImage');
// or change the bg of the element with id bgImage using a custom class.
changeMyBackground('bgImage', 'extraClass');
</script>
Define an ID to the element like this:
<body id="bgImage">
CONTENT
</body>
Is there a reason your not setting the background image in CSS?
Using jQuery is very easy, for example if you wanted to set a background on the body
$("body").css("background","url('images/bg.png')");
And don't forget to include jQuery in your header by:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
Maybe this will do:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageIndex = 0;
var imagesArray = new Array();
//Set Images
imagesArray[0] = "images/one.png";
imagesArray[1] = "images/two.png";
imagesArray[2] = "images/three.png";
function changeBackground(){
$("body").css("background","url('"+ imagesArray[imageIndex] +"')");
imageIndex++;
if (imageIndex > imageArray.length)
imageIndex = 0;
}
$(document).ready(function() {
setInterval("changeBackground()",5000);
});
</script>
</head>
To achieve a fade out transition to a new image you are better using an image tag . Inserting the new image with a lower z-index than the old image so it sits behind it. Next you fade out the old image and update the z-index of the new image.
I would recommend using JQuery cycle plugin (http://jquery.malsup.com/cycle/) because it will be easier for you to follow. Your code would therefore be:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src=”jquery.cycle.all.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.pics’).cycle({
fx: ‘fade’,
speed: 5000
});
});
</script>
</head>
<body>
<div class=”pics”>
<img src=”image/one.png” />
<img src=”image/two.png” />
<img src=”image/three.png” />
</div>
</body>
</html>