Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Using HTML to display an image in a strange way

Reply
Thread Tools

Using HTML to display an image in a strange way

 
 
Nik Coughin
Guest
Posts: n/a
 
      09-29-2004
Hi,

Please, no lectures about why this is a bad idea. It's not intended to be
used on the net at large, I did it as a programming exercise and a bit of
fun.

What I've done is write a utility that takes an image and turns it into html
without referring to an external file or using the data:uri or anything like
that.

To get a better idea of what I'm on about, have at look at the source of
this page:

http://www.nrkn.com/temp/testImage.php

The page is ~150k but I have gzip enabled so it should only be about 10k to
download.

Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
missing required attributes for starters.

Can anyone think of a better tag that I can use? It would be good to have
it as concise as possible. I considered using <hr> tags and changing them
to display: inline; but it doesn't seem to work.

--
"Come to think of it, there are already a million monkeys on a million
typewriters, and the Usenet is NOTHING like Shakespeare!" - Blair Houghton
-=-=-=-=-=-=-=-=-=-=-=-
http://www.nrkn.com/
-=-=-=-=-=-=-=-=-=-=-=-


 
Reply With Quote
 
 
 
 
Andrew Urquhart
Guest
Posts: n/a
 
      09-29-2004
*Nik Coughin* wrote in alt.html:
[snip]
> http://www.nrkn.com/temp/testImage.php

[snip]
> Can anyone think of a better tag that I can use? It would be good to have
> it as concise as possible. I considered using <hr> tags and changing them
> to display: inline; but it doesn't seem to work.


Run-length encoding in markup, v. interesting! I'd use divs personally -
semantically neutral and it really saves on alt text...

If you have javascript enabled you can see an example of arrays of
'pixel's using divs and background colours at:
http://andrewu.co.uk/tools/colourpicker/
When the page loads, submit the form with the default value shown; the
coloured divs make up the rainbow hue-bar and the light versus
saturation square below it.
--
Andrew Urquhart
- FAQ: http://www.html-faq.com/
- Archive: http://groups.google.com/groups?group=alt.html
- Contact me: http://andrewu.co.uk/contact/
 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      09-29-2004
"Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:

>Please, no lectures about why this is a bad idea. It's not intended to be
>used on the net at large, I did it as a programming exercise and a bit of
>fun.


[...]

>Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
>missing required attributes for starters.


Why are you worried about public DTD conformance if it's a bit of fun
not intended to be used on the net?

--
Spartanicus
 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      09-29-2004
Andrew Urquhart wrote:
> *Nik Coughin* wrote in alt.html:
> [snip]
>> http://www.nrkn.com/temp/testImage.php

> [snip]
>> Can anyone think of a better tag that I can use? It would be good
>> to have it as concise as possible. I considered using <hr> tags and
>> changing them to display: inline; but it doesn't seem to work.

>
> Run-length encoding in markup, v. interesting!


I used RLE because the generated files are quite big (though interestingly,
the html is around the same size as the PNG source images I was using once
gzipped!) and it makes sense to have as few elements as possible on the page
for rendering speed. The other thing I may do at some point is find the
most common color in the image, set it as the background for the whole
image, and not draw those elements (maybe by using a margin-right on the
element before it). I may also look for adjacent pixels of similar color
and make them the same color to make the RLE more efficient. I think maybe
have a "compression" value to determine how similar the pixels have to be
before they are merged.

> I'd use divs personally - semantically neutral and it really saves on alt
> text...


Can't get divs to work unfortunately

If I have...

<style type="text/css">
div
{
display: inline;
height: 1px;
width: 1px;
}
</style>

<div style="background: #f00"></div>

....then I get a 1px wide by 19px high red div. If I set font-size: 0; for
the div I get a 1px wide by 2px high.

*Sigh*.

Would be good if I could style something that isn't a container. Damn it,
<hr> would be perfect if I could get it to display 1px by 1px and inline.

This...

<style type="text/css">
hr
{
border: 0;
height: 1px;
width: 1px;
text-align: left;
display: inline;
}
</style>

<hr style="color:#f00;"><hr style="color:#f00;"><hr style="color:#f00;"><hr
style="color:#f00;">

....draws four 1px by 1px hrs, but each is on a new line despite the display:
inline, and there is vertical space between them.

The reason I want my elements inline is to avoid having to use any kind of
margins or positioning, as this will further bloat the code.

> If you have javascript enabled you can see an example of arrays of
> 'pixel's using divs and background colours at:
> http://andrewu.co.uk/tools/colourpicker/
> When the page loads, submit the form with the default value shown; the
> coloured divs make up the rainbow hue-bar and the light versus
> saturation square below it.


I like that a lot!


 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      09-29-2004
Spartanicus wrote:
> "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:
>
>> Please, no lectures about why this is a bad idea. It's not intended
>> to be used on the net at large, I did it as a programming exercise
>> and a bit of fun.

>
> [...]
>
>> Now, using <img> the way that I currently am is a gross abuse of
>> HTML. I'm missing required attributes for starters.

>
> Why are you worried about public DTD conformance if it's a bit of fun
> not intended to be used on the net?


Perfectionism. OCD. Whatever you want to call it


 
Reply With Quote
 
Andrew Urquhart
Guest
Posts: n/a
 
      09-30-2004
*Nik Coughin* wrote in alt.html:
> Andrew Urquhart wrote:
>> I'd use divs personally - semantically neutral and it really saves on
>> alt text...

> Can't get divs to work unfortunately
> If I have...
> <style type="text/css">
> div {
> display: inline;
> height: 1px;
> width: 1px;
> }
> </style>
> <div style="background: #f00"></div>
> ...then I get a 1px wide by 19px high red div. If I set font-size: 0; for
> the div I get a 1px wide by 2px high.
> *Sigh*.


Regarding the colour picker: For the lightness vs. saturation square
each 'pixel' is a div with class 'tile' and inline style
background-colour. All 'pixels' live inside a div of fixed width - it's
just wide enough to accommodate a row length. This fixed-width div
itself lives within a div with class 'colourSquare'. That's it (if that
helps).

Getting it to work was a bit of trial and error due to unexpected
effects in IE5+ and Mozilla; Opera7 was no problem at all (Win2K, other
browsers not tested)

http://andrewu.co.uk/css/colourpicker.css
[snip]
..colourSquare {
clear: both;
margin: 0 0 10px 0;
padding: 0;
line-height: 1px;
font-size: 1px;
cursor: crosshair;
}
..tile {
width: 3px;
height: 3px;
float: left;
/* Peek-a-boo? */
position: relative;
}
[snip]
--
Andrew Urquhart
- FAQ: http://www.html-faq.com/
- Archive: http://groups.google.com/groups?group=alt.html
- Contact me: http://andrewu.co.uk/contact/
 
Reply With Quote
 
Jim Higson
Guest
Posts: n/a
 
      09-30-2004
Andrew Urquhart wrote:

> *Nik Coughin* wrote in alt.html:
>> Andrew Urquhart wrote:
>>> I'd use divs personally - semantically neutral and it really saves on
>>> alt text...

>> Can't get divs to work unfortunately
>> If I have...
>> <style type="text/css">
>> div {
>> display: inline;
>> height: 1px;
>> width: 1px;
>> }
>> </style>
>> <div style="background: #f00"></div>
>> ...then I get a 1px wide by 19px high red div. If I set font-size: 0;
>> for the div I get a 1px wide by 2px high.
>> *Sigh*.

>
> Regarding the colour picker: For the lightness vs. saturation square
> each 'pixel' is a div with class 'tile' and inline style
> background-colour. All 'pixels' live inside a div of fixed width - it's
> just wide enough to accommodate a row length. This fixed-width div
> itself lives within a div with class 'colourSquare'. That's it (if that
> helps).
>
> Getting it to work was a bit of trial and error due to unexpected
> effects in IE5+ and Mozilla; Opera7 was no problem at all (Win2K, other
> browsers not tested)


Konq works fine (if a little slow) - tribute to it's standards compliance
that it works without testing.

 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      09-30-2004
Andrew Urquhart wrote:
> *Nik Coughin* wrote in alt.html:
>> Andrew Urquhart wrote:
>>> I'd use divs personally - semantically neutral and it really saves
>>> on alt text...

>> Can't get divs to work unfortunately

[snip helpful css example]

Thanks Andrew. I now have it working with divs. Unfortunately, the RLE
doesn't work in Mozilla because you can't actually apply a width to inline
elements. IE and Opera both let you get away with doing it anyway, but
Mozilla doesn't (and rightly so).

But... an img is an inline element, and yet you can apply a width to it.
What's with that?

Tricksy is it.





 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      09-30-2004
Nik Coughin wrote:

> Now, using <img> the way that I currently am is a gross abuse of HTML. I'm
> missing required attributes for starters.


Keep with <img> and add in alt="" and src="". <img> is arguably the most
semantically correct element to use.

You need to keep working on it though -- if you take the page out of
quirks mode it falls apart!

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      09-30-2004
"Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:

>doesn't work in Mozilla because you can't actually apply a width to inline
>elements. IE and Opera both let you get away with doing it anyway


Quirks mode only for Opera.

>But... an img is an inline element, and yet you can apply a width to it.


Applies to: all elements but non-replaced inline elements, table rows,
and row groups

Img is a replaced inline element.

--
Spartanicus
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
best way to store binary image data in a variable using image magick Jack Perl Misc 2 01-25-2008 10:59 AM
Clean way to send HTML e-mail with image using default mail client? Ramon Java 2 10-25-2007 02:02 AM
How to call an aspx that accepts parameters through HTTP POST and returns an image, and then display the image in my html? computer_guy ASP .Net 3 07-20-2007 04:25 AM
CHtmlView: How to read html text before display, change and give to display changed html code? Marek Kurowski C Programming 1 08-18-2004 06:41 PM
html to image or html to postcript to image Lukasz Indyk Python 4 05-17-2004 06:06 PM



Advertisments