Get attribute of clicked link with JS function - javascript

there is html structure:
<a onclick="setString()">
<img alt="no" />
</a>
I need to get attribute of a,that had been clicked,e.g. alt.
How to know with setString() js function ,
image with what alt attribute is clicked?
I assume,that somehow with this,but don't know how.

onclick="setString(this)
///Javascript Code:
function setString(element){
var value = element.children[0].alt;
}

I would change my HTML to remove the bits that aren't needed...
<img alt="no" onclick="setString(this.alt);" />
Rather than wrapping the image in an anchor tag, style it with CSS if you want...
cursor: pointer;

Related

How can i replace image ? (JS)

How can i replace image? Tag don't have id.
<img src="URL_1" />
I want replace URL_1 to URL_2
Some solution?
If you know the URL you can use
document.querySelector('img[src="URL_1"]').src = "URL_2";
If you don't know the URL and can use an id this would be it:
<img id="id" src="URL_1" />
document.getElementById("id").src = "URL_2";
Assuming that's the only image in the page you can use the Element.getElementsByTagName() to reference the element, and edit its src property:
document.getElementsByTagName('img')[0].src = 'URL_2'
The Selectors API is more appropriate as you can target the element with more details, using a CSS selector:
document.querySelectorAll('img')[0].src = 'URL_2'
If you can't add an id or a class maybe you can wrap your img tag with a div and use more specificity div .myclass img, last solution I see is if you know URL_1 you can select this img tag by the selector: img[src="URL_1"]
Give it an ID
<img id="img1" src="URL_1" />
Then
document.getElementById('img1').setAttribute('src', 'URL_2');
First of all, give an ID to your image
Html code
<img id="my_image" src="URL_1"/>
Jquery code
$("#my_image").attr("src","URL_2");
Or without using Jquery
document.getElementById("my_image").src="URL_2";

fetch value img src jquery

whats the proper way to fetch the value of img src trough the following structure. The code below is returning empty.
JS bin (click on smiley): https://jsbin.com/lelaxam/edit?html,js,output
NOTICE: When i remove the A HREF tag around the image i receive the image src, if i place the A HREF tags around IMG i dont receive the IMG SRC
HTML:
<td class="sim-row-edit" data-type="testtest" style="padding-right:10px">
<a href="http://crezzur.com" target="_blank">
<img src="https://img.smileys.nl/152/winky.png" alt="" border="0" width="42" height="42" />
</a>
</td>
JQUERY:
if (big_parent.attr("data-type") == 'testtest') {
$("#sim-edit-testtest .image").val(big_parent.children('img').attr("src"));
$("#sim-edit-testtest .url").val(big_parent.children('a').attr("href"));
You should use jQuery.data to fetch values of data- attributes, not jQuery.attr.
Once you have successfully selected your image, you can then just use .attr('src') as you have above.
You have a problem in your code though, you are trying to get the image incorrectly. Your HTML code shows:
<img id="sim-edit-testtest .image" src="https://img.smileys.nl/152/winky.png" alt="" border="0" width="42" height="42" />
So $('#sim-edit-testtest .image').find('img') is well off the mark. There should be no space between #sim-edit-testtest and .image in the selector, as it's not a child, it's one element with both the class and id, and there's no child img element, it already is the img element. Try the code below instead.
if ( big_parent.data('type') == 'testtest' ) {
$('#sim-edit-testtest.image').attr('src');
}
Truth be told, having .image in the selector is also a bit moot as IDs should already be unique within a page, so it can be simplified further to:
if ( big_parent.data('type') == 'testtest' ) {
$('#sim-edit-testtest').attr('src');
}
You have to use it like this:
$('#sim-edit-testtest img').attr('src');
This code grabs and display IMG SRC & A HREF like you can see in this example:
https://jsbin.com/lelaxam/edit?html,js,output
Only issue here is it grabs the FIRST img src if finds, how do i select the img src which i pressed on ?
$("#sim-edit-testtest .image").val($('img', 'a').attr("src"));
$("#sim-edit-testtest .url").val(big_parent.children('a').attr("href"));

on dom ready remove existing html attribute and add mine

My generated portion of page source is
<a target="_blank" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
and I need on page load to replace this a target with a rel so above link should be
<a rel="lightbox" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
I trid with after </body>
<script>
$(function() {
$('a[_blank]').removeAttr('_blank').attr("rel=","lightbox");
});
</script>
You need to use the attribute equals selector - you need to use the attribute name along with attribute value, also to remove you need to use the attribute name not value.
$('a[target="_blank"]').removeAttr('target').attr("rel","lightbox");
Your code looks for an anchor element with attribute _blank and then removes it, a anchor element like <a _blank href="/img/image001.png">
Also as #PaulDraper suggested move the script inside the body element
$(document).ready({
$('a[target=_blank]').attr('rel', 'lightbox');
})

How to populate href value from src value of an image?

I know this is super simple, but I can't work it out (I'm a designer).
I want to simply populate the href attribute value of the <a> tag, with the value of the src attribute of the <img> tag. So the image links to itself basically.
the image src will be updated through a super simple CMS and I want the link to dynamically update, instead of the user having to update the URL also.
I tried something like this, but it didn't work.
<a rel="lightbox[job1]" href="()document.getElementById("gal1_img1").src">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
You cannot inline JavaScript inside attributes the way you have currently. You can add a script to the page to do this:
<a id="link" rel="lightbox[job1]" href="#">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
<script>
document.getElementById("link").href = document.getElementById("gal1_img1").src;
</script>
try this as your <a>'s href:
href="javascript:window.location=this.getElementsByTagName('img')[0].src;"
Assuming there's only ever one image inside these <a> tags, this should work for anyone who's NOT running with javascript disabled.
try this.
var att = $('#gal1_img1').attr('src');
$("a[rel*='lightbox[job1]']").attr('href',att);

How to append HTML to images using JQuery?

I am using Galleria and I need to wrap my images that Galleria puts into a slide with a link.
I was going to use this methodology: Give the <img> a bogus title= value and then append a <a> tag around the <img>, drawing the link I need from the title= tag.
This is the code I've got so far.
$("img#gallery").this.title.appendTo("img#gallery") { });
I'm trying to get the script to loop through all of the images and append the html.
I also don't know if I should be using .appendTo or .before and .after
That approach will work. You're looking for the wrap function:
var title = $('#test').attr('title');
$('#test').wrap('<a href="'+title+'" />');
This $.each will let you iterate through a series:
<img src="" class="test" alt="test" title="http://www.google.com" />
<img src="" class="test" alt="test" title="http://www.yahoo.com" />
$.each($(".test"), function() {
var title = $(this).attr('title');
$(this).wrap('<a href="'+title+'" />');
});
You could just listen for a click on the entire thing and then figure out if an image was clicked and if so which image and then change the location object.
Use $.each to iterate through all the images you want to wrap and then use
$('img#gallery').wrap('<a href='whatever'>)
to wrap it. It will automatically close the A tag.

Categories

Resources