Develop Reference

Getting an image to turn into a gif on hover, and revert to static after

I'm trying to get this ad to work, and I have it set up so that it will turn into a gif onMouseOver, and thats working fine, but I want it to go back to the static image onMouseOut. Here is my code
HMTL
<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="">
</a>
</div>
CSS
.RightAdvert {
float: left;
width: 8%;
}
The Advertisment class doesn't have any styles
Script
<script>
function playAnimation() {
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
</script>

Add a method on onmouseout event, onmouseout="showStatic()
<div class="RightAdvert">
<a href="https://en.wikipedia.org/wiki/Easy_Cheese" target="_blank">
<img id="animation" class="advertisment" src="squeezy-cheesy.png" width="160" height="600" alt="Squeezy Cheesy advertisment" onMouseOver="playAnimation()" onmouseout="showStatic()">
</a>
</div>
Then change the gif with static image in function showStatic() function:
<script>
function playAnimation()
{
document.getElementById('animation').src = "squeezy-cheesy2.gif";
}
function showStatic()
{
document.getElementById('animation').src = "squeezy-cheesy.png";
}
</script>

Set src attribute of img tag with javascript

I have the following elements in a html document
<div id="u11" class="ax_default image" data-label="image1">
<img id="u11_img" class="img " src="images/image1_u11.png">
</div>
<div id="u23" class="ax_default image" data-label="image2">
<img id="u23_img" class="img " src="images/image2_u23.png">
</div>
I want to write a javascript onclick function for another element that set image2 src to image1 src
The problem is that ids are random so I cannot use them but fortunately I can use the data-label to get the external div objects with $('[data-label=image1]')
¿How can I set the src in the inner img?

You can use the following
var image1 = document.querySelector('[data-label="image1"] img'),
image2 = document.querySelector('[data-label="image2"] img');
document.querySelector('#button').addEventListener('click', function(){
image2.src = image1.src;
});

here is an example using each function :
$( "#change" ).click(function() {
// get all image element in body
var selects = $('body').find('img');
// loop throw them
selects.each(function(index, el) {
if(index !== selects.length - 1) {
//save the img src to local variable
var img1 = selects[index].getAttribute('src');
var img2 = selects[index+1].getAttribute('src');
// change the imgs src
selects[index].src = img2;
selects[index+1].src = img1;
// and have a nice day ^^'
}
});
});
img{
max-width:95px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="u11" class="ax_default image" data-label="image1">
<img id="u11_img" class="img " src="https://media-cdn.tripadvisor.com/media/photo-s/0e/4c/55/8d/merzouga.jpg">
</div>
<div id="u23" class="ax_default image" data-label="image2">
<img id="u23_img" class="img " src="http://www.classetouriste.be/wp-content/uploads/2012/11/sahara-01.jpg">
</div>
<button id="change">Change images</button>
this code will work no matter how many img you have in your body or you can just set the element that contain the image var selects $('#yourelementid').find('img');

You could change the entire code with the src included.
function myFunction() {
document.getElementById("u11").innerHTML = '<img id="u23_img" class="img " src="images/image2_u23.png">';
}
}
<div id="u11" class="ax_default image" data-label="image1">
<img id="u11_img" class="img " src="images/image1_u11.png">
</div>
<div id="u23" class="ax_default image" data-label="image2">
<img id="u23_img" class="img " src="images/image2_u23.png">
</div>

How to debug click event handling in JavaScript code?

<img id="Slide" src="SlideOne.png"></img>
<img id="SImg" src="Slide Image One.png" onmouseover="this.src='Slide Image Hover One.png';" onmouseout="this.src='Slide Image One.png';" onclick="SlideManager()"></img>
<img id="SImg" src="Slide Image Two.png" onmouseover="this.src='Slide Image Hover Two.png';" onmouseout="this.src='Slide Image Two.png';" onclick="SlideManager()"></img>
<img id="SImg" src="Slide Image Three.png" onmouseover="this.src='Slide Image Hover Three.png';" onmouseout="this.src='Slide Image Three.png';" onclick="SlideManager()"></img>
</center>
<script>
function SlideManager() {
if(document.getElementById('SImg').src.match("Slide Image One.png"))
{
document.getElementById('Slide').src = "SlideOne";
}
if(document.getElementById('SImg').src.match("Slide Image Two.png"))
{
document.getElementById('Slide').src = "SlideTwo";
}
if(document.getElementById('SImg').src.match("Slide Image Two.png"))
{
document.getElementById('Slide').src = "SlideTwo";
}
}
</script>
I am using JavaScript first time. It is supposed to change images when clicked on specific button/image.
But its not working.

you probably want to do this:
<img id="Slide" src="Slide Image One.png" />
<!-- id has to be unique, cannot use same id for multiple elements -->
<img id="Img1" src="Slide Image One.png" onmouseover="changeImage('Slide Image Hover One.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover One.png')" />
<!-- also <img /> is single-tag element -->
<img id="Img2" src="Slide Image Two.png" onmouseover="changeImage('Slide Image Hover Two.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover Two.png')" />
<img id="Img3" src="Slide Image Three.png" onmouseover="changeImage('Slide Image Hover Three.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover Three.png')" />
</center>
<script>
// use variable to remember current active slide (to be used to return to by mouseout)
var currentSlide = "Slide Image One.png";
// just temporarly change
function changeImage(name) {
document.getElementById('Slide').src = name;
}
// save new image to currentSlide and change image
function setCurrentSlide(name) {
currentSlide = name;
changeImage(currentSlide);
}
</script>

I want to change the "SlideOne" image to "SlideTwo" when clicked on "Slide Image Two" button.

select image and and play an audio by clicking the button using html and javascript

<audio id="audio1" src="a.wav"></audio>
<audio id="audio2" src="b.wav"></audio>
<img id="img1" src="a.png" alt="" onselect="select()" />
<img id="img2" src="a.png" alt="" onselect="select()" />
<input type="button" onclick="play()">
i have multiple images in my code a and every image has its respective audio what i want to do is i want to select the image and on clicking the button i want to play the audio against that particular image .all this i want to do using javascript and html . so can any one help me javascript part?

You can do something like this using data attributes: http://jsfiddle.net/bostdgvp/
JS:
var selectedImage;
function select(image) {
var images = document.querySelectorAll('img');
var index = 0, length = images.length;
for (; index < length; index++) {
images[index].classList.remove('selected');
}
selectedImage = image.id;
image.classList.add('selected');
}
function playAudio() {
if (!selectedImage) {
alert('no image selected')
}
var image = document.getElementById(selectedImage);
var audioId = image.getAttribute('data-audio')
var audioElement = document.getElementById(audioId);
audioElement.play();
}
HTML:
<audio id="audio1" src="#Url.Content(item.Letter_Record)"></audio>
<audio id="audio2" src="#Url.Content(item.Letter_Record)"></audio>
<img id="img1" data-audio="audio1" src="http://placehold.it/350x150" alt="" onclick="select(this)" />
<img id="img2" data-audio="audio2" src="http://placehold.it/200x100" alt="" onclick="select(this)" />
<input type="button" value="play" onclick="playAudio()">
CSS:
.selected {
border: 1px solid red;
}

Just add this and it should work:
<img id="img1" src="a.png" alt="" onclick="select(this.id)" />
<img id="img2" src="a.png" alt="" onclick="select(this.id)" />
<script>
function select(num){
var x = num.match('/\d+/');
var audio = document.getElementById("audio"+x);
audio.play();
}
</script>

Here is a jsfiddle that should put you in the right direction:
http://jsfiddle.net/knopch/31oasnee/
<img id="img1" src="a.png" alt="" onclick="select(this.id)" />
<img id="img2" src="a.png" alt="" onclick="select(this.id)" />
<script>
function select(id){
console.log(id);
//play(id);
}
</script>
This allows you to click the image, and its id will be printed in the console (option+cmd+j on chrome+mac).
So if you have the id of the object being clicked (or selected), the select() functions really just need to pass on this id to the function that handles playback. If you have an audio file mapped to each image, you can select the audio file for playback based on the image id.

Change an image on click onto another image, but use the srcset functionality (jquery optional)

I want to change an image onclick on another image, but don't only want to change a fixed image but use the advantages of srcset, so the browser picks the right image for the current main image size (responsive layout).
This is what I am using right now, vanilla:
<div id="item-detail-img-main">
<img src="/_img/items/400/img.jpg" srcset="/_img/items/400/img.jpg 400w, /_img/items/600/img.jpg 600w" alt="" width="100%" id="item-detail-img-main-img">
</div>
<script type="text/javascript">
function chimg (img) {
window.document.images["item-detail-img-main-img"].src = img;
}
</script>
<ul id="item-detail-img-thumbs">
<li><img src="/_img/items/200/img.jpg" onclick="chimg('/_img/items/400/img.jpg')"></li>
<li><img src="/_img/items/200/img2.jpg" onclick="chimg('/_img/items/400/img2.jpg')"></li>
</ul>
I'm open to jquery here.
Anyone know how to handle this?

I think you can probably set the srcset attribute, at least by using the setAttribute() method. You could also just replace the whole image tag:
function(img,img2,img3){
document.getElementById('item-detail-img-main').innerHTML='<img src="'+img+'" srcset="'+img2+' 400w, '+img3+' 600w" alt="" width="100%" id="item-detail-img-main-img">';
}

The jQuery option looks something like this:
https://jsfiddle.net/axcnotx7/
<div>
<img id="main" width="100%" id="item-detail-img-main-img">
</div>
<ul id="thumbs">
<li><img src="https://icons.iconarchive.com/icons/fi3ur/fruitsalad/256/banana-icon.png"></li>
<li><img src="https://icons.iconarchive.com/icons/bingxueling/fruit-vegetables/256/apple-red-icon.png"></li>
</ul>
<script type="text/javascript">
var main = $('img#main');
$('#thumbs img').click(function(e) {
var imageSrc = e.currentTarget.src;
// You need to determine your own srcset paths here
var srcSet = imageSrc + ' 400w, ' + imageSrc + ' 600w';
main.attr('src', imageSrc);
main.attr('srcset', srcSet);
});
</script>