I have this divs in my html
<img src="images/cocina1.jpg" name = "main_img" alt="alternate_text" height="250" width="150" />
<div class="imgbox" id="thumbnail_1"> <img src="images/cocina1.jpg" alt="alternate_text" height="250" width="150" /> <br />
<p>Medico1</p>
</div>
and the following JS
function changeTo1(){
var newP = "some Paragraph"
document.getElementById('id_descripcion_txt').innerHTML = newP;
document.main_pic.src = "images/medico1.jpg"
document.getElementById('thumbnail_1').innerHTML = " <img src=\"images/cocina0.jpg\" alt=\"alternate_text\" height=%22250%22 width=\"150\" /> <br /> <p>Medico0</p> "
}
Now, after clicking on the image that calls changeTo1(), the first part of the JS works: the 'id_descripcion_txt' does changes its innerHTML to "some Paragraph", but the other 2 statements, of changing main_pic src and the "thumbnail_1" innerHTML to something else don't work.
Any ideas?
Thanks
changing main_pic src and the "thumbnail_1" innerHTML to something
else don't work.
On making the changes,
document.main_img.src = "images/medico1.jpg";
and
height=\"350\" instead of height=%22250%22
it worked for me.
It's probably failing on the image change. I think you want this HTML (note marked change):
<img src="images/cocina1.jpg" id="main_img" alt="alternate_text" height="250" width="150" />
^^^^^^^^^^^^^
And this JS:
document.getElementById("main_img").src = ...
Also, you had different terms for the image ('main_pic' in one, and 'main_img' in the other).
Are you getting a javascript error? Unless there's a typo in your posted code,
document.main_pic
does not exist. Try
document.main_img.src = "images/medico1.jpg";
If you want to change the one of your image through java script, then use this code, here in this example i have a banner and a text, when i click on the button then banner and text both changed.
<html>
<head>
<script type="text/javascript">
function changeImgandText()
{
if(document.getElementById('banner'))
banner.innerHTML = '<img src="img1.jpg"width="100%" height=220>';
demo.innerHTML="Pir you are great !";
}
</script>
<p id='banner'><img src="img2.jpg" width="100%" height=220> </p>
<b id='demo'>dude</b> </br>
<input type='button' onclick='changeImgandText()' value='Change Text'/>
</head>
</html>
Related
I'm working on a webpage and I'm still learning HTML/CSS/Javascript. I'm trying to create a button such that it displays a random image file from my computer or database, but I'm not sure how to go about writing it. Here's my code:
function display() {
var popup = document.getElementById("img").src = "img_1.jpg";
}
<button class="popup" onclick="display()">ITERATION.
<span class="popupimg" id="img">img_1.jpg</span>
</button>
This, should be an img tag :)
<span class="popupimg" id="img">img_1.jpg</span>
like that:
<img src="img_1.jpg" id="img" />
Also, it doesnt have to be inside the button.
Your code should look something like
<button class="popup" onclick="display()">ITERATION.</button>
<img src="img_1.jpg" id="img" />
You can do something like following. But you should checkout jQuery too.
function display(imagepath) {
var img = document.getElementById("img");
img.src = imagepath;
img.style.display = 'block';
}
<img src='' style='display:none' id='img' width='120'>
<button class="popup" onclick="display('https://i.imgur.com/avAMfAu.jpg')">Show Image</button>
See example on jsfiddle
You need to use an <img>instead of a <span> if you want to display a image.
function display() {
var popup = document.getElementById("img").src = "img_1.jpg";
}
<button class="popup" onclick="display()"><!-- What is this ? => ITERATION. -->
<img id="img" src="">
</button>
I'm new of Angular JS, Well I'm trying to replace an image on click. i.e.,One Click on Img1 i would replace the previous image by Img1 and so on.
To achieve this I'm using ng-click. The thing is even the image names are being retrieved from DB.
So when I do this, it doesn't work-
<img class="img-responsive" src="images/products/{{oneItem.Image3}}" ng-click="current='{{oneItem.Image3}}'" />
Whereas works when I do this-
<img class="img-responsive" src="images/products/{{oneItem.Image3}}" ng-click="current='test3.jpg'" />
And I'm trying to replace it here-
<div class="trueimagger">
<img ng-src="WebDrop/images/products/{{ current }}" />
</div>
Can someone help me out by pointing where I'm messing it up.
Please lemme know if any additional info is needed. :)
ngClick expects an expression:
ng-click="current = oneItem.Image3"
You should also use ngSrc directive instead of src attribute directly:
<img class="img-responsive"
ng-src="images/products/{{oneItem.Image3}}"
ng-click="current = oneItem.Image3" />
You don't have to write double curly braces {{..}} in ng-click.
Instead, simply write:
<img class="img-responsive"
src="images/products/{{oneItem.Image3}}"
ng-click="current='oneItem.Image3'" />
I would change it directly on the controller so you can format your url without putting logic on the view
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('yourApp', [])
app.controller('FooCtrl', function($scope) {
$scope.imgSrc = 'http://www.freedigitalphotos.net/images/img/homepage/87357.jpg';
$scope.changeSrc = function() {
$scope.imgSrc = 'http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg';
}
});
</script>
</head>
<body ng-app="yourApp">
<div ng-controller="FooCtrl">
<div class="trueimagger">
<img ng-src="{{ imgSrc }}" />
</div>
<button ng-click="changeSrc()">ChangeImgSrc</button>
</div>
</body>
</html>
here is a plunker with this idea
The code below works to make one copy of the image clicked. I am needing the code below to work for multiple images.
For example if I click 5 images on the screen, the same 5 images should generate at the bottom of the page. The user should be able to select 5 out of 10 images. Any thoughts? Thanks!
JS:
function changeImage() {
var imgSrc = 'http://placehold.it/150';
if (document.getElementById('myImage').src === imgSrc) {
document.getElementById('new').src = imgSrc;
}
}
HTML
<a href="#" onClick="changeImage()">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200">
You can use JQuery clone() function
$('img').click(function() {
$('body').append($(this).clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50/000000/ffffff">
<img src="http://placehold.it/50x50/1C90F3/ffffff">
<img src="http://placehold.it/50x50/F2BB7C/ffffff">
you can use jquery to do that
HTML
<a href="#" id="my-image">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200" />
JS
$('#my-image').click(function(){
//setting attribute src to be equal as src from #myImage
$('#new').attr('src', $('#myImage').attr('src'));
//returning false in order to avoid default action
return false;
});
So that is it :)
Just remember to put this code after your html or into
$(document).ready(function(){ ..... });
I hope this helps.
I have a page I'm using to grab image alt text from a slider. Each image has a different alt text, and I'm trying to pull it into an array and then loop through it to display it.
However when I implement it, it only adds one object to the array as opposed to how ever many it may ACTUALLY have inside the div.
$(document).ready(function () {
var tn_array = $("#rightSlider img").map(function () {
return $(this).attr("alt");
});
for (var i = 0; i < tn_array.length; i++) {
alert(tn_array[i]);
$('#links').append('<a href="#" title="' + tn_array[i] + '" >' + tn_array[i] + '</a><br />');
}
});
Here is the main page that the code grabs the alt text from:
<div id="rightSlider">
<div>
<img src="images/adptvtch_s1_1.jpg" alt="Hearing Aid On A Female's Ear" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_2.jpg" alt="Hands Reading Braille Book" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_3.jpg" alt="Man In Wheelchair Reading" width="330" height="215" />
</div>
</div>
I've tried other things such as .each and I can't seem to pinpoint why it's only adding the first alt text and not the other ones. If you guys can help me figure it out, I'd be greatly appreciative.
You don't need additional iteration and an unnecessary array manipulation.
Try this,
var xEle = $('#links');
$("#rightSlider img").each(function() {
xEle.append('<a href="#" title="'+ $(this).attr("alt") +'" >'+ $(this).attr("alt") +'</a><br />');
});
DEMO
I need some help here. Whit this page i want to create own link tags with a image. When you click your image, you'll go to that page you have choose. I think i'm almost done but it does not work! What have i done wrong?!
When I click the img element to open the new page, the image pops up..
<head>
<meta charset="utf-8">
<title>Min Startsida</title>
<script type="text/javascript">
function newLink() {
var myNewLink = document.getElementById("link");
localStorage.setItem(link, myNewLink.value)
};
function newIcon() {
var myNewIcon = document.getElementById("icon");
localStorage.setItem(icon, myNewIcon.value)
};
function varIcon() {
document.getElementById("image").src = localStorage.getItem(icon)
};
</script>
</head>
<body>
<form>
<h1>lägg till länk</h1><br />
<input type="text" id="link"><br />
<input type="text" id="icon"><br />
<button onClick="newLink(), newIcon()">lägg till länk</button>
</form>
<section>
<img src="#" id="image" onLoad="varIcon()">
</section>
</body>
This must be a string:
localStorage.setItem("link", myNewLink.value)
^^^^
what happens here is that the element is used as a key as link is used as an id - key has to be a string. This goes for both the setItem methods and the getItem as well that you use later:
<a href="#" onClick="location.href = localStorage.getItem('link')">
Alos, this must be separated with a semi-column:
<button onClick="newLink(); newIcon()">
^
(I didn't look further than these points)