I'm adding images stored in firebase to my html page from the database. That works and the image shows up, but I am unable to make the href property work on the img element. I want it to be clickable. Suggestions what I am doing wrong here?
var img = document.createElement("img");
img.src = snapshot.child("urlToImage " + (i) + " Content").val();
img.href = snapshot.child("urlToImage " + (i) + " Content").val();
img.height = 30;
img.width = 30;
contentA[i].appendChild(img);
Clickable image
function clickMe(){
alert('Clicked!');
}
<!DOCTYPE html>
<html>
<body>
An image as a link:
<a onclick="clickMe()">
<img src="https://s3.eu-central-1.amazonaws.com/live-resource/productCategories/HF-AT/HF_PRINT_WEB_F781A5E7-1575-4D81-8317-BC51C8653EBB.jpeg" border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>
</body>
</html>
You have to wrap the img element in an a tag.
<a href='urlToImage'><img src='urlToImage' /></a>
You can of course have an href attribute on an img if you want to, it just doesn't have any special default meaning to browsers like it would on an anchor
Is href a valid attribute of img? I've never seen that before. If you want it to be clickable just wrap it in a anchor.
Related
I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>
I have a quick issue that I need help with and hoping a fresh set of eyes can pinpoint my issue. I have a photo gallery and I want to display a larger image of the thumbnail when it is clicked. The thumbnails images show up fine at the bottom but are not clickable and the main (or larger image) does not show up. I am using an external .js file. I will upload the HTML also, and maybe some one can point me in the right direction and help me understand what I am overlooking.
<!doctype html>
<html>
<head>
<title>Photo Gallery Final Project</title>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "gallery.css">
</head>
<body>
<div class = "main">
<div class = "wrapper">
<div id = "largeImage">
<img src = "images/machine_1_big.jpg" alt = "machining image" width = "920" height = "400" id = "myImage" class = "border"/>
</div>
<div class = "thumbnail">
<img src="machine_1.jpg" alt = "machining lathe" id="machine_1"/>
<img src="machine_2.jpg" alt = "machining lathe" id="machine_2"/>
<img src="machine_3.jpg" alt = "machining lathe" id="machine_3"/>
<img src="machine_4.jpg" alt = "machining lathe" id="machine_4"/>
<img src="machine_5.jpg" alt = "machining lathe" id="machine_5"/>
<img src="machine_6.jpg" alt = "machining lathe" id="machine_6"/>
</div>
</div>
</div>
<script src = "gallery.js"></script>
</body>
</html>
//this will load the gallery in the browser and enable the gallery function
//window.onload = gallery;
//gallery funtion declared
function gallery(){
//variable allGalleryImages created. This is where all the images will be held
var allGalleryImages = document.images;
//for loop declared for the image array
for(var i = 0; i < allGalleryImages.length; i++){
if(allGalleryImages[i].id.indexOf("small") > -1){
//this will add a listener to the thumb images
allGalleryImages[i].onclick = imgChanger;
}
}
}
//this is the image changer function
function imgChanger(){
//this will change the src attribute value of the large image.
//document.getElementById('myImage').src ="images/"+this.id+"_big.jpg";
document.getElementById('myImage').src = " " + this.id +"_big.jpg";
}
I used JQuery. Did not have to change your HTML. And there is no reason to make and array of all the thumbnails.
$(document).ready(function() {
$(".thumbnail img").on("click", function() {
imgChanger($(this).attr("src"));
})
//this is the image changer function
function imgChanger(theSRC) {
//this will change the src attribute value of the large image.
//document.getElementById('myImage').src ="images/"+this.id+"_big.jpg";
var beforeJPG = theSRC;
console.log(beforeJPG);
beforeJPG = beforeJPG.substring(0, beforeJPG.length-4);
console.log(beforeJPG + "_big.jpg");
$("myImage").attr("src", beforeJPG + "_big.jpg");
}
})
Fiddle: https://jsfiddle.net/6v8arhp2/
Get the src of the clicked image
Chop off ".jpg"
Add "images/" to the front, add "_big.jpg" to the back
Change src of #myImage
** Of course your images are not inside JSFiddle so you cannot see it work, but the console logs show the transformation.
<html>
<head>
<title>How To Insert an Image</title>
<script>
function changeImage(){
var img = document.getElementById('image');
image.src='image4.jpg';
}
</script>
</head>
<body>
<img id="image" src="image1.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>
I am quite new to Javascript so please dont be too harsh. Basically im trying to switch from one picture to another using a button. So far with this code i have only managed to do 2 images but when i try to add a 3rd or 4th the first image messess up. I was hoping if someone could help me fix this problem.
Here's simplest approach the I used before, for two images. Easily extended to accomodate three, four, or more alternate images.
<div id="image1">
<img ... >
<button ...>
</div>
<div id="image2" style="display: none">
<img ... >
<button ...>
</div>
That is, put the first image, and a button, inside a "< div >" element, and a second image, and a button inside a second "< div >" element that's initially hidden.
Then, each button's javascript simply needs to set its own div's CSS style to "display: none", and remove this style from the other div element, effectively hiding one image, and displaying the other one.
This approach also makes it possible to update the button's text or label, accordingly. If both buttons have the same label, the only apparent result is the image change.
Try this script block instead:
<script>
var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg']
function changeImage() {
var img = document.getElementById( 'image' )
var url = images.shift() // remove first url from list
image.src = url // use it
images.push( url ) // append url to the end of the list
}
</script>
What you could do is declare an array which contains all your image urls:
var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"];
Then when clicking the button, you remove the first image url from the the array by using shift and assign that to variable imageUrl.
Then you set that imageUrl to the src attribute of the image element on your page.
Then you add that imageUrl at the end of the array using push.
This will rotate the images in the imageUrls array on every click.
<html>
<head>
<title>How To Insert an Image</title>
<script>
var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"];
function changeImage(){
var img = document.getElementById('image');
var imageUrl = imageUrls.shift();
img.src = imageUrl;
imageUrls.push(imageUrl);
}
</script>
</head>
<body>
<img id="image" src="image1.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>
You were very close! You just made mistake to assign a value to image.src instead of img.src. have a look at the code below :)
Using clicks:
<html>
<head>
<title>How To Insert an Image</title>
<script>
i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/
function changeImage(){
var img = document.getElementById('image');
i = i + 1; /*next image*/
if(i == 5) /* if end is reached, reset to first image*/
{
i = 1;
}
img.src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/
}
</script>
</head>
<body>
<img id="image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" height="100px" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>
Automatic image slider
<html>
<head>
<title>How To Insert an Image</title>
<script>
i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/
setInterval(function changeImage(){
var img = document.getElementById('image');
i = i + 1; /*next image*/
if(i == 5) /* if end is reached, reset to first image*/
{
i = 1;
}
img.src='image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/
}, 5000)
</script>
</head>
<body>
<img id="image" src="image1.jpg" height="100px" />
</body>
</html>
I want a Pure JavaScript code that will change an image and also its link to another image and another link on same place as toggle function. I have a web page and I have Anchors Links button as <img src="DownArrow.png"/> and I want that after clicking on this image, first it will lead you to the DIV2 and then it will change the code to <img src="UpArrow.png"/>. How to do this using pure JavaScript? Waiting for perfect reply and code?
This should work:
var link = document.querySelector('#arrow a');
link.onclick = function() {
var image = document.querySelector('#arrow a img');
if(this.href.slice(-1) === '1') {
this.href = '#DIV2';
image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1uparrow.png';
} else {
this.href = '#DIV1';
image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1downarrow.png';
}
}
See it in action here: http://jsfiddle.net/TM9ap/7/
Note that I've changed the href attribute in the link to #DIV1 like this <a href="#DIV1">
<!DOCTYPE html>
<html>
<title></title>
<head></head>
<body>
<a href = "#DIV1" style="color:BLACK;" onclick="execute();">Click me
<img src="UpArrow.png" />
</a>
<div id="DIV1" ></div>
<div id="DIV2" ></div>
<script>
function execute()
{
if ( document.getElementsByTagName("a")[0].getAttribute("href")==="#DIV1"){
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","DownArrow.png");
img.parentNode.setAttribute("href","#DIV2");
}
else
{
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","UpArrow.png");
img.parentNode.setAttribute("href","#DIV1");
}
}
</script>
</body>
</html>
i have a simple question regarding jquery, i have a long list of images directly uploaded from youtube, the image have the same v-code as the video itself, so for simpe downloading of all the videos on one page for browsers i made a list of images, once u click it, the video will appear on its place, the thing is that the code that i have oriented for video's image, but not on another one, anyway here is the code:
$('.youtube_thumb > img').click(function(){
var parts = this.src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(this);
$(this).parent().parent().find(".name,.detail,.youtube_play").hide();
$(this).remove();
});
and the div
<div class="youtube">
<div class="name">
#left(name,30)#
</div>
<div class="detail">#left(detail,50)#</div>
<div class="youtube_play"></div>
<div class="youtube_thumb">
<img src="http://img.youtube.com/vi/#link#/0.jpg" style="width:50%;height:300px;border:0;" />
</div>
</div>
as u can see the code takes the img's src and sort the v-code and then put it inside the frame. But i want to work this code only after i click on the class youtube_play but not on youtube_thumb's image.
Thank you all for the help!
$('.youtube_play').click(function(){
var img = $(this).next().find('>img');
var parts = img.get(0).src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(img.get(0));
img.parent().parent().find(".name,.detail,.youtube_play").hide();
img.remove();
});