» Click here to go to the entry/page
Hide Sidenotes
Is it possible for one image to contain several links, all of which are dependent on which part of the image was clicked?
Yes, it is possible.
This process or technique is what they call imagemapping.
Examples are the SUBSCRIBE portion found in my sidebar; the RESOURCES, CONTACT, and TAG box located at my footer.
Here is the HTML code of the above image:
Based on Extropia's Introduction to Web Design,
a name or id to associate an image map with an image
area shape="area shape"
a. rect - a rectangle or four sided figure
example: <area shape="rect">
b. poly - a polygon or multi sided figure
example: <area shape="poly">
c. circle - a circle
example: <area shape="circle">
coords="area coordinates"
a. for rectangle - coordinates needed are top left and bottom right corners
example: <area shape="rect" coords="37,32,226,130">
b. for polygon - coordinates are mapped individually
example: <area shape="poly" coords="10,0,14,3,7,10">
c. for circle - coordinates needed are center and radius
example: <area shape="circle" coords="20,10,5">
alt="alternate text"
title="area title"
href="area hyperlink" or nohref="nohref"
Popular HTML Editors like Adobe Dreamweaver and Microsoft FrontPage have this as built in functions.
Online Image Map Editors
Below are two of my favorite online image map editors.
(1) Image Mapper from ISDN*tek
- creates rectangular hotspots
(2) Open Bracket LLC's Online Image Map Editor
- creates polygonal hotspots
For more online Image Map tools, please see:
Maschek.hu's Online Image Map Editor
Online Image Map Tool
To understand more about Image Maps, check out these links:
Creating Image Maps
HTML Map Tag
How to Build Image Maps Without an Image Map Editor
Resources:
http://en.wikipedia.org/wiki/Image_map
http://www.metacentric.net/FAQ?glossary=HTML%20attribute
http://www.techweb.com/encyclopedia/defineterm.jhtml?term=html+tag
http://www.elated.com/articles/creating-image-maps/
http://www.w3schools.com/TAGS/tag_map.asp
http://www.echoecho.com/htmllinks07.htm
http://webdesign.about.com/od/imagemaps/a/aabg051899a.htm
http://kb.iu.edu/data/abyt.html
http://www.extropia.com/tutorials/web_design/defining_image_maps.html
http://www.webopedia.com/TERM/C/CGI.html
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
Is it possible for one image to contain several links, all of which are dependent on which part of the image was clicked?
Yes, it is possible.
This process or technique is what they call imagemapping.
In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). Wikipedia
Examples are the SUBSCRIBE portion found in my sidebar; the RESOURCES, CONTACT, and TAG box located at my footer.
click image for a closer look.
hover the mouse on the image to see the links
Understanding the Code
Here is the HTML code of the above image:
<img src="http://www.geocities.com/techniquealtechie/imagemap.jpg" width="265" height="293" border="0" usemap="#imap_33" >
<map id="imap_33" name="imap_33" >
<area shape="rect" coords="37,32,226,130" alt="Create customized 'for dummies book cover'" title="Create customized 'for dummies book cover'" href="http://www.pageplugins.com/generators/fordummies/">
<area shape="rect" coords="158,137,229,183" alt="Check out my site: The Technical Thought Of You" title="Check out my site: The Technical Thought Of You" href="http://technicaldotcom.blogspot.com">
<area shape="rect" coords="34,226,141,244" alt="About The Author" title="About The Author" href="http://technicaldotcom.blogspot.com/2007/12/about.html#author">
<area shape="rect" coords="0,262,265,294" alt="Create your own barcode" title="Create your own barcode" href="http://www.signgenerator.org/barcode/">
</map>
Based on Extropia's Introduction to Web Design,
Client-side image maps introduce:
a. <MAP> and <AREA> tags
b. USEMAP attribute for the IMG tag
Usemap Attribute
an attribute in an img tag;a name or id to associate an image map with an image
<img src="http://www.geocities.com/techniquealtechie/imagemap.jpg" width="265" height="293" border="0" usemap="#imap_33" >
Map Tag
the map definition where:area shape="area shape"
a. rect - a rectangle or four sided figure
example: <area shape="rect">
b. poly - a polygon or multi sided figure
example: <area shape="poly">
c. circle - a circle
example: <area shape="circle">
coords="area coordinates"
a. for rectangle - coordinates needed are top left and bottom right corners
example: <area shape="rect" coords="37,32,226,130">
b. for polygon - coordinates are mapped individually
example: <area shape="poly" coords="10,0,14,3,7,10">
c. for circle - coordinates needed are center and radius
example: <area shape="circle" coords="20,10,5">
alt="alternate text"
title="area title"
href="area hyperlink" or nohref="nohref"
<map id="imap_33" name="imap_33" >
<area shape="rect" coords="37,32,226,130" alt="Create customized 'for dummies book cover'" title="Create customized 'for dummies book cover'" href="http://www.pageplugins.com/generators/fordummies/">
</map>
Popular HTML Editors like Adobe Dreamweaver and Microsoft FrontPage have this as built in functions.
Online Image Map Editors
Below are two of my favorite online image map editors.
(1) Image Mapper from ISDN*tek
- creates rectangular hotspots
(2) Open Bracket LLC's Online Image Map Editor
- creates polygonal hotspots
For more online Image Map tools, please see:
Maschek.hu's Online Image Map Editor
Online Image Map Tool
To understand more about Image Maps, check out these links:
Creating Image Maps
HTML Map Tag
How to Build Image Maps Without an Image Map Editor
Resources:
http://en.wikipedia.org/wiki/Image_map
http://www.metacentric.net/FAQ?glossary=HTML%20attribute
http://www.techweb.com/encyclopedia/defineterm.jhtml?term=html+tag
http://www.elated.com/articles/creating-image-maps/
http://www.w3schools.com/TAGS/tag_map.asp
http://www.echoecho.com/htmllinks07.htm
http://webdesign.about.com/od/imagemaps/a/aabg051899a.htm
http://kb.iu.edu/data/abyt.html
http://www.extropia.com/tutorials/web_design/defining_image_maps.html
http://www.webopedia.com/TERM/C/CGI.html
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
» Click here to go to the entry/page
Are you fed up with opening multiple browsers to check your email accounts all at the same tine? Are you tired of logging on and off just to switch back and forth from one Google Mail account to another? You can avoid these hassles with a few clicks of your mouse!
Thanks for Gmail Notifier, you can now manage your mails easier and faster!
Gmail Notifier is a Mozilla firefox add-on created by Doron Rosenberg. Just install the extension, adjust the preferences and you can have your "gmail-check galore" in no time.
Here's how:
1. Go to Gmail Notifier Firefox Add-On page.
2. Click "Add to Firefox" to install.
3. Once installed, restart Firefox.
4. On the browser's status bar, click the Notifier icon to go the PREFERENCES option. Change the settings according to your preference.
5. Check "Enable multiple accounts" and click the Accounts button.
6. Add all necessary information of your gmail accounts.
7. To toggle in between accounts, just right click the Gmail notifier icon and go to the desired email account.
Enjoy!
Resources:
https://addons.mozilla.org/en-US/firefox/addon/173
http://www.google.com/intl/en/press/images/logos/gmail.jpg
Thanks for Gmail Notifier, you can now manage your mails easier and faster!
Gmail Notifier is a Mozilla firefox add-on created by Doron Rosenberg. Just install the extension, adjust the preferences and you can have your "gmail-check galore" in no time.
Here's how:
1. Go to Gmail Notifier Firefox Add-On page.
2. Click "Add to Firefox" to install.
3. Once installed, restart Firefox.
4. On the browser's status bar, click the Notifier icon to go the PREFERENCES option. Change the settings according to your preference.
click image for a closer view.
5. Check "Enable multiple accounts" and click the Accounts button.
click image for a closer view.
6. Add all necessary information of your gmail accounts.
click image for a closer view.
7. To toggle in between accounts, just right click the Gmail notifier icon and go to the desired email account.
Enjoy!
Resources:
https://addons.mozilla.org/en-US/firefox/addon/173
http://www.google.com/intl/en/press/images/logos/gmail.jpg
» Click here to go to the entry/page
Ever faced a dilemna when the URL you'd been wanting to visit seemed so hard to remember because it was so long and the name was quite complicated? Or have you experienced a time when the link you've had received from email was broken down in lines which left you no choice but to copy it line after line, paste them and manually delete the spaces in between?
This is where URL Shortener comes in.
From:
http://lh5.ggpht.com/techniqueal
techie/SLXAPfrOa_I/AAAAAAAA
AFc/Awn55NnHJvM/linkvendor.
jpg?imgmax=320
(100 characters)
to:
http://is.gd/202k
(17 characters)
OR
From:
http://technicaldotcom.blogspot.
com/2008/08/how-to-open-
multiple-gmail-accounts.html
(84 characters)
to:
http://tinyurl.com/multiplegmail
(32 characters)
Below are some of the top URL Shorteners around the web.
(1) Tiny URL
URL: http://tinyurl.com/
Google PR: 7
Features:
wont break in email postings; never expires; allows custom alias where one can put in keywords as part of URL; contains preview pages where the original (longer) link is shown; has bookmarklet capability
click image for a closer view.
(2) is.gd
URL: http://is.gd/
Google PR: 6
Features:
gives shortest URLs; contains preview pages where the original (longer) link is shown; has bookmarklet capability; has firefox plugin for easy URL shortening via additional menu items; can have additional keywords added on the shortened URL
click image for a closer view.
(3) Drawf URL
URL: http://www.dwarfurl.com/
Google PR: 5
Features:
never expires; contains preview pages where the original (longer) link is shown; has password capability so stats (number of clicks and referring URLs) of the drawfURL can be tracked/viewed; allows the link to be viewed privately or publicly
click image for a closer view.
To check for other URL Shorteners, check out:
Friedbeef’s Tech Top 5 URL Shorteners and How They Help You
Top 9 Free URL Shorteners, like Friends with Benefits
To learn more about the SEO side of it, visit:
How URL Length Affects Search Engine Placement
Does URL Length Affect Ranking?
Importance of Image URL Length in Google - SEO Chat
Choose URIs wisely - Quality Web Tips
Resources:
http://www.friedbeef.com/2007/05/03/top-5-url-shorteners-and-how-they-help-you/
http://www.associatedcontent.com/article/245845/top_9_free_url_shorteners_like_friends.html?cat=15
http://www.searchenginechannel.com/2005/12/how-url-length-affects-search-engine-placement
http://www.ezau.com/latest/articles/0155.shtml
http://forums.seochat.com/google-optimization-7/importance-of-image-url-length-in-google-209750.html
http://www.w3.org/QA/Tips/uri-choose
http://searchcio-midmarket.techtarget.com/sDefinition/0,,sid183_gci995868,00.html
http://forums.seochat.com/search-engine-optimization-28/max-characters-on-url-143458.html
This is where URL Shortener comes in.
From:
http://lh5.ggpht.com/techniqueal
techie/SLXAPfrOa_I/AAAAAAAA
AFc/Awn55NnHJvM/linkvendor.
jpg?imgmax=320
(100 characters)
to:
http://is.gd/202k
(17 characters)
OR
From:
http://technicaldotcom.blogspot.
com/2008/08/how-to-open-
multiple-gmail-accounts.html
(84 characters)
to:
http://tinyurl.com/multiplegmail
(32 characters)
Below are some of the top URL Shorteners around the web.
(1) Tiny URL
URL: http://tinyurl.com/
Google PR: 7
Features:
wont break in email postings; never expires; allows custom alias where one can put in keywords as part of URL; contains preview pages where the original (longer) link is shown; has bookmarklet capability
click image for a closer view.
(2) is.gd
URL: http://is.gd/
Google PR: 6
Features:
gives shortest URLs; contains preview pages where the original (longer) link is shown; has bookmarklet capability; has firefox plugin for easy URL shortening via additional menu items; can have additional keywords added on the shortened URL
click image for a closer view.
(3) Drawf URL
URL: http://www.dwarfurl.com/
Google PR: 5
Features:
never expires; contains preview pages where the original (longer) link is shown; has password capability so stats (number of clicks and referring URLs) of the drawfURL can be tracked/viewed; allows the link to be viewed privately or publicly
click image for a closer view.
To check for other URL Shorteners, check out:
Friedbeef’s Tech Top 5 URL Shorteners and How They Help You
Top 9 Free URL Shorteners, like Friends with Benefits
To learn more about the SEO side of it, visit:
How URL Length Affects Search Engine Placement
Does URL Length Affect Ranking?
Importance of Image URL Length in Google - SEO Chat
Choose URIs wisely - Quality Web Tips
Resources:
http://www.friedbeef.com/2007/05/03/top-5-url-shorteners-and-how-they-help-you/
http://www.associatedcontent.com/article/245845/top_9_free_url_shorteners_like_friends.html?cat=15
http://www.searchenginechannel.com/2005/12/how-url-length-affects-search-engine-placement
http://www.ezau.com/latest/articles/0155.shtml
http://forums.seochat.com/google-optimization-7/importance-of-image-url-length-in-google-209750.html
http://www.w3.org/QA/Tips/uri-choose
http://searchcio-midmarket.techtarget.com/sDefinition/0,,sid183_gci995868,00.html
http://forums.seochat.com/search-engine-optimization-28/max-characters-on-url-143458.html
