Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Read alt/title text on iPhone OS devices via bookmarklet iOS devices
If you’re like me, you read a lot of webc omics, and for a lot of web comics, the best joke comes only when you hover your mouse over the image, and a tooltip shows up with the last word. These are sometimes called “alt text” or “title text” jokes, since they are encoded by adding alt="text" title="text" to the img tag’s source code.

This works great on a Mac, but what about when you’re using a iPhone, iPod touch, or iPad? With no cursor, there’s no ability to hover over an image. To get around this, I’ve cobbled together a simple bookmarklet.

First install the bookmarklet by dragging the following JavaScript to your toolbar in Safari, then sync your iDevice (assuming you're syncing Safari bookmarks, of course).
javascript:for(var%20imCt=0;document.images%5BimCt%5D;imCt++)%7Bvoid(document.images%5BimCt%5D.onclick=function%20()%20%7Bif(this.title)%7Bif((window.brbanta=prompt('Image%20title%20text:%5Cn(Click%20OK%20to%20insert%20this%20text%20before%20the%20image)',this.title))&&this.parentNode)%7Bthis.parentNode.insertBefore(document.createTextNode('%20'+brbanta+'%20'),this);%7D%7Delse%20if(this.alt)%7Bif((window.brbanta=prompt('Image%20alt%20text:%5Cn(Click%20OK%20to%20insert%20this%20text%20before%20the%20image)',this.alt))&&this.parentNode)%7Bthis.parentNode.insertBefore(document.createTextNode('%20'+brbanta+'%20'),this);%7D%7D%20else%20%7Balert('There%20is%20no%20title%20or%20alt%20text%20for%20this%20image');%7D%7D);%7D
After that, all you need to do is visit the web page in question, activate the bookmarklet from your bookmarks in Safari, then click on the image whose alt text or title text you want to read. Fun!

[robg adds: I haven't tested this one.]
    •    
  • Currently 3.67 / 5
  You rated: 5 / 5 (15 votes cast)
 
[26,568 views]  

Read alt/title text on iPhone OS devices via bookmarklet | 7 comments | Create New Account
Click here to return to the 'Read alt/title text on iPhone OS devices via bookmarklet' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Read alt/title text on iPhone OS devices via bookmarklet
Authored by: mkuron on Apr 06, '10 08:15:16AM
Works nicely, even in desktop Safari. A good place to try it on is xkcd.com, where the main cartoon has such a joke alt text.

[ Reply to This | # ]
Read alt/title text on iPhone OS devices via bookmarklet
Authored by: MacTipper on Apr 06, '10 08:41:12AM

Works brilliantly! Thanks! :)



[ Reply to This | # ]
Read alt/title text on iPhone OS devices via bookmarklet
Authored by: ScottTFrazer on Apr 06, '10 11:50:34AM

You can do this right from the iPad as well, but it's a bit more convoluted.

Assuming you are reading this page right now on your iPad: Touch and hold the code box above until it gets a blue tint.

Release and you can copy the full text of the box to the clipboard.

Now bookmark this page with the "+" button. You can change the bookmark title, but not the url text during the save. Change the title to "Alt Text".

Now hit the bookmark button, select "Edit" and then tap the "Alt Text" bookmark that you saved. You can now replace the url with the copied text on the clipboard.



[ Reply to This | # ]
Read alt/title text on iPhone OS devices via bookmarklet
Authored by: jdb8167 on Apr 06, '10 12:22:03PM

Thank you, this is awesome. Now I can read all of xkcd.com on my iPhone. Not being able to see the title text was missing out on half the fun.



[ Reply to This | # ]
Read alt/title text on iPhone OS devices via bookmarklet
Authored by: chadvonnau on Apr 06, '10 12:34:22PM

Works wonderfully for images by themselves. Doesn't work with images that are also links. I bet it's a whole 'nother cat to skin to get that working, since the links would have to be overridden so that safari doesn't follow them when you click. This is very useful as is, even w/ the link issue. Thanks!



[ Reply to This | # ]
Read alt/title text on iPhone OS devices via bookmarklet
Authored by: stephenn on Apr 11, '10 04:12:36PM
Here's a version that shows the title/alt text in a window after tapping on an image. It should work with images that are also links.
javascript:for(var%20i%20in%20document.images)%7bfunction%20s()%7bif(this.title)%7balert(this.title)%7delse%20if(this.alt)%7balert(this.alt)%7delse%7balert('no%20alt%20text')%7d%7ddocument.images%5bi%5d.onclick=s%7d
and here's a version that adds the title/alt text to all images on the page without clicking.
javascript:function%20b(e,c)%7bfor(var%20i=0;i<c;i++)%7be.parentNode.insertBefore(document.createElement('br'),e.nextSibling)%7d%7dfor(var%20i%20in%20document.images)%7bvar%20e=document.images%5bi%5d;var%20t="";if(e.title)%7bt=e.title%7delse%20if(e.alt)%7bt=e.alt%7dif(t)%7bb(e,2);e.parentNode.insertBefore(document.createTextNode(t),e.nextSibling);b(e,2)%7d%7d


[ Reply to This | # ]
Read alt/title text on iPhone OS devices via bookmarklet
Authored by: stephenn on Apr 11, '10 10:16:33PM
And a version that combines the above scripts:
javascript:function%20b(e,c)%7bfor(var%20i=0;i<c;i++)%7be.parentNode.insertBefore(document.createElement('br'),e.nextSibling)%7d%7dfunction%20s()%7bvar%20t=this.title||this.alt||'No%20Text';alert(t)%7dfor(var%20i%20in%20document.images)%7bvar%20e=document.images%5bi%5d;var%20t=e.title||e.alt;if(t)%7bb(e,2);e.parentNode.insertBefore(document.createTextNode(t),e.nextSibling);b(e,2)%7de.onclick=s%7d


[ Reply to This | # ]