SO I am trying to create a screen that will display about 50 toggle buttons to display in a building on a monitor.
I want to create a bunch of images to use as the toggle so they are easy to see. This is the effect I want.
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_intro
except picture I want several light bulbs to turn on and off as I want.
Right now this is the code I have.
I am able to click the images to change as I want, they just wont go back, any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function changeImg(img, newimg) {
img.src = newimg;
}
</script>
<body>
<img onclick="changeImg(this, 'staten_uw.jpg')" src="staten_moored.jpg">
<img onclick="changeImg(this, 'block_uw.jpg')" src="block_moored.jpg">
</body>
</html>
They don't go back because the code always changes it to the _uw images. If you want them to toggle, the function needs to check what image is currently displayed. Something like this:
function changeImg(img) {
if ( img.src.indexOf("_uw") > 0 ) {
img.src = img.src.replace("_uw","_moored");
}
else {
img.src = img.src.replace("_moored","_uw");
}
}
will work if you have 50x2 different images, named "img1_uw.jpg", "img1_moored.jpg", "img2_uw.jpg", "img2_moored.jpg", etc.
If you only have 2 images, but want 50 buttons that each toggle between them, it's easier:
function changeImg(img) {
if ( img.src == "staten_uw.jpg" ) {
img.src = "staten_moored.jpg";
}
else {
img.src = "staten_uw.jpg";
}
}
Other answers have shown this quite simply as well.
Either way, the HTML should change to something like this:
<img onclick="changeImg(this)" src="block_moored.jpg">
You can do this:
window.onload = function() {
images = document.getElementsByTagName("img");
for (i in images) {
images[i].addEventListener("click", function(e) {
var newsrc = this.togglesrc;
this.togglesrc = this.src;
this.src = newsrc;
});
}
};
and then use
<img togglesrc="staten_uw.jpg" src="staten_moored.jpg" />
In your case, you should use only one img tag:
<img onclick="changeImg(this)" src="staten_moored.jpg">
and check logic in your js:
function changeImg(img) {
img.src = (img.src == 'staten_moored.jpg') ? 'block_moored.jpg' : 'staten_moored.jpg';
}
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'm a new programmer learning and working on an image gallery with a full-screen popup using vanilla javascript and the console keep saying: Cannot set property 'src' of undefined at nextPic (app.js:35) at HTMLAnchorElement.onclick (Imagegallery.html:18).
The HTML code. I have the script running at the end. I am wondering if I need to remove the last popup event listener?? So the user can just keep clicking through using the next and previous buttons. Then, I would like for it once the user gets to the end of the gallery it automatically returns back or could press and X put to exit. I hope this helps to get my problem figured out.
const popup = document.getElementById('popup'); //reference to popup
const selectedImage = document.getElementById('selectedImage'); //reference to selected image
const imageIndexes = [1,2,3]; //array of images
const selectedIndex = null;
var currPic = 0;
var pics= '';
//to show image gallery
imageIndexes.forEach((i)=>{
const image = document.createElement('img'); //reference to image
image.src=`images/logo${i}.PNG`; //updated the source with number dynamically
image.classList.add('galleryImg'); // adding a css class
image.addEventListener('click',() =>{
//popup stuff
popup.style.transform =`translateY(0)`; //image slide down when clicked
selectedImage.src=`images/logo${i}.PNG`;
})
gallery.appendChild(image);
});
function nextPic(e){
e.preventDefault();
if (currPic < imageIndexes.length -1){
currPic++;
document.getElementById('prev').style.display = 'block';
}
else {
document.getElementById('next').style.display = 'none';
document.getElementById('prev').style.display = 'block';
}
document.popup.src = imageIndexes[currPic];
}
function prevPic(e){
e.preventDefault();
if (currPic > 0){
currPic--;
document.getElementById('next').style.display = 'block';
}
else {
document.getElementById('prev').style.display = 'none';
}
document.popup.src = imageIndexes[currPic];
}
popup.addEventListener('click', ()=>{
popup.style.transform =`translateY(-100%)`; //image slides back up
popup.src ='';
});```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" href="image.css">
</head>
<body>
<div class="container">
<h1>Image Gallery</h1>
<div id="gallery"></div>
</div>
<div id="popup">
<img src="" alt="" id="selectedImage">
Prev Next
</div>
<script src="app.js"></script>
</body>
</html>
I need to get relative path of a hyperlink when I click by it in HTA file without following by the link.
Consider for example this simple test.hta
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9.0" />
<meta charset="utf-8">
</head>
<body>
Link1
Link2
<script>
var pageLinks = document.querySelectorAll('a');
for(i = 0; i < pageLinks.length; i++) {
var href = pageLinks[i].href;
pageLinks[i].href = '#!'+href;
pageLinks[i].onclick = function() {
alert(this.href.substring(3));
}
}
</script>
</body>
</html>
When I click by any hyperlink e.g. the first one, I get absolute path
e:///D:/path/to/test.hta#!file:///D:/href1
How can I get href1 instead?
Oh, the solution is so simple. It's enough to use .getAttribute('href') instead of .href in both places where I get the attribute.
Hope anyone could help.
I've got a huge amount of paths from svg file (showing only a few here) which I store in an array to dynamically create them on Raphael paper.
var paths = "M539.99,181v95.141h-0.12L509.521,181H539.99zdivideM539.99,276.511v84.85h-30.41L539.99,276.511zdivideM539.99,85.021V181h-30.47L539.99,85.021"; // string with paths from svg file. Much much bigger in real code
var pathsArray = paths.split("divide"); // putting all paths in an array
Everything works until I try to assign an attribute to a path in a onmouseover function inside a for loop. Nothing happens. And no error messages in the console.
var currentPath = window['section' + i];
currentPath.node.onmouseover = function() {
this.style.cursor = 'pointer';
currentPath.attr("fill", "#ccc"); // <-- THIS PART DOESNT WORK
}
I also tried it this way:
window['section' + i].attr("fill", "#ccc");
which gives me an error message:
TypeError: 'undefined' is not an object (evaluating 'window['section' + i].attr')
Here is the full 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>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
var paths = "M539.99,181v95.141h-0.12L509.521,181H539.99zdivideM539.99,276.511v84.85h-30.41L539.99,276.511zdivideM539.99,85.021V181h-30.47L539.99,85.021"; // string with paths from svg file. Much much bigger in real code
var pathsArray = paths.split("divide"); // putting all paths in an array
var paper = Raphael(10, 50, 1000, 1000);
for (var i=0;i<pathsArray.length;i++)
{
var currentPath = window['section' + i];
currentPath = paper.path(pathsArray[i]);
currentPath.attr("fill", "#f00");
currentPath.attr("stroke", "#fff");
currentPath.node.onmouseover = function() {
this.style.cursor = 'pointer';
currentPath.attr("fill", "#ccc"); // <-- THIS PART DOESNT WORK
}
}
</script>
</body>
</html>
Try using this keyword, also according to documentation there is a built in mouseover event. So the following should also work:
currentPath.mouseover(function() {
this.node.style.cursor = 'pointer'; // using 'node' property to get access to DOM element
this.attr("fill", "#ccc"); // 'this' should refer to Raphael element
});
Even though currentPath was inside the handler function, it was always taking the value of the last 'currentPath' in loop.
<!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 language="javascript" type="text/javascript">
function setFont() {
var i;
for ( i = 0; i < document.all.length; i++) {
document.all[i].style.fontFamily = "Verdana";
document.all[i].style.fontSize = "16";
document.all[i].style.color="black";
}
};
function abc(a) {
alert(a);
ansArray = ['a'];
for (i = 1; i <= a; i++) {
document.write('<input type = "button" value = "a">');
document.write('<input type = "button" value = "b">');
}
var myButton = document.getElementsByTagName("input");
//alert(myButton.length);
myButton[0].onclick = function() {
if (ansArray[0] == 'a') myButton[0].style.backgroundColor = "green";
else myButton[0].style.backgroundColor = "red";
};
myButton[1].onclick = function() {
if (ansArray[0] == 'b') myButton[1].style.backgroundColor = "green";
else myButton[1].style.backgroundColor = "red";
};
};
setFont();
</script>
</head>
<body onload="Javascript:abc(2)">
hello
</body>
</html>
The onclick functions do not work in IE but work fine in chrome and firefox. I could not find the mistake. Why a normal function does not work. function loads the contents but onclicking the first two buttons for which event handelers are writen does not change the button colour in IE only. Please help me... Thanks in advance
The problem here is that using document.write apparently overwrites JavaScript as well. If you switch your document.write() to document.body.innerHTML += your problem is solved. Your latter two buttons won't work with that code because you are calling button 0 and 1 exclusively, while those second two are 3 and 4.
quick googling suggests that the problem is that you are using document.write after the page has been loaded so it is erasing the dom as well. you should avoid using that in functions that are called after page loading.
source : http://sitr.us/2012/09/04/monkey-patching-document-write.html
I dont have IE so couldn't test it.