Develop Reference

Javascript change image on mouse hover not working

I have an html code as shown below. So far it is able to display the intended image. I also tried to change the src attribute and works completely fine.
<article id="memory-game">
<a class="image"><img src="../../images/memory-game.png" id="memory-game" alt="" /></a>
<h3 class="major">MEMORY GAME</h3>
<p>Tkinter<br><br>A card-matching memory game implemented in Tkinter GUI;</p>
Confidential Source Code
</article>
Now I have this script tag at the bottom of my element. It is supposed to change the image of the above html code from png to gif upon mouse hover on the specified article id. Last time I used this code was about 3 months ago, and it doesn't seem to work now.
<script>
$(function() {
$("#memory-game").hover(
function() {$(this).attr("src", "../../images/memory-game.gif");},
function() {$(this).attr("src", "../../images/memory-game.png");}
);
});
</script>
I'm a javascript noob. Anybody could help me solve the png-to-gif-change-on-mouse-hover issue? Would be greatly appreciated.

You have 2 elements using the same id. The id should be unique per document. jQuery is matching the first id so setting the src attribute on the div doesn't have any impact.
Remove the id from the article as follow
<article>
<a class="image"><img src="../../images/memory-game.png" id="memory-game" alt="" /></a>
<h3 class="major">MEMORY GAME</h3>
<p>Tkinter<br><br>A card-matching memory game implemented in Tkinter GUI;</p>
Confidential Source Code
</article>

jQuery function to open 2 connected, draggable images on click

I am new to programming and it should be easy, however I can't understand how to do it. I need create 2 images on one button click, one image is main, another is like close X button. They must be connected and draggable.
This is my function: Js Fiddle link
<input type="button" id="truck" class="truckbtn" value="ADD Truck" onclick="addtruck()">
<div id="masina">
<div id="closebutton"></div>
<div id="truckshow"></div>
</div>
<Script>
$(document).ready(function() {
$(".truckbtn").click(function() {
var truckshow = $('<img height="200" width="100" src="images/Truck1.png">');
var closebutton = $('<img height="50" width="50" src="images/closeimage2.png">');
$('div').prepend(truckshow + closebutton);
truckshow.draggable();
closebutton.draggable();
});
});
</Script>

Here I have a sample code (JS Fiddle) using draggable() of Jquery UI for dragging components inside DOM.
My buttons style are from Bootstrap, you can also write custom CSS although I used a framework for saving time.
EDITS
Image is dynamically added on button click.
You can change image dynamically by changing src of <img/> tag using jquery.
let <img id="myImage"/> then you can set src by $("#myImage").attr("src","your link here");.
FIDDLE

show loading icon while loading video javascript

I am trying to load a video onclick a image in my web page. For that i used the following code.
<script type="text/javascript">
(function($) {
$('a.newID').click(function(){
$('#newID').html('<iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?autoplay=1" frameborder="0" class="slide" allowtransparency="true" style="width:512px; height:288px;" id="ifm" title=""></iframe>');
});
}(jQuery));
</script>
The html code:
<a href="#" title="" id="newID"><span class="play_icon"><img src="img/play_overON.png" alt=""></span>
<img src="images/slider1.jpg" alt="" class="slide" />
</a>
If i click the image the image will be replaced by the iframe video. What i need is to display a loading icon until the video is loading. How to do that?

Please add following css properties in your click function:
#newID {background-image:url(http://mysite/myloadingimage.gif)}
You will also need to add css property display:inline-block; to #newID, if the display is inline (default).
Replace http://mysite/myloadingimage.gif with actual loading image. Use animated gif for the nice loading effect.
Loading image needs to be centered using css background property. This may depend on size of image.

Switching from a JPG with a YouTube video

I have a 940x520px JPG on my webpage inside of a DIV and I would like to make it a link so when you click on it a YouTube video of 940x520px replaces the JPG and automatically starts playing.
What would be the best way of using Javascript to make this work?
Thanks

Use an onClick (or click if you are using jQuery) to repalce the image with the code for the embedded youtube player.

<div class="image">
<img class="img" />
</div>
<div class="youtube" style="display:none;">
<!--Youtube code here-->
</div>
<script>
$(document).ready(function () {
$(".img").click(function () {
$(".image").hide();
$(".youtube").show();
});
});
</script>

jQuery Fade In Fade Out On MouseOver Via Multiple Images In A Div

So I am designing a website, and I want to be able to have each companies logo via an Image called via XHTML 1.0 Transitional fade in upon mouseover and fade out when no longer mousing over. I have jQuery installed and what not, I just don't know the code to this for each image or one image alone. I don't know JavaScript and or jQuery.
Thank you very much for future answers (and possible explanations),
Aaron Brewer

You need a container for each image, otherwise there will be no element to trigger the mouse over when the image has faded out.
HTML
<div class="img-container">
<img src="a.jpg" alt="a" />
</div>
<div class="img-container">
<img src="b.jpg" alt="b" />
</div>
<div class="img-container">
<img src="c.jpg" alt="c" />
</div>
jQuery
$('.img-container').each(function() {
// Get a reference to the image.
var img = $(this).find('img');
// Hide by default.
img.hide();
$(this).hover(function() {
img.stop().fadeIn(500);
}, function() {
img.stop().fadeOut(500);
});
});

perhaps this little live demo will get you in the right direction as it uses both CSS3 and jquery to do the fading, so if one fails, the other can take over. http://jsfiddle.net/robx/jrnFj/2/