jquery get img src onclick event - javascript

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");
}
});

Related

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>

Can't find nextElement / nextElementSibling in DOM. Is it because it's a img?

I am having trouble finding the next element in the DOM with some JavaScript code.
I want to change the img src but when I try to access the img element I get 'null' even though it is there.
Thanks
P
I've tried nextElement and nextElementSibling to no avail
var node1 = document.getElementById('ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0');
console.log('1 ... ' + node1.id);
var node1img = document.getElementById(node1.id).href;
console.log('3 ... ' + node1img);
console.log('3 ... ' + document.getElementById(node1.id).nextElementSibling);
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td>
<a id="ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0" href="javascript:TreeView_ToggleNode(ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinks_Data,0,ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0,' ',ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0Nodes)">
<img src="http://intranetnlb/PublishingImages/plus.gif" alt="Expand <div class='treeviewHeadingPre'></div><div class='treeviewHeading'>An Post Subsidiaries</div>" style="border-width:0;" />
</a>
</td>
</tr>
</table>
I'd hope to find the img tag
The <img> is a child of your a Element. It's not next to it:
node1.getElementsByTagName("img")[0];
Note that document.getElementById(node1.id) is redundant as node1 already contains the element.
Demo by getting the src attribute as example:
var node1 = document.getElementById('ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0');
console.log('1 ... ' + node1.id);
var node1img = node1.href;
console.log('3 ... ' + node1img);
console.log('3 ... ' + node1.getElementsByTagName("img")[0].src);
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td>
<a id="ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0" href="javascript:TreeView_ToggleNode(ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinks_Data,0,ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0,' ',ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0Nodes)">
<img src="http://intranetnlb/PublishingImages/plus.gif" alt="" style="border-width:0;" />
</a>
</td>
</tr>
</table>
Node: The alt tag of your <img> seems to be breaking your markup as it's content isn't escaped properly. Therefore I removed it from the answer.
img is not a sibling which can be accessed with nextElement or nextElementSibling but instead it is a children element of a which can be accessed with .children
So the final code would be
var node1 = document.getElementById('ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0');
console.log('1 ... ' + node1.id);
var node1img = node1.children[0]; // first child which is the img element
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td>
<a id="ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0" href="javascript:TreeView_ToggleNode(ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinks_Data,0,ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0,' ',ctl00_ctl39_g_1398ff2c_c26e_44d8_b382_346b589f7224_tvLinksn0Nodes)">
<img src="http://intranetnlb/PublishingImages/plus.gif" alt="Expand <div class='treeviewHeadingPre'></div><div class='treeviewHeading'>An Post Subsidiaries</div>" style="border-width:0;" />
</a>
</td>
</tr>
</table>
to change the src of the image you can use node1img.src = 'newUrl'!

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');

My image swap in jquery 1.9 is not working

I have this script:
jQuery(document).ready(function(){
$(".imgSwap").mouseenter(function() {
$(this).src("_off").replaceWith("_on");
}).mouseleave(function() {
$(this).src("_on").replaceWith("_off");
});
});
And this html:
<div id="nav">
<table>
<tr>
<td class="tdleft">
<img src="../../nav/prev_off.png" width="104" height="37" /></td>
<td class="tdcenter">
<img src="../../nav/crumb_on.png" width="30" height="30" alt="Pagina 1" />
<img src="../../nav/crumb_off.png" width="30" height="30" />
<img src="../../nav/crumb_off.png" width="30" height="30" /></td>
<td class="tdright">
<img class="imgSwap" src="../../nav/next_off.png" width="104" height="37" /></td>
</tr>
</table>
</div>
I can not convince my image with class imgSwap to swap on mouseenter or mouseleave.
I think the problem is in the replaceWith-part of the code.
But I don't know how to fix it, and I couldn't find a clear example (clear to me, at least) on Stack Overflow either.
Instead of
$(this).src("_off").replaceWith("_on");
use
this.src = this.src.replace("_off", "_on");
You want to do a replacement in the src string while replaceWith do DOM elements replacements.
You should also probably simplify your code using hover :
$(function(){
$(".imgSwap").hover(function() {
this.src = this.src.replace("_off", "_on");
}, function(){
this.src = this.src.replace("_on", "_off");
});
});

show/hide link in javascript

I have 4 links which place under seperate <td>, I want to show/hide the td based on a particular selection of parent object
<td nowrap align=right id="dis_mirr" style="visiblility: visible;">
<a id="first" style=font-weight:normal href=javascript:createwin();>
Mirror
</a>
</td>
<td nowrap align=right>
<a id="second" style=font-weight:normal href=javascript:breakwin();>
Break Mirror
</a>
</td>
here is code:
if(record.get('model') == 'top'){
document.getElementById('first').visibility = "hidden";
}else{
document.getElementById('first').visibility = "visible";
}
The code works but the <td> is still there it should be removed when I hide it.
You have to use the parentNode attribute, which will return the parent element, here the <td> :
if(record.get('model') == 'top'){
document.getElementById('first').parentNode.visibility = "hidden";
} else {
document.getElementById('first').parentNode.visibility = "visible";
}
Try this:
document.getElementById("first").parentNode.style.display = 'none';

Categories

Resources