how to create button displays image file - javascript

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>

Related

Javascript dont take changed variable

I have a gallery function with an imagezoom at the big image.
When the big image is changed and i click on it to activate the zoom function, it shows the old image.
I think the variable isnt changed in javascript?
<script type="text/javascript">
function change_img(imgurl) {
image = document.getElementById('preview');
image.src = imgurl
imageURL = imgurl
}
$(document).ready(function(){
var imageURL = document.getElementById('preview').src;
$('#ex3').click(function() {
var imageURL = document.getElementById('preview').src
$('#ex3')
.zoom({ on:'click', magnify:1.8, url:imageURL })
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block');
})
});
EDIT:
This way the thumbnails will be created:
<span class='zoom' id='ex3'>
<img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
<span class="zoom-btn"></span>
</span>
<!-- BEGIN thumbs -->
<div class="thumbnails">
<img id="thumbimg" onclick="change_img('{PATH}/{thumbs.ID}')" name="img" src="{PATH}/{thumbs.ID}" alt="" />
</div>
<!-- END thumbs -->
In javascript .zoom it should be the changed path at "url:imageURL".
Anyone knows how to get the actual path in imageURL?
EDIT: Will this work?--I'm honestly not sure if this zoom function changes the img source or not. If it doesn't, changing that from here, should be fairly easy. There seemed, from a search, to be several of which you could be using.
<span class='zoom' id='ex3' data-src="changedimg.jpg">
<img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
<span class="zoom-btn"></span>
</span>
<script type="text/javascript">
$(document).ready(function(){
$('#ex3').click(function() {
var newURL = this.data('src')
$('#ex3')
.zoom({ on:'click', magnify:1.8, url: newURL })
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block');
})
});
</script>

How to handle: When image is clicked identical image generated using Javascript

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.

Javascript: Change background of all images inside div

I would like to change the background of all images inside a div with a JS function:
My div:
<div>
<div id="avatar_container">
<img src="a.png" onclick="myfunction()" />
<img src="b.png" onclick="myfunction()" />
</div>
</div>
My function:
function myfunction(){
//I tried this two methods
document.getElementById("avatar_container").getElementsByTagName('img').css({'background' : 'green'});
document.getElementById("avatar_container").getElementsByTagName('img').style.backgroundColor = "green";
}
that's solve your problem
<div id="avatar_container">
<img src="a.png" class="myClass1" />
<img src="b.png" class="myClass1" />
</div>
Js: (important Notice: use js code after html codes)
var elems = document.getElementsByClassName('myClass1'), i;
for (i in elems) {
elems[i].style.backgroundColor = "green";
}
}
but i suggestion you to use and learn Jquery ,
jquery is a Javascript Framework witch make everything's very easy for you with less coding
with Jquery You can do it simplest like this
$('#avatar_container .myClass1').css('backgroundcolor','green');
and if you wanna attach click event
$('#avatar_container .myClass1').click(function() {
$(this).css('backgroundcolor','green');
});

Linkmenu w/ MouseOver javascript

I have this menu made out of imagelinks on my website and want to have a different MouseOver function on every menuobject, i have tried like this but it always goes for the later script so when i hover start it changes to info.
<script language="javascript">
function MouseRollover(start) {
start.src = "starthover.png";
}
function MouseOut(start) {
start.src = "startidle.png";
}
</script>
<script language="javascript">
function MouseRollover(info) {
info.src = "infohover.png";
}
function MouseOut(info) {
info.src = "infoidle.png";
}
</script>
and for the links i got this:
<a href="test.html">
<img src="startidle.png" border="0px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</a>
<a href="test.html">
<img src="infoidle.png" border="0px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</a>
I wonder if there is any way to classify these functions so i can get the same function but different pictures for my menu?
Your 2nd script is overwriting the first one, which means every time you call "MouseRollover" or "MouseOut", your js will go for the 2nd script.
You can work with only one function that will swap you images, no need to have four functions.
<head>
<script>
function swapImg(element, img) {
element.src = img;
}
</script>
</head>
<body>
<a href="#">
<img src="startidle.png" border="0px" width="150px"
onMouseOver="swapImg(this, 'img01.jpg')"
onMouseOut="swapImg(this, 'img02.jpg')" />
</a>
<a href="#">
<img src="infoidle.png" border="0px" width="150px"
onMouseOver="swapImg(this, 'img03.jpg')"
onMouseOut="swapImg(this, 'img04.jpg')" />
</a>
</body>
Plus, it's "border" instead of "boarder".
You need only one function in your javascript.
Try it:
HTML
<a href="test.html">
<img src="startidle.png" boarder="0px"
onMouseOver="MouseRollover(this, 'starthover.png')"
onMouseOut="MouseOut(this, 'startidle.png')" /></a>
<a href="test.html">
<img src="infoidle.png" boarder="0px"
onMouseOver="MouseRollover(this, 'infohover.png')"
onMouseOut="MouseOut(this, 'infoidle.png')" /></a>
JAVASCRIPT
function MouseRollover(obj, image) {
obj.src = image;
}
function MouseOut(obj, image) {
obj.src = image;
}
Edit: You could use only one function
function changeImage(obj, image){
obj.src = image;
}

Changing the inner html with javascript

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>

Categories