RSS Feeds
Highlight an Image in HTML Code
Posted by Tamar Weinberg at 3:00 AM on February 17, 2008
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. Voila! You'll see a huge chunk of text. Now, highlight the text and watch it turn into the image of your choosing. The code can be downloaded to put on any web page so that you can share the love on your own site too. For other cool toys, check out developer Erik Kastner's Spell with Flickr.
Tags: fun
Comments (AU Comments · US Comments)
There are currently no AU comments for this post.
AstroRamen
Posted 4:14 AM 17/2/08
lol cool!
AstroRamen
adhanberry
Posted 5:10 AM 17/2/08
This is very cool. The quality of the image is very poor, but this is still a cool effect.
adhanberry
hongjun
Posted 5:10 AM 17/2/08
Cool! Remember to use Firefox for the effects.
hongjun
Rich Bradshaw
Posted 6:10 AM 17/2/08
Coding this must have been tricky.
Rich Bradshaw
atomicrabbit
Posted 8:19 AM 17/2/08
nice!
@adhanberry: you can't expect much when it's using each letter as a different colour.
atomicrabbit
ranbarton
Posted 9:20 AM 17/2/08
As an aside, the word you are looking for is not viola, but rather voila. A viola is a musical instrument.
ranbarton
atm0sfere
Posted 2:50 PM 17/2/08
doh! a viola concerta might play too! Auuugggghhh!
atm0sfere
atm0sfere
Posted 2:50 PM 17/2/08
Apparently, if your speakers are turned up, not only is an image generated, but a voila sonata plays as well via a CSS:MIDI special subset to XHTML, but only when viewed on the iPod touch.
atm0sfere
KillDeer
Posted 3:55 PM 17/2/08
voila volio vomit!
Ohhhhhh!
KillDeer
Tamar Weinberg
Posted 4:55 PM 17/2/08
haha, thanks for noting that. ;)
@adhanberry: Check out the page for a larger size. I used the smallest available option to fit in the blog post (40 characters). You can choose up to 120 characters for the width, and the image quality is pretty good.
Tamar Weinberg
MyEasyTV
Posted 7:04 PM 17/2/08
To get rid of the lines in between you can add a bit of css to remove the linebreaks.
Hope this works:
nameofdiv {line-break:0px; }
MyEasyTV
MyEasyTV
Posted 7:04 PM 17/2/08
just a note, you have to select the text otherwise you won't see the image. I couldn't for the life of me understand why I was only seeing my text and not the image (I thought it was just an image to ascii/html generator).
MyEasyTV
gunnard
Posted 7:04 PM 17/2/08
this was a great news article when it was new... via [metaatem.net]
just to keep you guys up to date with things that are happening.
cheers.
gunnard