html image -- Had some extra time on my hands [Archive]

View Full Version : html image -- Had some extra time on my hands

djr33

05-05-2006, 07:10 AM

http://ci-pro.com/misc/phptest/images/table.php
Enjoy.

Try saving that image ;)

And, yes, it takes forever to load.

No real point to this... just... had extra time in a class. Heh.

(more info- using php's gd functions, can use any image as the based... just using that right now.)

Note: works in IE/FF, doesn't seem to in Safari.

Twey

05-05-2006, 10:59 AM

Very clever, as an academic experiment, but it's pretty obvious why that's impractical in a real website :)

djr33

05-05-2006, 04:54 PM

Yeah... basically what I thought.

the only advantage to it is that you can't right click on it and save, so it might confuse someone as to not being able to save it... til they think to do a screencap.
But... yeah.
It IS impossible to save as an image... that's kinda cool.

And, heck, you could actually use this in a text only browsers.... but... you can assume those with them would have slower connections anyway, defeating the point.
I know you use one, Twey... does it work?
(or, perhaps tables are considered graphics anyway)

Anyway... was fun :)

Question... why doesn't it work in safari or IE 5, but does in mozilla/IE6+?
Is there some extra thing that needs to be added to the table?

Twey

05-05-2006, 05:48 PM

Try adding   inside each of the table cells.
I know you use one, Twey... does it work?No, totally blank. Although whether that's to do with the lack of data inside the cells or something else, I don't know.

djr33

05-05-2006, 05:52 PM

Does your text only browser support table cell colors, and, overall, tables as a whole?

As for nbsp, that'll screw up the spacing... it'll make it a space wide/tall instead of one pixel.

I guess I could use css to set the size of a space to 1px... but that seems a bit extreme... not sure if browsers will render it that small.

Twey

05-05-2006, 07:11 PM

Does your text only browser support table cell colors, and, overall, tables as a whole?Yes.
As for nbsp, that'll screw up the spacing... it'll make it a space wide/tall instead of one pixel.Not if you specify the size to be 1px by 1px using CSS.

djr33

05-05-2006, 10:26 PM

Cool that it supports it... not like it's a big deal... but.. heck.. images in a browser without images... fun :p

That css would also avoid needing the width=1 for each td and tr, so that would save transfer time. (I could code that into css by itself, but the nbsp; will solve two with one)

Twey

05-05-2006, 10:32 PM

Cool that it supports it... not like it's a big deal... but.. heck.. images in a browser without images... fun Yees... unfortunately, the smallest cell it can display is one character by one character, so it ends up being a bit of a pixellated image :p

djr33

05-05-2006, 10:43 PM

Haha. I bet :D

The first time I did it, I had forgotten to set cellspacing to 0, so I got a weird perforated look. Kinda cool, really.

Twey

05-05-2006, 10:46 PM

Hehe, nice :p

djr33

05-05-2006, 10:48 PM

hey, twey, what exactly would set a space to be 1x1 px? (the css you referred to)

You can set fonts to pixels, but their height specifically... (Or, I mean... how do you, as I don't know how, heh.)

Twey

05-05-2006, 11:03 PM

td {
height: 1px;
width: 1px;
}I was referring to setting the cells' height, not the font's :)

djr33

05-05-2006, 11:05 PM

Oh. Right. But the content of a cell stretches it.... a single character can't be compressed... it'll make the cell big.
Ideas?

Twey

05-05-2006, 11:09 PM

Not so... the overflow will be clipped.
Especially if you specify overflow:hidden;.

djr33

05-05-2006, 11:32 PM

But... nbsp;... acts like a real character. Wouldn't that apply more to brsp;?

But.... ok... shall try that :)

mburt

08-19-2006, 10:07 PM

Holy crap.. you did have alot of time on your hands. I tried doing that once but gave up because I got so bored :)

DimX

08-19-2006, 10:23 PM

Wow, that's nice :p but, tr shouldn't have the width set to 1px ;) (It didn't affect the "image" anyway)

Twey

08-19-2006, 10:49 PM

For anyone who hasn't already seen it: Toogle (http://www.c6.org/toogle/)

mburt

08-19-2006, 10:50 PM

Okay:

This is my html image (Frontpage 2003 Icon)

<html>
<head>
<style type="text/css">
span {
width:2px;
height:2px;
overflow:hidden
}
</style>
</head>
<body>
















 















 















 















 















 















 















 















 















 















 















 















</body>
</html>

Twey

08-19-2006, 10:59 PM

Ah.

I think the difference is that djr33 used gd to read in the image and generate the HTML dynamically. ;)

mburt

08-19-2006, 11:00 PM

Really? That sounds like a good idea for an application...

DimX

08-20-2006, 10:01 AM

djr33, you should remove the   from the cells and also remove the tr style formatting.
Then the "output" would be like this: http://roboweb.awardspace.com/table.html :p

blm126

08-20-2006, 01:12 PM

Pretty cool, but it still takes for ever to load.

Twey

08-20-2006, 02:10 PM

Being as it takes an entire line of HTML for a single pixel, I'm not surprised :)

ItsMeOnly

08-20-2006, 02:52 PM

here's mine (warning, insanely big):
http://rambo.id.uw.edu.pl/textimg/moon.html
http://rambo.id.uw.edu.pl/textimg/moon1.html
These ones are "gimpified" :)

blm126

08-20-2006, 05:17 PM

My turn (http://www.bradyontheweb.com/demo/image/avatar.html), generated with PHP(file is HTML output). The original was 9kb, and this one is 180kb. So 20x bigger.Now just need to go the other way...

mburt

08-20-2006, 06:27 PM

Yes, 180 for 9kbs. I think it's worth it if you want to protect your images. :)

mburt

08-20-2006, 06:30 PM

Wait a minute.. are you guys doing this by hand?

blm126

08-20-2006, 06:41 PM

No, lol. I'm using PHP.

ItsMeOnly

08-20-2006, 07:10 PM

No, lol. I'm using PHP.
GIMP for me...

Twey

08-20-2006, 07:25 PM

Yes, 180 for 9kbs. I think it's worth it if you want to protect your images."Screenshots" :)

Even if it weren't for that, a 20x size increase is not worth it. blm126's image is very small (filesize-wise). A decent-sized image would take a very long time to download, as shown by ItsMeOnly's moon image.

DimX

08-20-2006, 07:57 PM

Me too :p
http://roboweb.awardspace.com/test.php

Btw. optional GET attributes:
- pixelsize (1 | 2 | 3 | ...) (for zooming)
- invert (0 | 1) (invert colors)
- src (uri) (yes, url to custom image, more time to load)

mburt

08-20-2006, 08:05 PM

How are you doing that with PHP?

DimX

08-20-2006, 08:11 PM

Using GD library ;)

mburt

08-20-2006, 08:13 PM

Do wha..? :)

blm126

08-20-2006, 08:27 PM

Check the manual here (http://us2.php.net/manual/en/function.imagecolorat.php). There are several versions in the comments. My code is a modified version of one of them.

djr33

08-21-2006, 08:22 AM

Ha, glad to see you guys are enjoying this.
I've been busy.
Hm... yeah, there are a couple improvements I could make. I was just playing anyway.

I'm thinking it takes a long time to process then load. If you save the html output as html and put that in a file, then load that, it'll be a lot faster than processing the image each time. Maybe that's what you could do if you want it to go a bit faster.

blm126

08-21-2006, 12:18 PM

I'm thinking it takes a long time to process then load. If you save the html output as html and put that in a file, then load that, it'll be a lot faster than processing the image each time. Maybe that's what you could do if you want it to go a bit faster.
That's how I did my demo :)

djr33

08-21-2006, 10:27 PM

Right. That's why I thought that made sense.