I would like a javascript method to display image in div depending on which a href link is clicked.
I have written some code but it needs developing further.
<script type=" ">
function changeImg(){
var image1 = new Image();
image1.src='car.png'
var imghol = document.getElementById("imageHolder");
var elements = document.getElementById("FS");
if(elements.onclick = function()){
imghol = image1;
}
</script>
<div class="ADS2"><h2>Vehicle Part</h2><p>Please select a part you wish to find;
<div class="vertical_menu">
<ul>
<li><a id="FS" href="#home" onclick="changeImg">Front Side</a></li>
<li><a id="RS" href="#news">Rear Side</a></li>
<li><a id="S" href="#contact">Side</a></li>
<li><a id="US"href="#about">Under Side</a></li>
<li><a id="I" href="#about">Interior</a></li>
</ul>
</div>
<div class="imageholder">
</div>
</div>
Keep it simple. Try this:
<script type="text/javascript">
function changeImg(image){
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="ADS2">
<h2>Vehicle Part</h2>
<p>Please select a part you wish to find;</p>
<div class="vertical_menu">
<ul>
<li><a id="FS" href="javascript:" onclick="changeImg('car.jpg');">Front Side</a></li>
<li><a id="RS" href="javascript:" onclick="changeImg('rear.png')">Rear Side</a></li>
<li><a id="S" href="javascript:" onclick="changeImg('caside.png')">Side</a></li>
<li><a id="US" href="javascript:" onclick="changeImg('under.png')">Under Side</a></li>
<li><a id="I" href="javascript:" onclick="changeImg('interior.png')">Interior</a></li>
</ul>
</div>
<div class="imageholder"><img id="imageHolder" /></div>
</div>
use this
HTML
<a onclick="changeImg('pic1.png')">Link 1</a>
<a onclick="changeImg('pic2.png')">Link 2</a>
<a onclick="changeImg('pic3.png')">Link 3</a>
<a onclick="changeImg('pic4.png')">Link 4</a>
.....
<div class="imageholder">
<img id="change_img_target" />
</div>
Javascript
function changeImg(url) {
document.getElementById("change_img_target").src = url;
}
You can also achieve this with jQuery. Be sure to include the jQuery library in your file. :)
HTML:
Link 1
Link 2
<div id="div">
</div>
jQuery (add this to the bottom of your page):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
function changeImg(url) {
var image = "<img src='url' />";
$("#div").html(image);
}
});
</script>
# Naveen,
You can achieve the solution using any of the following 2 answers.
Ans1:
<script type="text/javascript">
function preloader()
{
var imgs = ['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg']; // take array of images
var container = document.getElementById('photos');
var docFrag = document.createDocumentFragment();
imgs.forEach(function(url, index, originalArray) {
var img = document.createElement('img');
img.src = url;
docFragenter code here.appendChild(img);
});
container.appendChild(docFrag);
}
</script>
<body onload="preloader();">
<div>
<table width="100%" style="height: 100%;" border="0">
<tr>
<td>
<p id="photos" onclick="preloader()" />
</td>
</tr>
</table>`
</div>
Ans2:
function preloader()
{
var imgs=['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg'];
var container = document.getElementById('photos');
for (var i = 0, j = imgs.length; i < j; i++) {
var img = document.createElement('img');
img.src = imgs[i]; // img[i] refers to the current URL.
container.appendChild(img);
}
}
Link for more Help:
How to add a list of images to the document from an array of URLs?
Related
I am learning about the DOM and incorporating Javascript in html files, I have tried this code that display and hide pictures using the event listener click. however, pictures don't seem to appear even no error is detected in the Chrome console.
NOTE: I only posted the concerned code, I omitted some of the HTML tags
<style>
.hide{
display: none;
}
</style>
<main>
<ul>
<li><a data-img="face" id="facebook" href="#"> Facebook </a></li>
<li><a data-img="insta" id="instagram" href="#"> Instagarm </a></li>
<li><a data-img="snap" id="snapchat" href="#"> Snapchat </a></li>
</ul>
<img class="hide" id="face" scr="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" scr="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png" >
<img class="hide" id="snap" scr="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
if(pic.className === "hide"){
pic.className="";
} else {
pic.className= "hide";
}
}
</script>
First off, you issues is that it is src and not scr, so change that attribute and the images will show.
Second, I would recommend using classList with add, remove and contains. You could also use toggle to make your code even smaller like so:
<style>
.hide {
display: none;
}
</style>
<main>
<ul>
<li> <a data-img="face" id="facebook" href="#"> Facebook </a> </li>
<li> <a data-img="insta" id="instagram" href="#"> Instagarm </a> </li>
<li> <a data-img="snap" id="snapchat" href="#"> Snapchat </a> </li>
</ul>
<img class="hide" id="face" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" src="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png">
<img class="hide" id="snap" src="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
pic.classList.toggle('hide', !pic.classList.contains('hide'))
}
</script>
I added the event input to your show function. I modified your show function like below. Check if this works for you:
function show(e) {
let picId = e.target.dataset.img;
let pic = document.getElementById(picId);
if(pic.classList.contains('hide'){
pic.classList.remove('hide');
}
else{
pic.classList.add('hide');
}
}
I'm pretty noob when is come to this. So, maybe for you, is piece of cake, but for me is like escalading the Everest. Please help me. Thank you!
I have this:
I have this:
</br> <a class="link" href="#"><b>A</b></a>
</br> <a class="link" href="B"><b>B</b></a>
</br> <a class="link" href="C"><b>C</b></a>
</br>.....I have hundreds of links
<hr> How to transform that, into this, with javascript:
<div>
<a class="link" href="#"><b>A</b></a>
</div>
<div>
<a class="link" href="#"><b>B</b></a>
</div>
<div>
<a class="link" href="#"><b>C</b></a>
</div>
It's not very clear what you need, but try this to see if it is something like you need:
function insertIntoDivs() {
//array with all anchors that have link as class
var allLinks = document.getElementsByClassName("link");
var arrayLinks = Array.from(allLinks);
var quantLinks = arrayLinks.length;
//loop until all elements got hiw own div
for (var i = 0; i < quantLinks; i++) {
var anchor = arrayLinks[i];
var containerDiv = document.createElement('div'); //create the div
containerDiv.style.height = '25px';
containerDiv.style.width = '60px';
containerDiv.style.border = '1px solid black';
containerDiv.appendChild(anchor); //add anchor to the div
document.body.appendChild(containerDiv);
}
}
<a class="link" href="#">A</a>
<a class="link" href="#">B</a>
<a class="link" href="#">C</a>
<a class="link" href="#">D</a>
<a class="link" href="#">E</a>
<a class="link" href="#">F</a>
<br />
<input type="button" onclick="insertIntoDivs();" value="Insert Into Divs" />
I am trying to get one link to open in a certain div.
When click on Jump link I need open the link on div id="container" and replace the image on the div with the webpage.
I have tried this code without success.
How to do resolve this?
Can you help me?
Thank you in advance for any help, really appreciated.
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script>
function finish(){
document.getElementById("loading").style.visibility = "hidden";
}
$(document).ready(function () {
$('input[readonly]').on('keydown', function (e) {
if (e.which === 8) {
e.preventDefault();
}
});
});
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
});
</script>
<ul class="sub_menu">
<li><a name="#container" href="http://...">Jump</a></li>
</ul>
<div id="container" >
<img src="images/Logo.jpg" />
</div>
#EDIT01
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPanel() {
document.getElementById('image').style.display = "none";
}
</script>
<ul class="sub_menu"">
<li><a name="#container" href="http://..." target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="image">
<img src="images/Logo.jpg" />
<iframe name="content" style="border:none;">
</iframe>
</div>
Why not use iframe?
function showPanel() {
document.getElementById('image').style.display = "none";
}
<ul class="sub_menu">
<li><a name="#container" href="www.example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="container" >
<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" id="image">
<iframe name="content" style="border:none;">
</iframe>
</div>
Answer for edit #1: Your edit #01 is not working because you are hiding the entire div by id "image". Change div id to another name.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPanel() {
document.getElementById('image').style.display = "none";
}
</script>
<ul class="sub_menu">
<li><a name="#container" href="example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="images">
<img src="images/Logo.jpg" id="image" />
<iframe name="content" style="border:none;">
</iframe>
</div>
You can create iframe on the fly and place it inside container div.
$('.sub_menu').on('click', 'li > a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('#container').html('<iframe class="myiframe" src="'+url+'" />');
})
.myiframe{border: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub_menu">
<li><a name="#container" href="/questions">Jump</a></li>
</ul>
<div id="container" >
<img src="images/Logo.jpg" />
</div>
It's foundation zurb 6/orbit slider.
How to display count current/total before the slidechange.zf.orbit event? Should I add some event before, on window load or something else?
First slide shows without counter, only when click it visible.
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><li></li></button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span><li></li></button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../images/demo-img/event-demo.png" alt="">
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
<div class="slider-number"></div>
</div>
<script>
(function() {
function slideNumber() {
var totalItems = $('li.orbit-slide').length;
var currentItem = $('li.orbit-slide.is-active').index() - 1;
$('.slider-number').html(currentItem + '/' + totalItems);
}
document.addEventListener("DOMContentLoaded", function() {
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
});
})();
</script>
The DOMContentLoaded event is just an event you are looking for.
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
So call the slideNumber() function one more time at this event:
<script>
document.addEventListener("DOMContentLoaded", function() {
function slideNumber() {
var totalItems = $('li.orbit-slide').length;
var currentItem = $('li.orbit-slide.is-active').index() - 1;
$('.slider-number').html(currentItem + '/' + totalItems);
}
slideNumber();
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
});
</script>
Foundation uses jQuery. So you can use the .ready() method instead of document.addEventListener("DOMContentLoaded" .... It looks like $(function() {.
Do not force a function to define totalItems and $('.slider-number')with each new call. Use global variables instead.
<script>
$(function() {
var totalItems = $('li.orbit-slide').length;
var selectNumber = $('.slider-number');
slideNumber();
$('[data-orbit]').on('slidechange.zf.orbit', slideNumber);
function slideNumber() {
var currentItem = $('li.orbit-slide.is-active').index() - 1;
sliderNumber.html(currentItem + '/' + totalItems);
};
});
</script>
Please check the result: http://codepen.io/glebkema/pen/XjrLZj
$(document).foundation(); // initialize every Foundation plugin
var totalItems = $('li.orbit-slide').length;
var selectNumber = $('.slider-number');
slideNumber();
$('.orbit').on('slidechange.zf.orbit', slideNumber);
function slideNumber() {
var currentItem = $('li.orbit-slide.is-active').index() - 1;
selectNumber.text(currentItem + '/' + totalItems);
}
.slider-number {
font-size: 36px;
text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">
<div class="orbit" role="region" data-orbit data-timer-delay="3000" data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous">◀︎</button>
<button class="orbit-next">▶︎</button>
<li class="orbit-slide is-active">
<img class="orbit-image" src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://via.placeholder.com/900x300/96c/c9f/?text=4" alt="">
</li>
</ul>
<nav class="orbit-bullets">
<button data-slide="0" class="is-active"></button>
<button data-slide="1"></button>
<button data-slide="2"></button>
<button data-slide="3"></button>
</nav>
<div class="slider-number"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
I am trying to change the image based when someone clicks on a link. I have coded this so far:
<script>
function changeImage(e) {
var elem, evt = e ? e:event;
alert("Event is"+evt.target);//for testing
var image = document.getElementById('myImage');
var feat1 = document.getElementById('feat1');
var feat2 = document.getElementById('feat2');
var feat3 = document.getElementById('feat3');
var feat4 = document.getElementById('feat4');
if (evt.target.match(feat1.href)) {
image.src = "";
} else {
image.src = "";
}
}
</script>
And HTML:
<li><a name="a" href="#1" onclick="changeImage()" id="feat1">a</a></li>
<li><a name="story" href="#2" onclick="changeImage()" id="feat2">b</a></li>
<li><a name="rep" href="#3" onclick="changeImage()" id="feat3">c</a></li>
<li><a name="reg" href="#3" onclick="changeImage()" id="feat4">d</a></li>
The image does not change. I am using the alert for testing. I am a bit new to javascript so how do I go about solving this?
Pass the reference of the current clicked link into onclick handler:
html part:
<li><a name="a" href="#1" onclick="changeImage(this)" id="feat1">a</a></li>
<li><a name="story" href="#2" onclick="changeImage(this)" id="feat2">b</a></li>
<li><a name="rep" href="#3" onclick="changeImage(this)" id="feat3">c</a></li>
<li><a name="reg" href="#3" onclick="changeImage(this)" id="feat4">d</a></li>
Optimize your js part as shown below:
<script>
function changeImage(e) {
var elem = e.currentTarget,
id = elem.id,
href = elem.href;
if (<your_condition>) { // exemplary code
image.src = "";
} else {
image.src = "";
}
}
</script>
First, you do know that in your example, the last two hyperlinks have the same name and href values, right?
Next, onclick as an inline event handler was never standard and is considered bad form. Instead use the DOM standard, addEventListener() as follows:
<body>
<li><a name="a" href="#1" id="feat1">a</a></li>
<li><a name="story" href="#2" id="feat2">b</a></li>
<li><a name="rep" href="#3" id="feat3">c</a></li>
<li><a name="reg" href="#4" id="feat4">d</a></li>
<img id="myImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/2000px-NASA_logo.svg.png" height="200">
<script>
(function(){
var theAnchors = document.querySelectorAll("a[id^='feat']");
for(var i = 0; i < theAnchors.length; ++i) {
theAnchors[i].addEventListener("click", function(){
changeImage(this);
});
}
function changeImage(targetAnchor) {
var image = document.getElementById('myImage');
var href = targetAnchor.href;
if (href.indexOf("#3") > -1) {
image.src = "http://www.nasa.gov/centers/jpl/images/content/650602main_pia15415-43.jpg";
} else {
alert("else");
image.src = "http://www.nasa.gov/centers/goddard/images/content/280046main_CassAcomposite_HI.jpg";
}
}
()); // IIFE
</script>
</body>
In the following JSFiddle, clicking a, b or d will result in the first image going away and a replacement coming up, but when you click c, a different image comes up. Be patient, by the way, these are hi-res images and take a few seconds to load.
Check out a working sample: https://jsfiddle.net/adspxoc5/5/