Imacros. How to save several images with changing attributes? - javascript

I need to save 4 images everytime i refresh a website, the problem is, it only has 1 attribute that is different in all these images and it changes into a randomly generated string everytime i refresh the page. the HTML of these images are:
<img alt="" width="35" height="40" src="data:image/png;base64,HJFFSYYEYGUG3r236=">
<img alt="" width="35" height="40" src="data:image/png;base64,UASFsACUYASYGU6=">
<img alt="" width="35" height="40" src="data:image/png;base64,FHJASFUYYetetgts=">
<img alt="" width="35" height="40" src="data:image/png;base64,ete6tdrte6r=">
so as you can see the only the src attribute changes. How do i save all 4 of these images every time i refresh the page?

Replace the changeable part of SRC-attribute with the wildcard * and run the macro in loop mode (with the max. loop number = 4):
TAG POS={{!LOOP}} TYPE=IMG ATTR=SRC:"data:image/png;base64,*=" CONTENT=EVENT:SAVEITEM
If it doesn’t work, try the event:
... CONTENT=EVENT:SAVE_ELEMENT_SCREENSHOT

Related

How to implement lazy load for an SVG image element?

Within an svg tag, there multiple image elements, showing thumbnail images. Because of the large number of images, the page loading tooks a long time. So I want to implement an easy lazy load like David Walsh’s Simple Image Lazy Load and Fade. For img elements it works fine. But for image elements of an SVG area, the load will not be done.
Example:
<div>
<img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<div>
<svg width="10%">
<image id="myimage" height="20" width="20" xlink:href="img1.jpg"/>
</svg>
</div>
And the JS coding:
// This works fine
var img = jQuery("#myimg");
img.attr('src', img.attr('data-src'));
img.on("load", function () {
img.removeAttr('data-src');
});
// This doens't work, onload will not be processed, image will not be not shown
var image = jQuery("#myimage");
image.attr('xlink:href', image.attr('data-href'));
image.on("load", function () {
image.removeAttr('data-href');
});
The scripting will leave the page in this way:
<div>
<img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<br>
<div>
<svg width="10%">
<image id="myimage" height="20" width="20" data-href="img1.jpg" xlink:href="img1.jpg"/>
</svg>
</div>
Why is onload not working for this SVG image element?
You have several small mistakes:
<image/> is a self-closing tag,
xlink:href should be used without xlink: prefix,
it's better to set eventListener before you changing attribute.
See the snippet:
var image = jQuery("#myimage");
image.on("load", function () {
console.log('loaded');
image.removeAttr('data-href');
});
image.attr('href', image.attr('data-href'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
<image id="myimage" width="150" height="150" data-href="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg"/>
</svg>
Here is my solution to the same problem where I keep using the xlink:href attribute for the raster image to show inside the SVG, but still lazy-load on click. I'm using different lazy-load plugin (jquery.lazy.js) but it's very similar:
<svg>
<image id="lazy-img" class="lazy" width="" height="" data-source="myimage.jpg" />
</svg>
$('.someElement').on('click', function() {
var image = $('#lazy-img");
image.attr('xlink:href', 'myimage.jpg');
image.attr('href', 'myimage.jpg');
});
The idea is that the initial HTML markup is for the lazy-loading images and on click event we are swapping the markup back to work with SVG, after the image is lazy-loaded.

How to add alt attribute

I am facing a problem, I have the below blogger template which has the following HTML
I am facing an alt attribute error. So, if someone could kindly tell me how to add alt attribute in above html.
<img src="pathofyourimg" alt="No Image Available" />
The alt attribute can be applied to an image to specify an alternate text.
Ex: <img src="smiley.gif" alt="Smiley face">
You can wrap an image inside the <a and specify alt attribute for the image.
<a href="<data:post.url/>">
<image src="your image source" alt="This is my image">
</a>

Can I call multiple tracking pixels with an image pixel?

Can I call mutiple tracking pixels with an image pixel?
My main tracking pixel would be -->
<img src="http://domain.com/pixel/123" alt="" style="height:1px;width:1px;border:0 none" />
However, if I do mod_rewrite, could I also call the other pixels in the phph file?
Basically, I can place only one tracking pixel, but would need to call all the pixels from below.
<img src="http://domain.com/pixel/123" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain1.com/pixel/232" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain2.com/pixel/745" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain3.com/pixel/478" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain4.com/pixel/894" alt="" style="height:1px;width:1px;border:0 none" />
Also, for the task, I can' use server to server tracking or iframe tracking. So I would need a way to load the pixels from above in one file.
You're loading 5 different resources (tracking pixels) from 5 different domains, so you need the client to do the 5 requests: no server-side stuff will work (server will only have HTTP headers for "domain.com", and no for "domain*.com").
You may use CSS with 5 background image layers:
external, loaded through <link rel="stylesheet" type="text/css" href="..."/>
internal with <style>...</style>
inside a style attribute)
Example with style attribute:
<div style="background-image: url('http://domain.com/pixel/123'), url('http://domain1.com/pixel/232'), url('http://domain2.com/pixel/745'), url('http://domain3.com/pixel/478'), url('http://domain4.com/pixel/894');">&#xnbsp;</div>
If CSS is not enabled, tracking won't work.
You can put the style attribute on an existing element.
There is no other way apart (edit in case I've forget some):
Multiple <img.../> tags
CSS background-image: url()...;
Multiple <iframe...></iframe>
Multiple <link.../> (then "tracking pixels" become "tracking CSS/external resource")
Javascript loading (XMLHttpRequest or others ways to load resources)

Replace Image SRC On CLick

I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.
Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once
document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.
$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.

How to change title of the customly added emotes in tinymce?

Hiii
I can add a emote by just adding this :
<img src="img/smiley-frown.gif" width="18" height="18" border="0" alt="{#emotions_dlg.frown}" title="{#emotions_dlg.frown}" />
But when i hover it shows me : ($emotions_dlg.myemote} .
How can i change it to something like this myemote
Maybe you will just write text what you want instead of {$emotions_dlg.myemote}? Not pretty clear what you want.
In case you use an own plugin (called own_plugin here) you may use the plugin's language file to acces the description to add it to your emoticon
<a>...<img onMouseOver="this.alt=tinymce.EditorManager.i18n[en.own_plugin.myemote]" src="img/smiley-frown.gif" width="18" height="18" border="0" alt="{#emotions_dlg.frown}" title="{#emotions_dlg.frown}" /></a>

Categories