image editor

Apr 27 2009

Extreme IE customization – Graphical Favorites

By: Jon Gales

Although very few people will admit to being a fan of Internet Explorer,
most Mac users will come in contact with it quite frequently. Although OmniWeb
and Chimera are good
browsers, IE still has more compatibility. I recently found a way to make Explorer
a little nicer ñ graphical
favorites:

The trick makes your "must have" sites more visible
while giving them a nicer appearance.

The first step is to make the graphic. Go to the site that you want to have
the graphical link to and look for a logo. In my case I went to MacMerc (big
surprise!) and found our logo. To save this to your desktop you can either click
on it and drag it to your desktop or control-click on it and choose "Download
Image To Disk". It’s your call but control clicking might be a little
easier if you’ve never dragged an image to the desktop before.

Once you have it saved to your computer you need to resize it. Although IE will
try to automatically resize it, the result will look like trash. I used Photoshop
[screen
shot] but any basic image editor with resizing capability will work –
even iPhoto! If you
are using Photoshop and the logo is a gif (like it is in MacMerc’s case) the
mode needs to be switched to RGB [screen
shot] Once the image has been resized it needs to be cropped [screen
shot]. I saved off my image as ‘logo.gif’ and put it on my desktop.

Now open up a text editor and type
in the following code. If you are using TextEdit type Command-
shift-T before starting to type anything (switches to text mode). To save some
typing download (control-click and choose Download Link To Disk) this
file and open it in TextEdit (no preference hacking needed). Whichever way you
chose your file should be as follows [screen
shot]:

<a href="http://www.macmerc.com"><img
src="logo.gif" alt="MacMerc"></a>

The image (logo.gif)
will link to http://www.macmerc.com
and it’s title (underneath the image) will be "MacMerc". You
can obviously change these if you are doing another site. If you want to do
several sites at once feel free to keep adding code – you don’t have to
delete the first line before adding a second. Download a transparent gif of
the logo if you can. Otherwise it may look a little funny on your tool bar!
You can always make a logo transparent in Photoshop if need be but most of the
times you should be able to find one. If you can’t make out the logo at the
small size either make up a new one in Photoshop or find a new site! Not all
sites have logos that fit well in the little space.

Put the text file, and image in a
folder (you can call it anything you like). Place this folder someplace that
it won’t be moved (/Users/username/Documents is a good place). If it does get
moved your bookmark will bust! Open the text file in Internet Explorer
by dragging in into a blank browser window, dragging it to the Dock icon or
choosing open in IE. Once the file is open you should see the logo you lovingly
prepared. If not go over what you did… If you’re still having trouble email
or IM [AIM: jonknee41] me and I’ll walk you through it. If you want to add MacMerc
I have posted the graphic I used here.

Once you have the logo just
drag it to the top tool bar [screen
shot], the logo should "stick" afterwards. If you need to delete
it or just want to see the text/image control-click in the top menu bar [screen
shot] and choose the appropriate option. [screen
shot of graphics only] [screen
shot of text only]

Most people will want to add Google
(as well as MacMerc…) and I have one more trick that will save you even
MORE time. Instead of linking to http://www.google.com
use this URL:

javascript:void(q=prompt(”,”));if(q)void(location.href=’http://www.google.com/search?q=’+escape(q))

The code for the page will look like
this:

<a
href="javascript:void(q=prompt(”,”));if(q)void(location.href=’http://www.google.com/search?q=’+escape(q))">
<img src="logo.gif" alt="Google!"></a>

What it will do is pop up a box in
IE that you type your query into. Hit return and you’re taken to the results
page of Google! No need to hit the front page! You can easily customize this
javascript to work with a bunch of search sites like dictionaries, and image
search engines. It’s quite a time saver!

If you find any cool tricks that stem from this idea please send
them to me and I’ll let the rest of the world know (and also credit your name
of course). Also, if you go wild with this and want to send me a screen shot of your tool bar go ahead! I’d love to see/post what everyone has done.

MacMerc	The Joy of Tech	After Y2K	Apple	MacDesign
MacUpdate	MacSurfer	O’Grady’s Powerpage	MacMinute	MacAddict
MacFans	Unsantity	IconFactory	Google (Pop-up)	Google
MacMusic	Hollywood Stock Exchange	IMDb	Audible.com	Amazon
	The Screen Savers		TechTV

By admin • Articles, Tutorials • Comments Off • Tags: graphical link, image editor, img src, internet explorer, jon gales, logo gif, mac users, preference, quot, text mode