How to replace an HTML image with an alternative image? - html

I am building a web application, it is catalog for static ship information, I collect data from different sources. One of them is https://www.marinetraffic.com/, I use this source also to retrieve an image of the ship. Retrieving an image is as simple as this:
<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi=273914200>
That will load this image:
<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi=273914200">
Note mmsi part in the url this is one possible identifier a ship can have, the problem is that ships can have multiple identifiers so is there also a imo number, callSign and eni number. On https://photos.marinetraffic.com/ it is possible to search for ships on both imo or mmsi number to retrieve an image.
So this <img src="https://photos.marinetraffic.com/ais/showphoto.aspx?imo=6600553">
Returns the same image:
For this particular ship I have both identifiers in my database, but there are also ships with only one identifier. For example I have this ship with only imo number 7361518 when I want to retrieve the image I try to do this:
<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi=7361518"
But that returns a 404 error.
Currently I solved it doing this:
<img width="100%" height="100%" src={`https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi={id}`}/>
<img width="100%" height="100%" src=`https://photos.marinetraffic.com/ais/showphoto.aspx?imo={id}`}/>
So I am placing two image tags above each other passing the ship id value to the url, the id can be either imo or mmsi number, this causes on of the images not to load.
this causes in a result like this:
Note the not loaded icon at hte bottom, I am thniking of some sollutuion but cant figure out how to do it:
Check the HTTP status code and then display the image
Display an alternative image when ship does not load with mms with a fallback to imo
Remove the image not loaded icon, to make the image invisible when image has no result.
So after this whole explanation of a case study, a real wrold scenario and the image problem does anyone know an implementation to any of my sollutions or have an addiotional sollution for this problem?

Related

Dynamically produce html based on templates

I am trying to automate a workflow for automatically creating HTML newsletters based on information stored in a spreadsheet.
Currently, I am using a newsletter drag and drop tool, in which several pre-programmed blocks are available (e.g. full column block, 2 column block etc). When creating a newsletter, I drag and drop a block and fill in my content (e.g. uploading an image, inserting a url). This is all well and good, however, since I have to create the same newsletter in 10 different languages, this process is quiet time consuming and prone to human error. While all newsletters are the same in terms of layout, the images and urls differ.
To solve this issue, I would like to get rid of the drag and drop process, and instead automate the workflow in some other way.
One idea that I have already tried, but that doesn't seem like the perfect option to me, is to dynamically create the needed HTMLs in Excel. Basically, the idea is to take the existing block template structure, and put it into Excel with some formulas.
I could then copy and paste the links to the images (in a simple format, such as EN1.jpg, ES1.jpg, etc.), as well as to urls (url.com, url.es).
This is some example block:
<img alt="" align="center" width="700" style="max-width:700px;" class="resetWidth" border="0" src="IMAGE" />
My final expected result is something like this:
I define the layout in a very quick manner (e.g. writing fullcolumn, half column, fullcolumn). The corresponding code is taken from the template. I then provide the attributes (image url, link url) in the form of a list or so. The end result should then be 10 html files that I simply have to upload to the newsletter software.
I would appreciate it very much if anyone had any ideas on this.
Another option for translating the page is to do something like this https://www.w3schools.com/howto/howto_google_translate.asp
it adds a selection for languages to translate into.
As for automating the images, you could set up folders for each langauge and reuse the name of images based on where you want them so they would be placed in the correct location.
All you'll have to do it replace the images with the same file names and swap the default language on the Google Translator.
So something like this that the html will stay the same with regards to the image names
For the link variables you may be able to write some JS or another language to take advantage of the
<html lang="">
and based on which lang is set, insert a set of links to the file.

Dynamic Sprite Image Generate In memeory

I am having a webApplication which showe user records in tabular formate (200 row at a time). Problem is these rows contains multiple images and they are served based on the request URL.this results in a request being generated per image, which leads to performance decay.
Question:
Is it possible to create spriteImage for dynamic images? I'm looking for something that I can use in order to aggregate these images into a single sprite at runtime without storing it into disk.
One possibility is to generate the images as Data URIs. This would include all the image data in the response, ready to be displayed by the browser without making additional requests.
I.e. instead of a normal HTML page where you'd have
<img src="http://myserver.com/img/123.png"/> which would create a request to the server, you would include the data directly in the page as
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
If you're not satisfied even with that, the last option would be to bunch up all the images to a single huge image, load that offscreen and use CSS trickery to grab parts of the big image to be displayed.
If all else fails, get a beefier server, they're not that expensive.

What is this image stored as?

I want to extract these telephone numbers from the website, either as an image or if possible as a string.
Here is an example from the website: Link
As you can see the telephone number is an image.
However I cant seem to view the image when I open the image source:
<img src="http://www.callmyname.sg/search/display_phone_number/VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0=">
But when put into html and viewed in a browser, you can see the image fine.
It's a solution to prevent people like you from scraping their website :)
The url http://www.callmyname.sg/search/display_phone_number/VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0= leads to a script that generates the image - probably based on the argument.
VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0=
Since it ends with an equals sign, I tried to decode it as base64:
UHdTMV9nAWYEYlRmXTtTNlc3BTAEOg==
Now it looks even more like base64, so I tried another round:
PwS1_gfbTf];S6W70:
So it's clearly not plaintext (or not encoded with base64), which would be ridiculous and would let you extract the number this way. They either use some special cipher, or store the numbers in database with this as identifier.
I don't think you can steal the phone number easily, only using OCR perhaps.
When you visit the URL, you will get garbage, since they do not send proper MIME header
�PNG IHDR�,���tRNS���7X}4IDATx���_HZo�g�� E��p��l��EHTx!]�DtQ�M�.x3��.dx�*b]Dl"]�D���bQq.B����Z2$��:ȡ�wq��9�s���Cx>W�}���ٳ��ڶ����]���Ǐ�/_���ݿ���ahh���\q����������555�=���*�"�*�*�f�����}uu�e�d2���o����?00p����J%ȴds���BB�˲�`�`0RJy����n�{cc�e�H$b�ۻ����(�~�_����A4�Z��_�V|��J�w�����t:��333.��ƕ������+^����L`���֑��W��3�X�" y���$p'U"��F���y���z&�ioo��萟�*� ����\�L&Sx����p�e���ׯ_R��y�J%�~����|qq��|e�Z%:�J�{��q��nW�ՉD"�J��~�n4��������̔Ty���qF���>BwGa�z����������8��ߡc�f��B�>!�Ub�N�s���|�F�^/B���Lj��i��NfJ��͛D"����� o!t��`����fvv�eم��V���D)�����x���d2966&�n� ^,0O4��(!D��l�h46�-�~��Tً>B�"�Q�>,�P��ok#U \�BU,�P���=G SA+GIEND�B`�
but it's really just ordinary PNG image:
img http://www.callmyname.sg/search/display_phone_number/VUhkVU5scGlBV1lDWWdFelVEUUhZQWRvQlRZR013PT0=
It's a PNG image, but the server doesn't specify the right content header. It tells your browser that is't an html page in UTF-8 encoding, so you just see some garbage (including the letters PNG at the start).
The <img> tag though doesn't know how to display text so it just tries to load it as an image (and with success).
I don't see a way to extract the numbers in any other way than just reading the image. Because it contains only numbers and will have a similar format all the time, maybe you can find a simple way to parse it instead of using a full fledged OCR library.
It's actually a png-file, generated by a computer before being displayed. You can reference it fine from any other page though, and you should also be able to download it easily (right click, save as ...) Note: I tested this, make sure you save the image with the extension .png and not .html which it will default to.
<img src="http://www.callmyname.sg/search/display_phone_number/QkNOVE1RODNBV1lDWWdVM1V6ZFZNZ1JyRFQ0Rk1BPT0=">

What's the point of a 1px height image provided by Affiliate program?

I am looking into some html provided by an advertiser that we would like to link to, and it has a strange image included at the end of the html code:
<img src="http://www.<some domain>.com/image-<some numbers>-<some numbers>" width="1" height="1" border="0"/>
What is the point of this? Is this to count impressions?
Yeah, each load of the page will fetch that image too, so their log will include the time and ip address so they can count the impressions, graph the uniqueness, etc.
Additionally, those "numbers" may represent unique data like affiliate ID or may be unique to your site. So, when a browser requests the image, the server may set a tracking cookie that gets your site or the affiliate paid for any eventual purchases on the advertiser's site.
This is totally harmeless at worst and could be profitable at best.

URL Masking in .Net / HTML

I have a website in which I have many categories, many sub-categories within each one and many products within each of those. Since the URLs are very user-unfriendly (they contain a GUID!!!), I would like to use a method which I think is called URL Masking. For example instead of going to catalogue.aspx?ItemID=12343435323434243534, they would go to notpads.htm. This would display the same as going to catalogue.aspx?ItemID=12343435323434243534 would display, somehow.
I know I could do this by creating a file for each category / sub-category (individual products cannot be accessed individually as it is a wholesale site - customers cannot purchase directly from the site). This would be a lot of work as the server would have to update each relevant file whenever a category / sub-category / product visibility changes, or a description changes, a name changes... you get the idea...
I have tried using server-side includes but that doesn't like it when a .aspx file is specified in an html file.
I have also tried using an iframe set to 100% width / height and absolutely positioned left 0 and top 0. This works quite well, but I know there are reasons you should not use this method such as some search engines not coping with it well. I also notice that the title of the "parent" page (notepads.htm) is not the title set in the iframe (logically this is correct - but another issue I need to solve if I go ahead and use this method).
Can anyone suggest another way I could do this, or tell me whether I am going along the right lines by using iframes? Thanks.
Regards,
Richard
PS If this is the wrong name for what I am trying to do then please let me know what it actually is so I can rename / retag it.
Look into URL Rewrites. You can create a regular expression and map it to your true url. For example
http://mysite.com?product=banana
could map to
http://mysite.com?guid=lakjdsflkajkfj3lj3l4923892&asfd=9234983920894893
I believe you mean URL Rewriting.
IIS 7+ has a rewrite module built in that you can use for this kind of thing.
URL Rewriters solve the problem you are describing - When someone requests page A, display page B - in a general way.
But yours is not a general requirement. You seem to have a finite uuid-to-shortname mapping requirement. This is the kind of thing you could or should set up in your app, yourself, rather than inserting a new piece of machinery into your system.
Within a default .aspx page, You'd simply do a lookup on the shortname from the url in a persistent table stored somewhere, and then call Server.Transfer() to the uuid-named page associated to that shortname.
It should be easy to prototype this.