Javascript. OnClick Image src +1 - javascript

This is my code:
<img name="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" alt="after" src="img/.../1/after.jpg"/>
<img src="img/next.png" onclick="changer1.src='img/.../2/before.jpg'; changer2.src='img/.../2/after.jpg'"/>
So when I click on the "next.png" image, both pictures change to the pictures in the new folder. This works perfect. But what I want is, when I click on the "next.png" image, the src code automatic change. So when I click it looks like:
<img src="img/next.png" onclick="changer1.src='img/.../3/before.jpg'; changer2.src='img/.../3/after.jpg'"/>
When i click again it looks like:
<img src="img/next.png" onclick="changer1.src='img/.../4/before.jpg'; changer2.src='img/.../4/after.jpg'"/>
So the folder allways move +1. From 2 to 3. From 3 to 4...
I hope you know what I mean and help me :)
And sorry for my bad english.

You can change it with basic DOM methods in Javascript. Firstly I should point out 'name' is a depreciated attribute, HTML 5 uses the 'id' attribute instead.
Anyway firstly we need to add some labels to the img's so we can find them in JS
<img id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img id="changer2" alt="after" src="img/.../1/after.jpg"/>
I just used your existing name attributes. Figured that was why you'd included them anyway! Then we add a JS function to attach to the on click listener.
<script>
var pictureID = 1;
function moveToNextImage(){
pictureID++;
var string = 'img/.../'+pictureID;
document.getElementById('changer1').src = string + '/before.jpg';
document.getElementById('changer2').src = string + '/after.jpg;
}
</script>
This script keeps a counter for the folder value and uses that to generate a new source string to replace the old one with. The function adds 1 to the counter then changes the src attribute on the 2 elements to the new one.
Your next button should look like this to use the function instead.
<img src="img/next.png" onclick="moveToNextImage()"/>

Okey so my problem now is I have this script allready installed for those 2 images
So my full script is this:
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter();
});
</script>
<div id="container">
<div><img id="changer1" alt="before" src="http://www11.pic-upload.de/12.09.14/oha2eiilhnay.jpg"/></div>
<div><img id="changer2" alt="after" src="http://www11.pic-upload.de/12.09.14/gdbsfgzsh2f.jpg"/></div>
</div>
I hope you know what my problem is...
When I remove the "container" ID from the div, the script from Raj works perfekt. But not my time comparison script, you find in the 1 link.

<!DOCTYPE html>
<html>
<body>
<img name="changer1" id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" id="changer2" alt="after" src="img/.../1/after.jpg"/>
<img src="img/next.png" id="test"/>
</body>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
var i = 2;
$("#test").click(function(){
var srcbefore='img/.../'+i+'/before.jpg';
var srcAfter="img/.../"+i+"/after.jpg";
$("#changer1").attr("src",srcbefore);
$("#changer2").attr("src",srcAfter);
console.log(srcbefore+"::"+srcAfter);
i++;
});
});
</script>
</html>
hope this solves your problem..
FYI -
Dont couple your JS code in HTML. Make it seperate.
Use Class or ID instead of name.

Related

One link opens two Iframe targets on same page

I currently have a working webpage that has a list of links that open in a targeted iFrame. I would like to add a subsequent iFrame target and be able to open supplementary pages in that iFrame as well as the original iFrame with the same link.
From my research, it seems this should be possible with some JS but I'm struggling to figure it out.
So basically, how could I click on "Lot 1" and open up a Youtube in the "gallery" iFrame and, say, www.example.com in the "info" iFrame simultaneously?
<iframe src="" name="gallery"</iframe>
<iframe src="" name="info"</iframe>
Lot 1
Lot 2
You can have an array/object storing the links, and then run an onclick event that will change the corresponding iframe sources to the values from said array (iframes have a src attribute which you can change through JS).
For example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = ['http://example.com/', 'http://example.net/'];
function setSource() {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource();">Click me</span>
</body>
</html>
If you'd like to have multiple span elements, each changing the iframes' sources to a different set of links, you can always use a multidimensional array (an array of arrays) for src and add a parameter to the function:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = [['http://example0.com/', 'http://example0.net/'], ['http://example1.com/', 'http://example1.net/']];
function setSource(num) {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[num][i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource(0);">Click me #0</span>
<span onclick="javascript: setSource(1);">Click me #1</span>
</body>
</html>
Here hrf is an array that contains another array (['http://example0.com/', 'http://example0.net/']) at index 0 and yet another one (['http://example1.com/', 'http://example1.net/']) - at index 1. By passing a parameter to setSource we can choose what subarray we want to pick to get the sources from.
Please don't forget to close your tags.
Using the a tag for your purpose is not a good idea, I recommend using a span. The a tag's purpose is to link the user to another document, not run javascript code (not using a also means you don't have to use preventDefault).
The javascript: prefix is used for the onclick attribute to provide backwards compatibility for some older mobile browsers.
This code works simply great :
<!DOCTYPE html>
<html>
<body>
<h1 style="display:flex;
justify-content:center;color:green;">
GeeksforGeeks
</h1>
<iframe src="about:blank" id="frame1"> </iframe>
<iframe src="about:blank" id="frame2"> </iframe>
<button id="update">Click me</button>
<script>
document.getElementById('update').addEventListener('click', function () {
// Change src attribute of iframes at a same time
document.getElementById('frame1').src ='https://www.google.com/search?q=java&igu=1';
document.getElementById('frame2').src ='https://www.google.com/search?q=farming&igu=1';
});
</script>
</body>
</html>

Use an image instead of text (script type="text/javascript")

I have some code provided by the vendor:
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">FREE Puppies</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
I want to replace the FREE Puppies text with an image. The vendor says it can't be done, but I disagree. I've tried several different things but nothing seems to work quite right. I'd really appreciate some help. I know I'm just missing something small. Thanks so much!
Only replacing the text with an image is not going to work, because the embedded script looks for the href attribute of the clicked element (event.target). In the case of an image inside a link tag, the target element is the image, and does not have an href attribute.
To solve that, you can catch the event on any image that is inside these links, block it, and simulate a click on the parent link.
Demo not using jQuery
var sh_lead_images = document.querySelectorAll('.sh_lead_button img');
for(var i=0; i<sh_lead_images.length; i++)
{
sh_lead_images[i].addEventListener('click', function(e){
e.stopPropagation();
e.preventDefault();
this.parentNode.click();
});
}
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="http://www.truthunity.net/sites/all/content/graphics/ministry-click-me-button.jpg" alt="">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
Demo using jQuery
$('.sh_lead_button img').click(function(e){
e.stopPropagation();
e.preventDefault();
$(this).parent().click();
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="http://www.truthunity.net/sites/all/content/graphics/ministry-click-me-button.jpg" alt="">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
If you are able to change the source html, you should can easily place an image tag.
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="wherever-you-have-your-image.png">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
Regards,
F.
You can place and image tag into an a tag. Like this:
<a class="sh_lead_button" href="http://www.google.es" target="_blank">
<img src="https://www.gravatar.com/avatar/7c4c20b9134504e04754d751aa7f90c1?s=48&d=identicon&r=PG&f=1" >
</a>
There's no mention on the original question about an embedded script.

Javascript doesn't work for an image slider (help)?

I'm quite new to this all, and I just need to have an image slider/transition full width for the top of my page..
only problem is; I've never used or did anything with javascript code writing.
I've been looking for about 5 hours now and tried every thing possible but I just can't make anything work.
Most of the time it's just images stacking up under each other or next to each other.
I'm using dreamweaver CC because I have a deadline for the website on thursday and it's easier.
As you may have read I'm completely useless when it comes to javascript..
Also, I'm quite confused about jquery.. (Yes, I've looked everywhere but I can't understand anything of it, no mather what I do.. it doesn't work)
Please help?
<html>
<head>
<title>Slider</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function()
{
setInterval(function()
{
var activeimg = $('#slider').find('img:visible:first');
(activeimg.next('img:hidden').parent().attr("id") == 'slider') ?
activeimg.next('img:hidden').toggle("slow") :
$('#slider').find('img:hidden:first').show("slow");
activeimg.toggle("slow");
}, 3000);
});
</script>
</head>
<body>
<div id="slider">
<img src="img/1.png">
<img src="img/2.png" style="display:none;">
<img src="img/3.png" style="display:none;">
</div>
</body>
</html>

Simple Alternative to document.write

I'm teaching myself JavaScript and I'm a little bit stuck. Here's what I'm trying to do: I have an image, and once that image is clicked it disappears and is replaced by two other images. My code works, but it replaces everything on the page instead of just swapping out the images. I think that I have to use innerHTML somehow, but when I tried that, none of the images showed up. My code is below-I'd greatly appreciate any insights or explanations-thank you!
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.write(puppy);
}
var dog = '<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>';
var puppy = '<div id="puppy"><img src="images/puppy.jpg"><img src="images/puppy2.jpg"></div>';
document.write(dog);
</script>
</body>
Write out the dog div as normal html and then replace it's contents:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.getElementById("dog").innerHTML = puppy;
}
var puppy = '<img src="images/puppy.jpg"><img src="images/puppy2.jpg">';
</script>
<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>
</body>
Look into document.createElement() or the whole jQuery library.
for an image swap you can just get the image (give the image you create an Id first) and then say:
document.getElementById("PetImg").src("images/puppy2.jpg");
To follow with what you're doing you could also take change puppy to do something like:
document.getElementById("dog").appendChild(puppy);
Inner HTML works like this:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
var div = document.getElementById('images');
div.innerHTML = '<img src="images/dog.jpg" onclick="showImage();">'
}
</script>
<div id='images'>
<img src="images/puppy.jpg">
<img src="images/puppy2.jpg">
</div>
</body>
Although there may be better ways of switching the images, if your learning Javascript stay away from jQuery as the other comments may have said its a good idea to learn these fundamentals first.
You could use jQuery... This will replace dog.jpg with puppy.jpg when the link is clicked.
<script type="text/javascript">
function showImage(){
$('#dog').attr('src', 'images/puppy.jpg');
}
</script>
<img id="dog" src="images/dog.jpg" />
You may consider picking up a Javascript framework, jQuery is popular and makes this task relatively easy. Instead of replacing all of the HTML, you can update the src attribute on the image. Something like:
$('#some_div img').attr('src', 'images/some_image.jpg');
Alternatively you can replace the html as well:
$('#some_div').html('<img src="images/some_image.jpg" />');

hide .img javascript onload

Why this code does not work correct? I searching .img attribute but style is not changing and always picture is visible.
HTML
<script type="text/javascript">
function displayDate()
{
$('img[alt=image2]').css("display","none");
$('img[alt=image3]').css("display","none");
$('img[alt=image4]').css("display","none");
$('img[alt=image2]').css("visibility","visible");
$('img[alt=image3]').css("visibility","visible");
$('img[alt=image4]').css("visibility","visible");
}
</script>
HTML
<body OnLoad="displayDate()">
<img src="im.jpg" alt="image2"/>
<img src="im.jpg" alt="image3"/>
<img src="im.jpg" alt="image4"/>
</body>
you can see error in chrome
I think your problem is that you don't have the jQuery library included while you are using jQuery syntax. So try to include the jQuery library by adding this to the <head> of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
The jQuery way to execute something on load is like this:
$(function() {
// this code will execute on load
});
The jQuery way to hide an element is like this:
$('img[alt="image2"]').hide();
To hide the images that have an alt containing the word 'image' you can do this (other selector options can be found here):
$(function() {
$('img[alt*="image"]').hide();
});
Instead of using the alt attribute, an other option is to assign a class to the images, so you can select the images depending on their class:
$(function() {
$('.myImageClassName').hide();
});
<img class="myImageClassName" />
or to wrap them in a div with a unique id:
$(function() {
$('#myImageContainer img').hide();
});
<div id="myImageContainer">
<img />
<img />
<img />
</div>
Just try having an id for each img tag and try using this jquery hide() function...
$('#your_img_id').hide();
might work...

Categories

Resources