I want this image how to get this image.jpg as output link. like XPath?
I tried for a few days but no luck is this possible?
<div class="vjs-poster" tabindex="-1" aria-disabled="false" style="background-image: url("https://image.jpg");"></div>
First of all, you need to get the HTML element that you want to extract the background image if (you can do it using document.getElementById or by using jQuery with xpath), then, you need to extract the style related to background image
element.style.backgroundImage
After that you can manipulate the string however you want, either by splitting by "url" or with regular expression.
Related
Is there a ('newbie-simple') way to embed an image inside html, however not in the inline form as usual:
<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />
but in a form where the base64 code is placed on the end of the html file?
A possible benefit of this method would be that an image can be inserted in the page on more than one place using the same image data from the bottom of the html file.
TL;DR: With pure HTML/CSS - unfortunately no.
I need that too for Sciter Notes project to save notes (plain HTML files) with embedded images.
Ideally you should be able to do something like this:
<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
iVBORw0KGgoAAAA...
</data>
but unfortunately no such mechanism yet.
But you can implement schema explained above with script though.
If you are using HTML5, then you do not have to worry about caches. The browser will load all images and store them into an image-list, therefore the image will be loaded only once and reused at every place the key (the URL to the source image) is found.
The only thing you will have to do, if you are only using HTML, is to copy the URL of the image into every place you need to use it. This is necessary, because you cannot declare variables in HTML and hence cannot change them from another place in the document. For this purpose you would need additionally javascript for example.
Then you can go ahead with CSS to adjust the pictures to your requirements. Yu can either define classes in the header and let the img tags have these classes, or you can type the style properties inline or you can import an external CSS-file.
EDIT:
An example with javascript would be to add this code in
<body>
<img id="img" src="myIMG.jpg">
<script type="text/javascript">
function changeImage(id, src) {
document.getElementById(id).src=a;
}
</script>
</body>
Here the function changeImage is declared now. You can call this function either via onclick or inside of the script tag. You can address the correct image through its ID as first parameter (you will have to give every image its ID, don't confuse it with the image-list of your browser, here you define the ID in the img-tag) and the new source url as second parameter.
Trying to convert the below given HTML tag of a Image Button which I want to click but not getting clicked while using Xpath.
HTML Script
<img src="../../../../imagepool/transparent%21tmlservicedesk?cid=1"
id="reg_img_304316340" aralttxt="1" artxt="Show Application List"
arimgcenter="1" alt="Show Application List" title="Show Application List"
class="btnimg" style="top:0px; left:0px; width:23px; height:140px;">
Xpath Generated for the same:
//div[#class='btnimgdiv']/img[#id='reg_img_304316340']/#src
Read some of the articles that for image buttons CSS selector is much better than xpath and wanted to know how to convert the html to CSS selector.
Image BUtton which i want to click but not getting clicked while using Xpath
This is because you are using id attribute value of the element which looks like dynamically generated.
Read some of the articles that for image buttons CSS selector is much better than xpath
Yes, you are right, using cssSeector is much faster than xpath to locate an element.
wanted to know how to convert the html to CSS selector.
You need to use that attribute value which is unique and unchangeable to locate element, you can use below cssSelector :-
img.btnimg[title='Show Application List']
Reference Link :-
http://www.w3schools.com/cssref/css_selectors.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
I'm using scrapy to write a scraper that finds links with images inside them and grabs the link's href. The page I'm scraping is populated with image thumbnails, and when you click on the thumbnail it links to a full size version of the image. I'd like to grab the full size images.
The html looks somewhat like this:
<a href="example.com/full_size_image.jpg">
<img src="example.com/image_thumbnail.jpg">
</a>
And I want to grab "example.com/full_size_image.jpg".
My current method of doing so is
img_urls = scrapy.Selector(response).xpath('//a/img/..').xpath("#href").extract()
But I'd like to reduce that to a single xpath expression, as I plan to allow the user to enter their own xpath expression string.
You can check if an element has an another child element this way:
response.xpath('//a[img]/#href').extract()
Note that I'm using the response.xpath() shortcut and providing a single XPath expression.
I'm trying to retrieve an url form background-image. So far i've managed to get the style however i can't seem to only get url.
What i managed so far:
//div[#class='opponent opponent1']/div[#class='team-player']/#style
Html example:
<div class="opponent opponent1">
<div class="team-player" style="background-image: url('/uploads/test.jpeg')"></div>
<h3>Team EnVyUs</h3>
</div>
The combination of substring-before and substring-after should do the trick:
substring-before(substring-after(//div[#class='opponent opponent1']/div[#class='team-player']/#style, "background-image: url('"), "')")
I think you are done with XPATH once you have selected the intended element. If you already got the style value you can use RegEX to get the url.
attribute.value.match(new RegEx("'(.*?)'"))[0];
I made attempt and tried to find my goal But I couldn't and found solution like this that didn't benefit for me!
I have <img src="url" title="ali.com"> I want to make ali.com a link. I used
title=ALI.com but doesn't work! any way?
The title attribute accepts only plain text, you cannot have any markup there.
If you want a tooltip with a link inside (and I'd urge you not to as it is a difficult UI to use), then you'll need to build the whole thing with JavaScript and DOM.
Above answers suffices your requirement, but specific to your use case :
<img src="image url" title="ali.com"/>
You can use url as a title (google.com?d=1&e=2 this is string)
You need to run little js code to achieve final goal
put something like this html
<a class="mylink"> <img title="blahblah" scr =""></img></a>
and you can get title string by
yourtitlestring = $(".mylink img").attr("title")
and now you can set href of link
$(".mylink").setAttribute("href", yourtitlestring);