Hi.
Sorry about my ignorance but i don’t know how to initiate a general discuss on the main page. I will put here my problem, expecting that you can solve it. I have downloaded your accordion menu script on http://www.hedgerwow.com/360/mwd/accordion/demo.php and it worked fine. My problem is that i wish to put a form inside the hidden div’s with some input values, but when running the page script, it isn’t possible to write on the text forms, and cannot submit any value.
Can you help me with this?
many Thanks, sorry about the place i’ve putted my doubt.
Guilherme saraiva
Hi,
This is very very cool. I have a webpage which receives an image encoded as a base64 string via an asynchronous HttpRequest at some point after the page has been loaded. I would like to display this image.
In Firefox this is easy using the data URI. But I have not been able to do the same thing in IE. Your page is the first working IE example I have seen. But when I examine your source code I can’t see how the MHTML and VML work together. I can’t see the string that encodes the images at all. I would really like to create a dynamic version, where javascript can change the image.
Can you give some explanation? Or an example of dynamically setting the image in IE using javascript?
Antonio Parraga | 16-Aug-07 at 11:43 am | Permalink
Great work!
I have spend like 8 hours looking for an IE7 compatible method to display embedded images, and your method works for me.
It’s better than use tables or divs to paint an image (a workaround that I found in other forums).
This is the first webpage i have seen with embedded image working on IE, bt having a look upon the source code, i dont understand how ar things happening exactly.It would be a big favor if you can explain me or send me the source code of this page.
What i want to understand is what the www.yahoo.com and www.google.com strings mean. I looked at the VML W3C standard and the SRC attribute is a URL to the image that is to be displayed, why isnt this url a path to the local image or what not, what relates www.google.com to the squirrel?!
The PHP code generates a multipart response to the web browser. See: http://www.ietf.org/rfc/rfc2387.txt
This is similar to how images and other binary files are embedded in email (attachment) for example and then are referenced from within the email itself.
The PHP code tells the browser first that the response consists of more than one piece and what the “separator” between the pieces are.
Then the two images, base 64 encoded. See the Content-Location specification? Since the HTML has the location file:///X:/ , would be an image object logical URL e.g. image.png be translated to file:///X:/image.png. You can name the object anyway you like. hedgerwang used www.google.com and www.yahoo.com just for the fun of it and/or to did it as a test to make sure that you know your Internet protocols 101 hehe.
The Image Data come right after the HTML, but are not visible, if you do “view source”. IE view source only shows the first part of the multipart content. You can see all parts if you monitor the entire HTTP traffic (requires browser plug-in)
Base 64 Encoded Image Data
Content-Type: image/png
I reacted the same at first, but then figured it out. The strange name references for the image data threw me off at first too. I hope my long answer makes sense.
This is truly astounding piece of work. I’ve been working with custom web browsers for years and I’ve had to embed a small web server in my applications to display dynamic images.
Browser calls web server in the app to display images generated by the app itself.
Now I can produce more efficient browsers. Thank you very much.
BTW. How did you discover this undocumented IE feature?
It works on FF3, IE7, Opera9, Safari3.
Has anyone tried to load this demo on some mobile device? Could they please brief us with how it work?
Is it a W3C norm that browser *has* to support images also this embeded way? Thanx
Can we do it with just the javascript only, i mean rather than sending it and getting it in a response.
I have a base64 string on my html page which i receive later on run time. being an png image, the overhead of sending it over to the server is a deadlock to me.
reieRMeister | 05-Jun-07 at 11:26 pm | Permalink
hello,
this crashes IE7.
greetings
hedgerwang | 06-Jun-07 at 10:21 am | Permalink
I’ve tested this on Ie7 and it works for me.
Anyone also have trouble with it?
Thanks.
guilho | 14-Jun-07 at 6:01 pm | Permalink
Hi.
Sorry about my ignorance but i don’t know how to initiate a general discuss on the main page. I will put here my problem, expecting that you can solve it. I have downloaded your accordion menu script on http://www.hedgerwow.com/360/mwd/accordion/demo.php and it worked fine. My problem is that i wish to put a form inside the hidden div’s with some input values, but when running the page script, it isn’t possible to write on the text forms, and cannot submit any value.
Can you help me with this?
many Thanks, sorry about the place i’ve putted my doubt.
Guilherme saraiva
David | 05-Jul-07 at 7:57 am | Permalink
Hi,
This is very very cool. I have a webpage which receives an image encoded as a base64 string via an asynchronous HttpRequest at some point after the page has been loaded. I would like to display this image.
In Firefox this is easy using the data URI. But I have not been able to do the same thing in IE. Your page is the first working IE example I have seen. But when I examine your source code I can’t see how the MHTML and VML work together. I can’t see the string that encodes the images at all. I would really like to create a dynamic version, where javascript can change the image.
Can you give some explanation? Or an example of dynamically setting the image in IE using javascript?
Antonio Parraga | 16-Aug-07 at 11:43 am | Permalink
Great work!
I have spend like 8 hours looking for an IE7 compatible method to display embedded images, and your method works for me.
It’s better than use tables or divs to paint an image (a workaround that I found in other forums).
Regards
Antonio
Girish | 23-Sep-07 at 5:26 am | Permalink
Hi,
This is the first webpage i have seen with embedded image working on IE, bt having a look upon the source code, i dont understand how ar things happening exactly.It would be a big favor if you can explain me or send me the source code of this page.
Thanks in Advance,
Regards
Girish
Eric | 08-Oct-07 at 1:18 pm | Permalink
What i want to understand is what the www.yahoo.com and www.google.com strings mean. I looked at the VML W3C standard and the SRC attribute is a URL to the image that is to be displayed, why isnt this url a path to the local image or what not, what relates www.google.com to the squirrel?!
Thanks
Eric | 08-Oct-07 at 1:19 pm | Permalink
BTW, the link to the source code is at the link:
http://www.hedgerwow.com/360/dhtml/base64-image/code.txt
Carsten Cumbrowski | 19-Nov-07 at 1:10 pm | Permalink
Eric,
The PHP code generates a multipart response to the web browser. See: http://www.ietf.org/rfc/rfc2387.txt
This is similar to how images and other binary files are embedded in email (attachment) for example and then are referenced from within the email itself.
The PHP code tells the browser first that the response consists of more than one piece and what the “separator” between the pieces are.
Content-Type: multipart/related; boundary=”—-=_NextPart”
Then it sends the individual pieces.
First does it send the HTML code
——=_NextPart
Content-Location: file:///X:/
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset=”us-ascii”
HTML Code
Then the two images, base 64 encoded. See the Content-Location specification? Since the HTML has the location file:///X:/ , would be an image object logical URL e.g. image.png be translated to file:///X:/image.png. You can name the object anyway you like. hedgerwang used www.google.com and www.yahoo.com just for the fun of it and/or to did it as a test to make sure that you know your Internet protocols 101 hehe.
The Image Data come right after the HTML, but are not visible, if you do “view source”. IE view source only shows the first part of the multipart content. You can see all parts if you monitor the entire HTTP traffic (requires browser plug-in)
——=_NextPart
Content-Location: file:///X:/www.yahoo.com
Content-Transfer-Encoding: base64
Content-Type: image/png
Base 64 Encoded Image Data
——=_NextPart
Content-Location: file:///X:/www.google.com
Content-Transfer-Encoding: base64
Base 64 Encoded Image Data
Content-Type: image/png
I reacted the same at first, but then figured it out. The strange name references for the image data threw me off at first too. I hope my long answer makes sense.
Cheers!
Carsten
Angel | 16-Feb-08 at 5:48 am | Permalink
I’m very interested in this solution, but the prototype page simply doesn’t open in my IE7; I get an empty page saying “IE can’t show this web page”
Noel | 08-May-08 at 6:14 pm | Permalink
This is truly astounding piece of work. I’ve been working with custom web browsers for years and I’ve had to embed a small web server in my applications to display dynamic images.
Browser calls web server in the app to display images generated by the app itself.
Now I can produce more efficient browsers. Thank you very much.
BTW. How did you discover this undocumented IE feature?
kozochyt | 04-Dec-08 at 2:28 pm | Permalink
It works on FF3, IE7, Opera9, Safari3.
Has anyone tried to load this demo on some mobile device? Could they please brief us with how it work?
Is it a W3C norm that browser *has* to support images also this embeded way? Thanx
daxesh | 27-Jan-09 at 3:40 am | Permalink
Can we do it with just the javascript only, i mean rather than sending it and getting it in a response.
I have a base64 string on my html page which i receive later on run time. being an png image, the overhead of sending it over to the server is a deadlock to me.
Can u please suggest something
wow power leveling | 18-Feb-09 at 11:09 pm | Permalink
A burden of one’s choice is not felt
Steve O. | 31-Mar-09 at 6:18 am | Permalink
neat, but why somebody need to embed images this way?
any usecases?
kthxbye!
王承石 | 30-May-09 at 6:30 am | Permalink
你好,联系您的gtalk一直联系不上.
您做得那个例子在ie8下是不显示阴影的.
原因有两个可能base64编码有问题,或者ie8对png的base模式还不支持,我再找找别的png的base方法是否能显示吧,就能确定了.
zhuqian | 30-Jun-09 at 2:11 am | Permalink
Since 1995 we have been the leaders inwow gold hardcore leisure furniture and we see no end in sight
aoc gold | 30-Jun-09 at 4:43 pm | Permalink
This is a great article. I’m new to blogging but still learning. Thanks for the great resource.