digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

See the original image at lifehacker.com

Highlight an Image in HTML Code

lifehacker.com — Entice and excite your friends with a strangely addictive trick that utilizes some interesting CSS techniques to allow you to see a highlighted image within text. Choose your desired phrase (a paragraph works too) and input the URL of any image in the text boxes. Then press generate.

Bury
show profanity settings
expand all
  • MookiBlaylock, on 02/17/2008, -9/+45confused...
    • Wakuko, on 02/18/2008, -3/+2good for captchas and for hidden email address
    • EndersGame, on 02/18/2008, -1/+10Sure they didn't exactly give a great description or a working demo but think harder diggers. Look at the picture very closely and try to figure out whats going on there. That picture is actually selected text. You know how it usually shows up black with white text when you select a paragraph? Well they used a CSS trick to make the background and the text one color and each letter you select forms a different color to make it all a part of one image.
      • Barbosa, on 02/18/2008, -0/+3now that I understand how it doesn't seem so cool anymore : (
        if it works that way the image will never look too good.
        • counterplex, on 02/18/2008, -0/+8au contraire, it's a very interesting hack and is intrinsically cool. I knew immediately what it was doing but I was fascinated by this kind of out-of-the-box thinking on the part of the developer.
  • queenmoweeny, on 02/17/2008, -1/+19and you would like to do that because...? There is already so much input in my brain.. I don't think I could deal with more!
    • Pritchard, on 02/18/2008, -6/+18HI LOOK AT ME I AM ZAIBATSU I LYK SUBMITTING BLOGSPAM THAT LINKS 2 STORY ALREADY ***** SUBMITTED TO THE SITE CUZ I R TEH TOP DIGGAR!!!!!!
    • error792, on 02/18/2008, -0/+2One way would be to stop people from copying your content (if you're that kind of person). What's more effective, an easily overridden JavaScript right-menu disable, or Goatse appearing every time you select anything?

      :D
      • NorCal91642, on 02/25/2008, -0/+0There are counters to both of those.
  • allaboutdatiki, on 02/17/2008, -3/+37pointless, but amusing!
    • Pritchard, on 02/18/2008, -4/+8For zaibatsu, who's probably going to masturbate to how many digs he can get by submitting blogspam which links to something already submitted. Btw, it had been submitted by the author, and we all loved him for it :D
  • bonkeykong, on 02/17/2008, -5/+58Still no cure for cancer
    • TheSabre, on 02/17/2008, -6/+8Because people that code little effects should be spending their time researching disease instead?
    • tgc1, on 02/17/2008, -11/+0There probably is one. But they won't let us have it. As they say, there is no money in the cure. But there's lots in the treatment.
  • jls33fsls, on 02/17/2008, -2/+19That is actually sort of cool. Pointless, but cool.
  • rhustang, on 02/17/2008, -2/+82Man, what a great way to host a low bandwidth porn site.
    • AdonisEffect, on 02/18/2008, -0/+5I bet the most popular image used will be goatse
    • tempusrob, on 02/18/2008, -1/+5Not really. It works out to be at least 11x larger than an an *uncompressed* bitmap. A raw bitmap is 3 bytes per pixel. The Text/CSS3 method requires that each letter have a span wrapped around it, so that's at least 32 bytes per pixel, plus the size of the CSS.
      • Jektal, on 02/18/2008, -0/+1To be fair, the resolution drops considerably, each character represents a fair number of pixels. By your math as long as each character is greater than 11 pixels (say 3px by 4px = 1 character), you might be okay with this (the CSS being cached and reused for multiple images to spread its cost thinly)
  • tringtring, on 02/17/2008, -4/+4Sounds cool...am going to try it soon
    • kajoob, on 02/18/2008, -0/+2We're all anxiously awaiting to see how it went.
  • Encablossa, on 02/17/2008, -22/+1The same trick can be done on this website
    www.picklesurprise.com
    • Encablossa, on 02/17/2008, -1/+4Was the web name too obvious? Damn
    • Attacus, on 02/18/2008, -0/+1What the *****. Thats not funny even if you try.
  • Uranium118, on 02/17/2008, -1/+8I don't want to know what kind of friends you have if they are excited by that.
  • kris33, on 02/17/2008, -2/+47What a great dupe.
    • silentcollision, on 02/17/2008, -1/+9Yeah, am I going crazy or was this on the front page like two weeks ago?
    • kutateli, on 02/18/2008, -0/+9And the one that was on the front page before was posted by the actual creator of the site. Not some dumb ass blog trying to get ad revenue from a 3 sentence article.
    • Pritchard, on 02/18/2008, -10/+6HI LOOK AT ME I AM ZAIBATSU I LYK SUBMITTING BLOGSPAM THAT LINKS 2 STORY ALREADY ***** SUBMITTED TO THE SITE CUZ I R TEH TOP DIGGAR!!!!!!
  • bpacana, on 02/17/2008, -9/+7Huh? Whut? Where? I would appreciate a demonstration of this in the article somewhere. I don't want to have to click on another link to do a search for it! I'm busy, I got other articles to DIGG man!
  • Medisha, on 02/17/2008, -9/+2
    Man, what a great way to host a low bandwidth porn site.
  • stinkypyper, on 02/17/2008, -0/+32Sorry, my friends still use ***** Internet Exploder so they won't be able to see this for 10 more years.
    • rahulkolasseri, on 02/18/2008, -0/+0what kinds of friends do you have!!?!!
  • ctrlfreak13, on 02/17/2008, -0/+7Excellent proof of concept using CSS3, I'm sure there are many more useful implementations though; now we'll just have to wait at least 5 years until IE supports CSS3 and web developers can actually make use of it because of that sad and unfortunate fact that people still use IE...
    • TheG2, on 02/18/2008, -1/+4Firefox still has its problems with CSS3 as well so get off your high horse. Yes IE is a bitch to make things work in most times, but its here and its staying. As a web developer myself I get sick of the constant bitching, yes we all know it has problems, but thats part of your job, overcoming problems.
      • WorldGroove, on 02/18/2008, -1/+3IE not following W3C standards is a problem. ctrlfreak has a perfectly valid complaint that should not be silenced until Microsoft corrects it. At least we know FF will be on top of things relatively soon.
        "Overcoming problems" is definitely part of any job, but nonsense like people not following standards makes things needlessly difficult.
        • TheG2, on 02/18/2008, -0/+2You must really hate your clients then? They love making things needlessly difficult.
  • synned, on 02/17/2008, -0/+3If only I had this for valentines...heh
  • k0001, on 02/17/2008, -1/+1show me the code or it didn't happen.
    • greeniemeani, on 02/18/2008, -0/+1You can click "get code" or something similar.
  • mogebier, on 02/17/2008, -2/+5I don't get it???
  • ntacsback, on 02/17/2008, -2/+17A CSS trick? Now that's old school Digg.
  • MackPrime, on 02/17/2008, -1/+11THIS IS ONE FOR MY MYSPACE
  • blzbulb, on 02/17/2008, -2/+2Interesting, but I don't get the point. Does this have a useful purpose?
  • wawilli, on 02/18/2008, -1/+5I'm not digging the very pixelated image I get when using this.
  • gamemasterAS, on 02/18/2008, -0/+93This is a cool one.

    http://metaatem.net/highlite/?text=Is+this+working ...
    • cave, on 02/18/2008, -2/+31Well played.
    • Syric, on 02/18/2008, -2/+1I know the picture says it, but it's really not true.
    • Hollic, on 02/18/2008, -2/+1I knew it would be a rick roll, but I had to see how you did it. Nice work.
  • jeffchuck, on 02/18/2008, -4/+2Example, please?
  • confusednazgul, on 02/18/2008, -0/+2Why?
  • Kaethre, on 02/18/2008, -0/+2Okay this is neat, but there's been repeat submissions of it and it's REALLY not worth that
  • arcooke, on 02/18/2008, -1/+20This was on the front page 12 days ago and had over 1500 Diggs....
    http://digg.com/programming/CSS3_selection_used_to ...
    • MnmlMn, on 02/18/2008, -0/+7It's strange how people can just re-repeat
      • tuntcickle, on 02/18/2008, -1/+4it's strange how 500 people may not go on digg 12 days ago...
      • Pritchard, on 02/18/2008, -7/+3HI LOOK AT ME I AM ZAIBATSU I LYK SUBMITTING BLOGSPAM THAT LINKS 2 STORY ALREADY ***** SUBMITTED TO THE SITE CUZ I R TEH TOP DIGGAR!!!!!!

        ^ - re-repeated, several times
    • Pritchard, on 02/18/2008, -7/+3HI LOOK AT ME I AM ZAIBATSU I LYK SUBMITTING BLOGSPAM THAT LINKS 2 STORY ALREADY ***** SUBMITTED TO THE SITE CUZ I R TEH TOP DIGGAR!!!!!!
      • arcticblue, on 02/18/2008, -0/+2I know people are digging you down, but I'm a rebel and dugg you up. I hate that whiny bitch zaibatsu.
    • hobo05, on 02/18/2008, -0/+1it's called short-term memory...
  • praveenmarkandu, on 02/18/2008, -1/+4http://metaatem.net/highlite/?text=digg&image=http ...
  • sketec, on 02/18/2008, -4/+1Why is this on the front page???
    • paulstringer, on 02/18/2008, -0/+1Why are you commenting on this?
  • greeniemeani, on 02/18/2008, -5/+0Wow. Let's get the RGB color of every single pixel in the image with PHP (as the author seems so proud of), create a span for each pixel unique color, and then use the CSS :selection pseudo attribute for all of the colors.

    /sarcasm
    • DeadlyAlpaca, on 02/18/2008, -1/+3Wow. Let's be a huge dick and try to show off our second-nature knowledge of CSS (as you seem so proud of), and explain how this was accomplished while dismissing it as silly and unimpressive; hopefully appearing cooler in the process.

      /serious
      • greeniemeani, on 02/18/2008, -1/+0Hmm. I guess you are one of those "HTML coders".

        • DeadlyAlpaca, on 02/18/2008, -0/+3I'll take option c): Neither.

          It doesn't take a 'coder' to point out douchebaggery.

          (On an funny side note: Firefox's spell checker recommends "carpetbaggers" when you spell douchebaggery.)
  • dacjames, on 02/18/2008, -0/+0You could use the reverse mode to cover spoiler information but aside from that I see little use.
  • velichk, on 02/18/2008, -6/+1
    Man, what a great way to host a low bandwidth porn site.
  • ekravchenko, on 02/18/2008, -1/+1I'm using firefox 2.0.0.12 and it doesn't work for me...
    • Roger, on 02/18/2008, -5/+12.0.0.12? Damn.

      Are you browsing the web on a typewriter too?
      • likwidfuzion, on 02/18/2008, -0/+52.0.0.12 is the lastest stable version...
  • SRSco, on 02/18/2008, -16/+5LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT) LOL DID IT WORK!? (HIGHLIGHT THIS TO FIND OUT)
  • flarn2006, on 02/18/2008, -0/+13http://tinyurl.com/2jw57q
  • HydrogenOxide, on 02/18/2008, -1/+1http://metaatem.net/highlite/?text=lolwut&image=ht ...
  • davidwasman, on 02/18/2008, -2/+4 This is from a Digg story last week. And even that story was blog spam.

    Stop Gawker Media from spamming Digg with assinine posts and unoriginal content.

    15 of their sites (i.e.gizmodo, jalopnik, gawker, i09, valleywag, kotaku, etc...) actively spam Digg and ALL get to the front page by their own employees.
  • bonk2k, on 02/18/2008, -1/+1http://metaatem.net/highlite/?text=Now+this+is+the ...
  • mohabias, on 02/18/2008, -0/+1this is a redigg if i ever saw one
  • sjmorton, on 02/18/2008, -0/+1Buried for being useless.
  • nastri83, on 02/18/2008, -1/+1http://metaatem.net/highlite/?text=where%27smychip ...

    Where's my Chippy? Come on, I can smell ya.
  • Syric, on 02/18/2008, -0/+1Well, this way you can view images (of which you know the URL) without actually visiting the site. Not very useful, though. Not even for teh pr0n.
  • soylenet, on 02/18/2008, -5/+0http://www.cetsohbet.com http://www.soyle.net http://www.canisi.net
  • MasterThief117, on 02/18/2008, -0/+3Countdown until Goatse in 3...2...1..
  • Hollic, on 02/18/2008, -1/+1I'm surprised no one has ***** all over the emo-hair kid in the highlighted image. I'd come up with a joke, but the fact that no one has mentioned it yet makes me sad.
    • Greg, on 02/18/2008, -0/+3I'm pretty sure it's a woman with a hat...
  • banter, on 02/18/2008, -0/+1What's even more interesting is the app's usage statistics . . .
    http:// ec2-72-44-45-152.z-2.compute-1.amazonaws.com /stats /usage_200802.html
  • Bornhuetter, on 02/18/2008, -1/+1Buried for the article being badly formatted and having an unclear link to the demonstration
  • perot9296, on 02/18/2008, -0/+1Buried as a dupe. All they did was write a little script to do what hit the front page the other day.
  • >mark, on 02/18/2008, -0/+1http://metaatem.net/highlite/?text=You+will+all+Di ...
  • nirvaorg, on 02/18/2008, -0/+1are you guys programers or what? it just a few lines of pretty stupid code!
  • CrushThemTorg, on 02/21/2008, -0/+1How many times has this or something like it been posted?
  • Fetching more discussions...
    Show 51 - 53 of 53 discussions
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.