Develop Reference

I want to change the image source of a single cell of a table in html

<tr><!-- 8 -->
<td id = "8A"><!-- A -->
<img src="Media/empty_square_white.png" height="160px" width ="160px">
</td>
...
<script>
function changeSource(){
document.getElementById("8A").src="empty_square_brown.png";
}
</script>
<button onclick="changeSource">change</button>
This is what I have tried to do however when I press the button nothing seems to happen. I have also tried to do this without the button however that didn't seem to work either, I have defined the id using internal CSS as well. Thanks

Your id references to the surrounding td which has no attribute src. You need to set the id on the img element or reference to the child element.
Also your new value "empty_square_brown.png" is missing the path which is set in the original source "Media/" and the onclick call needs the function brackets. Here some working example. With a title attribute to show the effect.
<tr><!-- 8 -->
<td><!-- A -->
<img id="8A" src="Media/empty_square_white.png" height="160px" width ="160px" title="empty_square_white.png">
</td>
...
<script>
function changeSource(){
document.getElementById("8A").src="Media/empty_square_brown.png";
document.getElementById("8A").title="empty_square_brown.png";
}
</script>
<button onclick="changeSource()">change</button>

You may try this.
function changeImg(){
document.getElementById("image").src = "https://images.unsplash.com/photo-1581618048854-b2f6f877cef3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
}
img{
width:50px;
height:50px;
}
<table border=1>
<tr>
<td >
<img id="image" src="https://images.unsplash.com/photo-1626285094808-143d7bb02f14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" onclick="changeImg()">
</td>
<td>
<img src="#" alt="">
</td>
</tr>
</table>

jQuery loop through child elements to get attr value

I am trying to loop through an elements children to get there attr value. My HTML looks like this:
<div class="deal">
<img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
<img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
<img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />
</div>
I would like to get the title attr off all items and combine into 1 title.
here is my script:
$(".deal").each(function() {
var test = $(this).attr('title');
}
console.log(test);
Am i approaching this in the right way?

jQuery.map allows you to enumerate a set of elements and perform an action on each one. In your case you want to pull out the title and join those items together.
In this example I've simply joined them with a comma.
var all = $('.deal img').map(function(){
return $(this).attr('title');
}).get().join(',');
alert(all);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
<img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
<img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
<img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />
</div>

$.each loops over the result of the selector, which in your attempt was the container element, not its children. You want to adjust the selector to find the children img tags, build up an array of their titles and finally join the array together with commas or whatever separator you like:
var combined = [];
$(".deal img").each(function() {
combined.push($(this).attr('title'));
});
var combinedStr = combined.join(", ");
$("#title").text("Above: " + combinedStr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
<img src="http://lorempixel.com/60/40" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
<img src="http://lorempixel.com/60/40" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
<img src="http://lorempixel.com/60/40" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />
</div>
<div id="title"></div>

you are approaching the right way, but you are throwing your test var out with each pass. Also, you want to make sure your selector matches the img elements, and not the parent div.
// this is just debugging code specific to SO
var console = {
"log": function(i) {
var li = $('<li />');
li.html(JSON.stringify(i));
li.appendTo('#logger');
}
};
// this is the answer
var titles_as_array = [], titles_as_string='';
$('.deal img').each(function(el){
titles_as_array.push( this.title );
});
titles_as_string = titles_as_array.join(' ');
console.log( titles_as_array );
console.log( titles_as_string );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deal">
<img src="/images/deals/xbox-one500-gb-black.png" alt="Xbox One 500 GB Black box art/packaging" title="Xbox One 500 GB Black" height="60" width="40" class="console" />
<img src="/images/deals/xbox-one-additional-controller.png" alt="Additional Controller box art/packaging" title="Additional Controller" height="60" width="40" />
<img src="/images/deals/xbox-one-fifa-15.png" alt="FIFA 15 box art/packaging" title="FIFA 15" height="60" width="40" />
</div>
<ul id="logger"></ul>

jquery get img src onclick event

I am having trouble referring to an image on an onclick evet.
my example is that the "this" reference points to an element that has couple of images and i want to change a specific image.
<li class = "header_det">
<table width="100%" style="font-size:14px;">
<tr>
<td width="10%" align = "right" rowspan = "2">text</td>
<td width="80%"><img width="30" height="30" src="images/map_white_pin.png" ></a></td>
<td width="10%" align = "center" class = "header_pic"><img width="20" height="20" src="images/route_det/down_arrow.png" ></td>
</tr>
</table>
</li>
The js code for the onclick event is this:
$(".header_det_map").click(function() {
var img_type = $(this).attr(".header_pic img").attr("src") ;
if(img_type == "images/route_det/down_arrow.png") {
$(this).attr(".header_pic img").attr('src', "images/route_det/up_arrow.png");
} else{
$(this).attr(".header_pic img").attr('src', "images/route_det/down_arrow.png");
}
});
this code doesn't work, and i have to use the this pointer because i have other element with the same classes that i do'nt want to change.
Thanx

I think this line:
var img_type = $(this).attr(".header_pic img").attr("src") ;
should be:
var img_type = $(this).find(".header_pic img").attr("src") ;

All you jquery is wrong : .header_pic img is not an attribute but an element of .header_det_map
Plus, you're HTML is a bit messy :
You shouldn't have space between attribute name and value in your
HTML
There is closing </a> tags
You should close '<img /> tags
<li class="header_det">
<table width="100%" style="font-size:14px;">
<tr>
<td width="10%" align="right" rowspan="2">text</td>
<td width="80%">
<img width="30" height="30" src="images/map_white_pin.png" />
</td>
<td width="10%" align="center" class="header_pic">
<img width="20" height="20" src="images/route_det/down_arrow.png" />
</td>
</tr>
</table>
</li>
$(".header_det_map").click(function() {
var img = $(this).find(".header_pic img"); // use a variable to store your image element in case you have to change the container class
var img_type = img.attr("src"); // not necessary to store it, could be use as it in the if statement
if(img.attr("src") == "images/route_det/down_arrow.png") {
img.attr("src", "images/route_det/up_arrow.png");
} else {
img.attr("src", "images/route_det/down_arrow.png");
}
});

how to change the image when the hyperlink which is clicked in javascript?

This will run when the page loads
<TD width=115 >
Expand All
</TD>
<TD align=left>
<IMG id="img1" border=0 alt="" src="expand.png">12345
</TD>
By default, expand.png image will be displayed with 12345..
My question is If I click expand all link, I need to change the image "expand.png" to "collapse.png"..Is it possible in javascript?

Does it need to be pure JS?
Jquery:
$('#button').click(function(){
$('#withImage').attr('src', 'collapse.png');
});
You would have to give the TD's a class or an ID
pure JS:
document.getElementById('button').onClick(runFunction());
function runFunction(){
document.getElementById('withImage').src = 'collapse.png';
}
First line of code is telling the script that when a tag with the id "button" (
In the function you are telling the script that the tag with id "withImage" should change its attribute "src" to be 'collapse.png'.

I think this will solve your issue.
Expand All
<IMG id="img1" border=0 alt="" src="expand.png">12345
JSfiddle: http://jsfiddle.net/zJ85X/

You can use this:
<TD width=115 >
Expand All
</TD>
<TD align=left>
<IMG id="img1" border=0 alt="" src="expand.png">12345
</TD>
<script>
function expand(){
$('#img1').attr('src','collapse.png');
}
</script>

Just add below code to your function of Expand All, if its Jquery
$('#img1').attr('src', 'collapse.png');

Javascript Image Animation does not work in Firefox or Internet Explorer

I am using the following script to generate an animation of images.
It works in Chrome but not Firefox or Internet Explorer ...
Javascript
var lista = new Array('image1.gif','image1.gif','image1.gif','image1.gif');
var tiempo = 500;
var tempor = null;
var pos=0;
var i = 0;
function boucle_images(){
var nombre_total_images = 6;
document.images.centro.src = lista[i]
pos=i;
i++;
i%=nombre_total_images;
tempor=setTimeout("boucle_images()",tiempo);
}
function avanza(){
if (pos==(lista.length-1))
pos=0;
else
pos++;
document.images.centro.src = lista[pos]
}
function retroceso(){
if (pos==0)
pos=(lista.length-1);
else
pos--;
document.images.centro.src = lista[pos]
}
function automat(){
tempor = setTimeout("boucle_images()", tiempo)
}
function parar(){
clearTimeout(tempor);
}
HTML
<table width="52%" border="0" align="center">
<tr>
<td height="482" colspan="2" align="right">
<img id="centro" src="imagenes/cargando2.gif" alt="" width="640" height="480" /></td>
</tr>
<tr>
<td align="center"><div class="div_ani_sat">
<img src="imagenes/atras.png" width="48" height="48" alt="" />
<img src="imagenes/adelante.png" width="48" height="48" alt="" />
<img src="imagenes/play.png" width="48" height="48" alt="" />
<img src="imagenes/pause.png" width="48" height="48" alt="" /></div>
</td>
</tr>
</table>
Not that I can not function in other browsers ...
Can you help?
thanks

This is a working version of your same code tested in chrome + firefox
setTimeout Accepts the first argument as reference to a function. So, I just replaced your tempor=setTimeout("boucle_images()",tiempo) to tempor=setTimeout(boucle_images, tiempo). Always follow this coz it saves an eval
document.images returns a HTML Collection which you can access like an array [but it is not an array] but not like document.image.centros [atleast across browsers] Hence I fixed it to document.getElementById('centros')