In my photo gallery I have it so on click of an image it just changes the larger image to the source of it. But now I want the onclick function of the image to take the source that it would originally inject into the image and add 3 letters to the end before injecting, "lrg".
Javascript:
<script type="text/javascript">
function setImg(a){
document.getElementById('ImageFrame').src =
a.getElementsByTagName('img')[0].src
}
</script>
Html image that you click.
<a href="#gallery" onclick="setImg(this);"><img class="gallery" src="JCF/PICT0421.jpg"
/></a>
Larger image that changes:
<div>
<img id="ImageFrame" src="JCF/PICT0422.jpg" width="500" />
</div>
When the link injects into the "imageframe" I want the source to change to JCF/PICT0421lrg.jpg
If i got it right, this will solve our problem.
<script type="text/javascript">
function setImg(a){
var arr = a.getElementsByTagName('img')[0].src.split(".");
document.getElementById('ImageFrame').src = arr[0]+"lrg"+"."+arr[1];
}
</script>
extended example
http://jsfiddle.net/ymutlu/E9Fq5/
In change setImg to
function setImg(a){
var file_parts = a.getElementsByTagName('img')[0].src.split(".");
var new_name = file_parts[0] + "lrg." + file_parts.slice(1).join(".");
document.getElementById('ImageFrame').src = new_name;
}
This will add the "lrg" before the first dot in the filename.
Related
i have this code and want to know how to add website links to the images, once the random image is generated i want the image can be clicked to go to a predetermined list of websites, it's a really beginner question since i don't really understand javascript functions.
Thank you.
<html>
<head>
<script type="text/javascript">
//preload the six images first
var face0=new Image()
face0.src="d1.gif"
var face1=new Image()
face1.src="d2.gif"
var face2=new Image()
face2.src="d3.gif"
var face3=new Image()
face3.src="d4.gif"
var face4=new Image()
face4.src="d5.gif"
var face5=new Image()
face5.src="d6.gif"
</script>
</head>
<body>
<img src="d1.gif" name="mydice">
<form>
<input type="button" value="Throw dice!" onClick="throwdice()">
</form>
<script>
function throwdice(){
//create a random integer between 0 and 5
var randomdice=Math.round(Math.random()*5)
document.images["mydice"].src=eval("face"+randomdice+".src")
}
</script>
</body>
</html>
You don't need to use the (dangerous) eval() function nor do you need to pre-load the images for this.
Just place all your image links (d1.gif, d2.gif, etc) in an array and similarly, place all the links you want the images to respectively link to in another array.
In your HTML, wrap the <img> element in an anchor tag <a> and now you can just update the anchor tag's href value as well as the img src value whenever the button is clicked.
Also, you don't need a form for the button. Just create the button as a separate element and add the click event listener to that button.
Check and run the following Code Snippet for a practical example of the above approach:
//get the anchor tag that has the image and the button
const image = document.querySelector('a');
const btn = document.querySelector('#btn');
//assign the src links and href links to arrays
const links = ["someLink1", "someLink2","someLink3","someLink4","someLink5","someLink6"]
const images = ["d1.gif","d2.gif","d3.gif","d4.gif","d5.gif","d6.gif"]
//update the src link and href link
function throwdice(){
const randomIndex = Math.round(Math.random()*5);
image.href= links[randomIndex];
image.firstChild.src= images[randomIndex];
}
//run the function when the button is clicked
btn.addEventListener('click', throwdice)
<h3>Right-click the image and inspect it to see the anchor tag link and the img src link change whenever the button is clicked</h3>
<img src="d1.gif" name="mydice">
<button id="btn">Throw dice!</button>
Here is how you can make it with JavaScript
function getRandom(){
var RandomNumber1 = Math.floor(Math.random() * 6) + 1;
var link =["Link1","Link2","Link3","Link4","Link5","Link6"]
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = '<img src="dice' + RandomNumber1 + '.png">';
}
<input type="button" value="Throw Dices" onClick="getRandom()">
<div id="result">
<img src="d1.gif" name="mydice">
</div>
I need a programm in HTML with javascript which has two pictures that by click changes from picture A to B and from picture B to A and so on. I think I need a loop...
Please Try Following Code
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
You Can Have example here https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb
you can find a good example of what you want to do in here:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
you just need to tweak it a bit so it will change the images correctly.
I would recommend building a function with variables to store the images name.
<script>
function ChangeImage(){
var picElement1 = document.getElementById('HTMLImgElement1');
var picElement2 = document.getElementById('HTMLImgElement2');
var temp = picElement1.src;
picElement1.src = picElement2.src;
picElement2.src = temp;
}
</script>
In the html just set up 2 images with ID HTMLImgElement1 and HTMLImgElement2.
and a button with an onclick attr that will forward to this function.
I have a newsfeed in my CMS that pulls preview images as well as teaser text for the feed. The images are all thumbnails # 75x75px. I wanted to have the preview images much larger, but cannot scale an image that small.
I'm wondering what JS I need to run to replace all the URL's to the original image src.
Have:
Need to change them all to the below - which is just replacing 'thumb' with 'large':
This needs to apply to a whole css class; as it is a newsfeed & there will be new articles
Here's where I'm at:
function replaceImgSrc(img,imgTwo) {
var arr=[img,imgTwo];
for(i=0;i<arr.length;i++)
arr[i].each(
function(i,e) {
theImg=$(this),
theImg.attr("src",
function(i,e) {
return e.replace("_thumb","_large")
}
)
}
)
}
If the newsfeed is wrapped in a class, try this way.
function replaceImg($class) {
$class.find("img").each(function(k, el) {
var newSrc = $(el).attr("src").replace("_thumb", "_large");
$(el).attr("src", newSrc);
});
}
replaceImg($("#newsfeed"));
And in your HTML, wrap the newsfeed code inside an identifiable DIV.
<div id="newsfeed"> {{place newsfeed code in here}} </div>
Try this fiddle jsfiddle.net/bharatsing/wkh6da93/
This will find all images in page and change its src with large image.
$(document).ready(function(){
$("#btnLarge").click(function(){
$("img").each(function(){
var src=$(this).attr("src");
src=src.replace("_thumb","_large");
var src=$(this).attr("src",src);
});
});
});
If the assumption is that you have all img elements in an array var imgArray, then you can iterate thru them and update the src attribute like this:
imgArray.forEach(enlargeImageSrc);
function enlargeImageSrc (image) {
image.src = image.src.replace('_thumb', '_large');
}
Try this hovering over the button will make the images with class="show" bigger, as soon as you remove the mouse they are small again.
$("button").mouseenter(function (){
var srcI = $(".show").attr("src");
srcI = srcI.replace("thumb","large");
$(".show").attr("src",srcI);
});
$("button").mouseleave(function (){
var srcI = $(".show").attr("src");
srcI = srcI.replace("large","thumb");
$(".show").attr("src",srcI);
});
button{
display:block;
}
img.show{
max-width:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Click me</button>
<img class="show" src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png"/>
</div>
I make a code for you where I take two variables one for large image URL and one for small image URL. I create a function on click on change image button your image url change to big image and it show you big image and then you again click on that button it change big image to small image. You can also see the live demo of this here https://jsfiddle.net/Arsh_kalsi01/3s1uudhe/2/
$(document).ready(function(){
var big_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_large.png";
var small_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png";
$(document).on("click",".Changeimagetolarge",function(){
var obj = $(this);
obj.removeClass('Changeimagetolarge');
obj.addClass('Changeimagetosmall');
obj.next("img").attr('src',big_image);
});
$(document).on("click",".Changeimagetosmall",function(){
var obj2 = $(this);
obj2.removeClass('Changeimagetosmall');
obj2.addClass('Changeimagetolarge');
obj2.next("img").attr('src',small_image);
});
});
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<div>
<button class="Changeimagetolarge">
Change Image
</button>
<img src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png">
</div>
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
function myFunction()
{
var img = document.getElementById("image");
if (img.src == "smiley.gif")
document.getElementById("image").src="landscape.jpg";
else
document.getElementById("image").src="smiley.gif";
}
</script>
<button type="button" onclick = "myFunction()"> click me </button>
<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>
</body>
</html>
I would like to let the HTML page to switch between two pictures each time user click the button, but the picture never changes.
When I change the
if (img.src == "smiley.gif")
into
if (img.src.match("smiley.gif"))
then the code works as expected.
Could anyone please let me know the reason?
devnull69 is right. If you set the img's source to a relative path, it's src attribute will still return the full URL. You need to either fully qualify the path to the image or strip the img.src value to just the final component (filename) and compare.
For example, you could do:
var imgFilename = img.src.substring(img.src.lastIndexOf("/") + 1);
if (imgFilename === "smiley.gif") {
// Do something.
}
I am trying to add a link to a single image that already has a change source function attached to it.
The site has a gallery that uses thumbnails to change the larger image so there are 27 images. I am triyng to add an individual link to one of this images.
all the code i am finding uses id's and in order to keep the change source function working, none of these solutions will work.
The link is for only one image. Here is my code:
<script>function changeImage27()
{
var img = document.getElementById("image");
img.src="thestudio/thestudio_27.gif";
}
</script>
And my HTML:
<div id="slideshow">
<img id="image" src="thestudio/thestudio_1.gif" />
</div>
<a id="clickme" onClick="changeImage();"><img border="0"src="thestudio/thestudio_1t.gif"></a>
I only need to link one image. so i am looking for a solution that adds a hyperlink in the script. a.href="" is not working and i cant seem to find any other solutions.
This may be a better solution:
<head>
<script type="text/javascript">
var images = ["image1.gif","image2.gif",...,"image27.gif"];
var thumbs = ["image1t.gif","image2t.gif",...,"image27t.gif"];
var basePath = "thestudio/";
var currentImage = 0;
function changeImage() {
var img = document.getElementById("image");
var thumb = document.getElementById("thumb");
img.src = basePath + images[currentImage];
thumb.src = basePath + thumbs[currentImage];
currentImage ++;
if (currentImage >= images.length) {
currentImage = 0; // this will cause it to loop
}
}
</script>
</head>
<body onLoad="changeImage();">
<div id="slideshow">
<img id="image">
</div>
<a onClick="changeImage();" href="#"><img border="0" id="thumb"></a>
</body>
So you don't have to have 27 different functions.
You could also define the images like follows:
var images = [{image:"image1.gif",thumb:"image1t.gif"},...{image:"image27.gif",thumb:"image271.gif"}];
Then in changeImage:
var image = images[currentImage];
img.src = basePath + image.image;
thumb.src = basePath + image.thumb;
Here you go:
Take a look at this JSFiddle I put together for you.
Cheers!
http://jsfiddle.net/douglasloyo/aR83b/
<script>
window.changeImage = function changeImage()
{
var img = document.getElementById("my-img");
var newImgSrc = "http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/dog-leader-pack.jpg";
img.src=newImgSrc;
}
</script>
<img id="my-img" src="http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/ocean-island- palm.jpg" />
<button onclick="window.changeImage();">ClickMe</button>