I am trying to make a button for each picture that will hide the other two. For example if I click the button for the left image, the left image will show and it will hide the middle and right pictures. HTML needs to stay the same, any suggestions?
<div id="works">
<figure data-artist="left">
<img src="david.jpg" alt>
<figcaption>left image</figcaption>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" alt>
<figcaption>middle image</figcaption>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" alt>
<figcaption>Right image</figcaption>
</figure>
</div>
<div id="controls">
</div>
<script>
var hideShowButton = document.getElementById("hideShowButton");
hideShowButton.onclick = function() {
var allImages = { left: "left", center: "middle", right: "right" };
if(document.getElementById("michelangelo").style.visibility == 'visible') {
for (var image in allImages) {
document.getElementById(allImages[image]).style.visibility = 'hidden';
}
document.getElementById("hideShowButton").innerHTML = "Hide";
}
}
</script>
When the button inside div controls is clicked, he execute the function showImage().
This function get all figure elements and set a display as none.
Then we get the attribute data-artist of the element that trigger the function, that is the same as the figure, and add a display style as block on the figure that has the same attribute data-artist that the element.
function showImage(event){
var objClass = event.getAttribute("data-artist");
var elems = document.getElementsByTagName("figure");
for (var i=0;i<elems.length;i++)
elems[i].style.display = 'none';
var element = document.querySelector('figure[data-artist='+objClass+']');
element.style.display = 'block';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="works">
<figure data-artist="left">
<img src="david.jpg" alt>
<figcaption>left image</figcaption>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" alt>
<figcaption>middle image</figcaption>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" alt>
<figcaption>Right image</figcaption>
</figure>
</div>
<div id="controls">
<button data-artist="left" onclick="showImage(this);">left</button>
<button data-artist="middle" onclick="showImage(this);">center</button>
<button data-artist="right" onclick="showImage(this);">right</button>
</div>
</body>
</html>
<div id="works">
<figure data-artist="left">
<img src="david.jpg" id="image1" alt>
<figcaption>left image</figcaption>
<button onclick="hideshow('1');">Choose</button>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" id="image2" alt>
<figcaption>middle image</figcaption>
<button onclick="hideshow('2');">Choose</button>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" id="image3" alt>
<figcaption>Right image</figcaption>
<button onclick="hideshow('3');">Choose</button>
</figure>
</div>
<div id="controls">
</div>
<script>
function hideshow(buttonpressed) {
var img1 = document.getElementById("image1");
var img2 = document.getElementById("image2");
var img3 = document.getElementById("image3");
if(buttonpressed==1) {
img1.style.visibility == 'visible';
img2.style.visibility == 'hidden';
img3.style.visibility == 'hidden';
}
if(buttonpressed==2) {
img1.style.visibility == 'hidden';
img2.style.visibility == 'visible';
img3.style.visibility == 'hidden';
}
if(buttonpressed==3) {
img1.style.visibility == 'hidden';
img2.style.visibility == 'hidden';
img3.style.visibility == 'visible';
}
}
</script>
If there will be many buttons (not 3), approach would be different than this
Hope this helps
Related
I need 2 automatic slideshow on one page, but there is a problem.
I use W3 slideshow, but if i make automatic they just after one rotation or just stop show up.
Here is code.
I try to change, but i not sure what i do wrong. If you can help me.
var myIndex = 0;
carousel();
var slideId = ["mySlides1", "mySlides2"]
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides", "mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
.mySlides {display:none;}
.mySlides2 {display:none;}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>
</body>
</html>
I made some edits and now your code is working !
You don't want to use only one index, you want to use one index for each slideshow.
For each call to carousel() you will need to stop displaying the current img (n°[x|y]Index), and display the next img (n°[x|y]Index).
With this function, you can add different numbers of images in each slideshow (in my example, mySlides displays 3 images and mySlides2 has 4).
let xIndex = 0;
let yIndex = 0;
carousel();
function carousel() {
let x = document.getElementsByClassName("mySlides");
let y = document.getElementsByClassName("mySlides2");
x[xIndex].style.display = "none";
y[yIndex].style.display = "none";
xIndex = (xIndex+1)%x.length;
yIndex = (yIndex+1)%y.length;
if (xIndex > x.length)
xIndex = 1;
if (yIndex > y.length)
yIndex = 1;
x[xIndex].style.display = "block";
y[yIndex].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
<h2>Automatic Slideshow</h2>
<div style="width:150px; height:150px; overflow: hidden;">
<img class="mySlides" src="http://lorempixel.com/400/400/" style="width:100%; display: none;">
<img class="mySlides" src="http://lorempixel.com/400/200/" style="width:100%; display: none;">
<img class="mySlides" src="http://lorempixel.com/200/400/" style="width:100%; display: none;">
</div>
<h2>Automatic Slideshow</h2>
<div style="width:150px; height:150px; overflow: hidden;">
<img class="mySlides2" src="http://lorempixel.com/400/300/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/300/400/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/300/300/" style="width:100%; display: none;">
<img class="mySlides2" src="http://lorempixel.com/800/300/" style="width:100%; display: none;">
</div>
I cant change the html or css files. My task is to set a click handler to my thumbnails to enlarge the image in the img within the element. While also setting the figcaption text in the figure to the thumbs title attribute. I need to attach to the div id = thumbnails. My script is not enlarging my thumbnails or titles.
This is what I have so far.
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js">
document.getElementById("thumbnails").addEventListener("click", function(e) {
if(e.target && e.target.nodeName.toLowerCase == "img") {
// Taking the image src and converting it to medium image.
var srcValue = e.target.src.replace("small","medium");
// Taking title and storing it for later.
var titleValue = e.target.title;
document.getElementById("featured").src = srcValue;
document.getElementById("featured").title = titleValue;
document.getElementById("figcaption").innerHTML = titleValue;
}
});
document.getElementById("figcaption").addEventListener("onmouseover", function(e) {
var figcaption = e.target.style.opacity = .8;
});
document.getElementById("figcaption").addEventListener("onmouseout", function(e) {
var figcaption = e.target.style.opacity = 0;
});
</script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" />
<img src="images/small/5856697109.jpg" title="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" />
<img src="images/small/9504449928.jpg" title="Florence" />
</div>
</main>
</body>
</html>
Is something like this what you were after?
var caption = document.getElementsByTagName("FIGCAPTION")[0];
var images = document.getElementsByTagName("IMG");
for (val of images) {
if(images[0] !== val){
val.addEventListener("click", function(e) {
caption.innerHTML = this.title;
images[0].title = this.title;
images[0].src = this.src.replace("small","medium");
});
}
}
img {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h2>Share Your Travels</h2>
</header>
<main>
<figure id="featured">
<img src="https://cdn.pixabay.com/photo/2018/01/20/14/26/panorama-3094696__340.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="https://cdn.pixabay.com/photo/2018/05/15/09/23/raindrop-3402550__340.jpg" title="Battle" />
<img src="https://cdn.pixabay.com/photo/2018/04/23/14/23/giraffe-3344366__340.jpg" title="Luneburg" />
<img src="https://cdn.pixabay.com/photo/2018/04/20/18/19/grass-3336700__340.jpg" title="Bermuda" />
<img src="https://cdn.pixabay.com/photo/2018/05/12/12/48/mountain-crumpled-3393209__340.jpg" title="Athens" />
<img src="https://cdn.pixabay.com/photo/2018/04/24/19/14/hai-3347787__340.jpg" title="Florence" />
</div>
</main>
</body>
</html>
As you can see in the code below I would like to drag an image to the id "centerimg". I've hidden several images cause that's the images who would adopt to the center image. The problem is it doesn't adopt to the size of the center image. It takes the size of the image being dragged. I've tried manipulating its CSS through DOM elements and the only image that changed it's size is the initial image that was dragged.
function doFirst() {
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
var code = '<img id="img1" src="images/ph1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e) {
var code = '<img id="img2" src="images/ph2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e) {
var code = '<img id="img2" src="images/ph3.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e) {
var code = '<img id="img2" src="images/ph4.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e) {
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text');
}
function drop(event) {
}
window.addEventListener("load", doFirst, false);
#centerimg {
width: 500px;
height: 500px;
}
#img2, #img1, #img3, #img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center>
<div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</center>
</div>
<!-- hidden images here-->
<img id="img5" class="img5" src="images/ph1.jpg">
<img id="img5" class="img5" src="images/ph2.jpg">
<img id="img5" class="img5" src="images/ph3.jpg">
<img id="img5" class="img5" src="images/ph4.jpg">
<img id="img5" class="img5" src="images/ph5.jpg">
<!--end of hidden images-->
</body>
</html>
Possible solution: in the dropped function force the new img tag to get the 500px width and height. In this solution I put width and height hardcoded, but I think there is also the possibility to overcome this.
function doFirst() {
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
var code = '<img id="img1" src="images/ph1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e) {
var code = '<img id="img2" src="images/ph2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e) {
var code = '<img id="img2" src="images/ph3.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e) {
var code = '<img id="img2" src="images/ph4.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e) {
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text'); console.log(centerbox);
centerbox.getElementsByTagName("img")[0].style.width = "500px";
centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event) {
}
window.addEventListener("load", doFirst, false);
#centerimg {
width: 500px;
height: 500px;
}
#img2,
#img1,
#img3,
#img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center>
<div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</center>
</div>
<!-- hidden images here-->
<img id="img5" class="img5" src="images/ph1.jpg">
<img id="img5" class="img5" src="images/ph2.jpg">
<img id="img5" class="img5" src="images/ph3.jpg">
<img id="img5" class="img5" src="images/ph4.jpg">
<img id="img5" class="img5" src="images/ph5.jpg">
<!--end of hidden images-->
</body>
</html>
We're trying to make a school project like an online delivery system.. but it will have a little tweak like drag and drop system and food customization. Like when you drag a sauce to the main image which is a bowl of rice. it would automatically change the image to a rice with sauce. sane as protein veggies and more.
I'm trying to figure out how to change image or adopting it to the main image while i drag and drop it also.. changing some of its attributes in CSS.
Also maybe there's a function that when I drag a specific image it would change the main image to a different image not the dragged one.
function doFirst(){
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
leftbox = document.getElementById("mainbox");
leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
var code = '<img id="img1" src="images/image1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
var code = '<img id="img2" src="images/image2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
var code = '<img id="img2" src="images/image4.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
var code = '<img id="img2" src="images/image5.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
var code = '<img id="centerimg" src="images/center.png">';
ondrop
}
function drop(event){
event.preventDefault();
var code = '<img id="img2" src="images/image5.jpg" width="300px" height="300px">' ;
}
window.addEventListener ("load", doFirst, false);
#centerimg{
width:500px;
height: 500px;
}
#img2, #img1, #img3, #img4{
width:150px;
height: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center><div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div></center>
</div>
</body>
</html>
I am new to JavaScript. I would like to have the preview image be a clickable link to an even larger image in a separate window. Just like Amazon or eBay. Below is the code I have so far and it works great for the mouse over and preview but I can't figure out how to get a clickable link to the enlarged image. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
.preview {
width:350px;
height:150px}
.thumb {
width:125px;
height:50px}{
margin-right:3px;}
.normal {
border:3px solid #000000;}
.selected {
border:3px solid #ff0000;}
</style>
</head>
<body>
<img id="0" class="preview normal" src="" alt="preview" /><br>
<p>
<img id="1" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlhOGY1ZjBhY2UyNjMwMjE4MDJjMzZhODM2NGY2OWI=" alt="Red Belt Blk Buckle" onmouseover="preview(this)"/>
<img id="2" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MzIxOWZhZmQyZTZkZTg1ZDQzYjI4MmIyYzU1MWU2Njg=" alt="Red Belt Nkl Buckle" onmouseover="preview(this)"/>
<img id="3" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MjlhOTQ1N2Y4OGM2Y2I4OWIzY2I4YjZiMjU2N2MxZmM=" alt="Red Waist" onmouseover="preview(this)"/>
<p>
<img id="4" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YjE5MWRmMThhOTE3YWFjMzlkNDcyYzcwMWIxNzRlMWE=" alt="Red Waist" onmouseover="preview(this)"/>
<img id="5" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlkMzY0YWZkMDUzNjcxNzlkMTRhZTIyZjFmOTk1YTM=" alt="Red Blk Buckle" onmouseover="preview(this)"/>
<img id="6" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YzdkZjcyZWVkZWQ1Y2Y4NjY2ZDFhY2EzYjU2NDA3OWQ=" alt="Red Nkl Buckle" onmouseover="preview(this)"/>
<script>
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb normal";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id
}
</script>
</body>
</html>