I have a page where you select between 2 pictures, when you click one of them, the content of the div changes. The new content also has 2 pictures which will load another content when clicked. I am using javascript, but the script only loads once, so when I get to the second content, it doesn't change anymore.
I got 3 files:
Main.html - content1.html - content2.html - script.js
Main.html:
<div id="change">
<div id="rightside">
<img src="img.jpg" class="class1" id="water" alt="right choice">
</div>
<div id="leftside">
<img src="img2.jpg" class="class1" id="water2" alt="left choice">
</div>
</div>
<script type="text/javascript" src="../js/script.js"></script>
Here is the content that will be replaced in the class change:
content1.html:
<div id="rightside">
<img src="img3.jpg" class="class1" id="water3" alt="right choice">
</div>
<div id="leftside">
<img src="img4.jpg" class="class1" id="water4" alt="left choice">
</div>
this is the content that i want to replace on the next click:
content2.html:
<div id="rightside">
<img src="img5.jpg" class="class1" id="water5" alt="right choice">
</div>
<div id="leftside">
<img src="img6.jpg" class="class1" id="water6" alt="left choice">
</div>
This is the script that suppose to do that:
window.onload = function() {
document.getElementById("water").onclick = function()
{
$('#change').load('content1.html');
};
document.getElementById("water3").onclick = function() {
$('#change').load('content2.html');
};
If I click the image with id water, it replace with content1, then I click the image with water3, nothing happens
You can use the complete call back to bind the new element:
window.onload = function() {
document.getElementById("water").onclick = function()
{
$('#change').load('content1.html', function() {
document.getElementById("water3").onclick = function() {
$('#change').load('content2.html');
};
});
};
};
Reference: http://api.jquery.com/load/
Related
I have my code set so that an image can change after clicking the image. I understand getElementById is meant to get results from one class name, but I don't know how to expand on that, and have the same result without changing the class name. I tried querySelector, but I think I am missing something. Any help would be appreciated. Here is my code:
<!--how do I make this apply to all images?-->
function changeImage() {
let displayImage = document.querySelector('#img-area, #star-picture, #colorful')
if (displayImage.src.match('Kabuto.jpg')) {
displayImage.src = 'PersonalCreations/LylatForce.jpg'
} else {
displayImage.src = 'Kabuto.jpg'
}
}
<!--image area or main img-->
<div class="row">
<div class="column">
<img id="img-area" src='Kabuto.jpg' class="responsive" alt="" onclick="changeImage()" height="200" with="200">
<button class="first" onclick="document.getElementById('img-area').src='PersonalCreations/LylatForce.jpg'">Change Image</button>
</div>
<div class="column">
<img id="star-picture" src="Kabuto.jpg" height="200" with="200" />
<button onclick="document.getElementById('star-
picture').src='PersonalCreations/Year6969.jpg'">Change Image</button>
</div>
<div class="column">
<img id="colorful" src="Kabuto.jpg" height="200" with="500" />
<button onclick="document.getElementById('colorful').src='PersonalCreations/BallInTheShoeProductions.jpg'">Change Image</button>
</div>
<div class="column">
<img id="holiday" src='Kabuto.jpg' alt="" onclick="changeImage()" height="200" with="200">
<button onclick="document.getElementById('holiday').src='PersonalCreations/ChristmasFestivalProject.jpg'">Change Image</button>
</div>
</div>
<p>Hello World</p>
<script src="imgchanger.js"></script>
First, CSS styling and JavaScript should not be used inline with HTML. You should separate out those things.
Your issue is that you have:
let displayImage = document.querySelector ('#img-area, #star-picture, #colorful')
But, .querySelector() will only return the first matching element. You need .querySelectorAll(), which will return a collection of all matching elements.
Or, you can avoid all of that and do this:
// Set up a single event handler for all clicks in the document
document.addEventListener("click", function(evt){
// But test to see if the click originated at a button
if(evt.target.nodeName === "BUTTON"){
// Get the button's parent div and then the source of the first img within that
let img = evt.target.closest("div").querySelector("img").src;
// Find out which button was clicked by looking at its class
switch (evt.target.className){
case "first":
// Change the source
img = "PersonalCreations/LylatForce.jpg";
break;
case "second":
img = "PersonalCreations/Year6969.jpg";
break;
case "third":
img = "PersonalCreations/BallInTheShoeProductions.jpg";
break;
case "fourth":
img = "PersonalCreations/ChristmasFestivalProject.jpg";
break;
}
console.clear();
console.log("Image source is now: " + img);
}
});;
.img200x200 { height:200px; width:200px; }
.img200x500 { height:200px; width:500px; }
<!-- See how much cleaner the HTML is now that the CSS and
JavaScript have been separated out? -->
<div class="row">
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="first">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="second">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x500" alt="">
<button class="third">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="fourth">Change Image</button>
</div>
</div>
<p>Hello World</p>
I'm building a simple html/css/vanilla js component to display images. I have the list of images on the top, and when I click on one of them, it must appear in the main container.
To do that I just change the img element src like this:
document.addEventListener('DOMContentLoaded', (event) => {
var mainImg = document.getElementById("mainImg");
var thumbnailContainer = document.getElementById("thumbnailContainer");
thumbnailContainer.addEventListener("click", (event) => {
var linkClicked = event.target.currentSrc;
mainImg.src = linkClicked;
});
});
Now I would like to add some animation, but I have some trouble with css transition, here's my html:
<div class="container">
<img id="mainImg" src="xxxxx" alt="car 2"/>
<div id="thumbnailContainer" class="thumbnailContainer">
<div class="thumbnail">
<img src="xxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
</div>
</div>
The thing that is bugging me is that the element that I click to trigger the transition doesn't need to change, but I just change the src property on the main image with JS.
How can I solve this?
I am using a simple piece of JS to change the image that is in a div from plus to minus. I have multiple divs on this page which are generated dynamically. How could I specifically change the sign on the div that is clicked. Currently I have the same class for each div. This means whenever I click any div only the first divs image changes, not the div that was clicked.
<div class="hover2 opacity" onclick="changeImage()">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
<div class="hover2 opacity" onclick="changeImage()">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
JS
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("plus")) {
image.src = "img/minus.svg";
} else {
image.src = "img/plus.svg";
}
}
Is the only way to fix this dynamically assigning new class to each div and generating multiple scripts for teach class?
EDIT:
I am using the same method as before but on a slightly different layout. Any reason why this isnt working?
<div class="open-link" style="display: block;">
<a href="#" class="img-change">
<p class="inner">Expand <br><img id="myImage" src="img/arrow-down.svg" width="20" height="20"></p>
</a>
</div>
JS
$(document).on('click','a.img-change',function(){
var $img = $(this).find('p.inner');
if($img.attr('src').match("down"))
$img.attr('src','img/arrow-up.svg');
else
$img.attr('src','img/arrow-down.svg')
});
Every img in your markup has the same id, this is bad, all elements, if they have an id, should be unique. This does NOT mean you should use a unique id on every image and a specific script for every button! That would be bad. Just remove the duplicate id's!
Then this is pretty easy, use jQuery to attach a click event to every div and look for the image within it
take off the in-line onclick
<div class="hover2 opacity">
and use jQuery
$(document).on('click','div.hover2',function(){
var $img = $(this).find('p.heading img');
if($img.attr('src').match("plus"))
$img.attr('src','img/minus.svg');
else
$img.attr('src','img/plus.svg')
});
You don't need to assign an id to the <img/> elements
HTML
<div class="hover2 opacity" onclick="changeImage(this)">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view
<span class="s-right">
<img src="img/plus.svg" width="20" height="20">
</span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
JS
function changeImage(el){
var img = el.querySelector('span > img');
img.src = (img.src.match("plus")) ? "img/minus.svg" : "img/plus.svg";
}
You can try this:
$(document).ready(function() {
$(".opacity").on("click", function() {
var source = $(this).find("img").attr("src"); // Gives source of image inside the presently clicked div
console.log(source);
if (source.match("plus")) {
console.log("match");
$(this).find("img").attr("src", "img/minus.svg");
} else {
$(this).find("img").attr("src", "img/plus.svg");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hover2 opacity">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
<div class="hover2 opacity">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
U still can use $(this).find('img') to find img for selected div and change the src.
Example
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage1" class="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage2" class="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
So it your javascript, u can use this
$(document).on('click','div.hover2',function(){
$(this).find('img').attr("src","img/minus.svg");
}
Jsfiddle link -> https://jsfiddle.net/w1yb5fcc/1/
I am a total noob, so please go easy.
I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.
Thank you in advance for any help you can provide!
Here is what I have so far:
Script:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" />
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" />
<img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" />
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png">
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>
How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:
This is your div containing the image:
<div id="image">
<img src="image1.png" />
</div>
This is the hyperlink:
Mouse over to change image
Here are the JavaScript functions that will replace the inner HTML of the div with different images:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
Let me know if this is what you are looking for.
I want to write a script that changes page content but within a foreach array. I have this HTML:
<div id="bigleftproject">
<p>content which will be swapped</p>
</div>
<!-- thumbnails (foreach array -->
<div class="prj_thumb" id="thumb1">
<h2 class="active">project 1</h2>
<img src="../img/thumbnail1.png" alt="thumbnail" width="100" height="50" />
</div>
<div class="prj_thumb" id="thumb2">
<h2 class="active">project 2</h2>
<img src="../img/thumbnail2.png" alt="thumbnail" width="100" height="50" />
</div>
<div class="prj_thumb" id="thumb3">
<h2 class="active">project 3</h2>
<img src="../img/thumbnail3.png" alt="thumbnail" width="100" height="50" />
</div>
<!-- end -->
and I have the beginnings of my jQuery script:
$(document).ready(function(){
$('.prj_thumb').click(function() {
$('#bigleftproject').load('http://www.mysite.com/projects/small/thumb1');
});
});
Essentially, what I am trying to achieve is for the jQuery script to grab the ID of '.prj_thumb' and pass that into the final part of the URL in the .load function.
Is this what you're looking for?
$(document).ready(function(){
$('.prj_thumb').click(function() {
$('#bigleftproject').load('http://www.mysite.com/projects/small/' + this.id);
});
});
Style class -
.btn {
}
Javascript (jQuery) -
jQuery(document).ready(function() {
jQuery(".btn").each(function(index, element) {
alert(this.id);
});
});
HTML -
<div class="btn" id="btn1"></div>
<div class="btn" id="btn2"></div>
<div class="btn" id="btn3"></div>