XHTML - Articles - Zimbio

Image Mapping and Online Image Map Editors

Fri, 30 Aug 2008 18:56:00 GMT

posted by techniquealtechie
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 over the image to see the links

Understanding the Code
Here is the HTML code of the above image:

<img src="http://techniquealtechie.googlepages.com/imagemap.jpg" width="265" 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>

Usemap Attribute

an attribute² in an img tag³;
a name or id to associate an image map with an image

<img src="http://techniquealtechie.googlepages.com/imagemap.jpg" width="265" 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

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

Footnote:
¹ XHTML - stands for Extensible Hypertext Markup Language; a markup language that has the same depth of expression as HTML, but also conforms to XML syntax.
XML - stands for Extensible Markup Language; a general-purpose specification for creating custom markup languages; allows its users to define their own elements
² attribute - brief notes attached to HTML elements that specify additional features
³ tag - a code used in HTML to define a format change or hypertext link

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://htmlescape.compender.com/2008/01/raymonds-html-escaper.html

W3C VALIDATION USING AMAYA.

Wed, 25 Sep 2008 12:32:48 GMT

posted by ABERDEENWEBDESIGN

W3C VALIDATION USING AMAYA.

W3C VALIDATION USING AMAYA can be very helpful to those starting on the path to W3C validation.
What is Amaya?
Amaya is a Web editor/Browser which started in 1996 and helps webmasters to validate their webpages while building their websites.
The new release of Amaya 10 has been available since 29th February 2008 and for those curious and determined to help website availability to all websurfers then trying the Amaya editor and browser is well worth testing.
Amaya will tell you if you make a mistake or write unacceptable W3C validated coding and give you a chance to repair it.
The Amaya project is a joint venture between W3C and Web, Adaption and Multimedia and like all W3C projects and tutorials it aims once again to attempt to clean up the Web coding for the benefit of all web users.
Full details and tutorials can be found at; http://www.w3.org/Amaya/

Less than 5% of websites pass markup validation

Thu, 24 Oct 2008 09:45:37 GMT

posted by Dolphinpromotions

Opera recently carried out a report on websites that pass W3C markup validation. The study is part of the Metadata Analysis and Mining Application Project (MAMA) and tested 3,509,170 URLs with the W3C’s markup validator.

The study found that only 4.13% of the URL set passed validation (with 4.33% of the domains having at least 1 URL that passed validation).

While this is a relatively low figure it is an increase on previous years.

In December 2001, 2,034,788 URLs were tested, 14,563 passed, equalling a pass rate of 0.71%

In June 2006, 1,002,350 URLs were tested, 25,890 passed, equalling a pass rate of 2.58%

W3C Validation is arguably not that important, as it does not have an effect on functionality of the website, nor does it affect the rankings in the Search Engine Results Pages.

However it is regarded as important to help ease of maintenance, cross platform compatibility, and access by people with disabilities along with other benefits.

Having a website that is cross browser compatible will help improve traffic and sales conversions as the bounce rate of users viewing a site that appears “broken” will likely be considerably higher than a website that is fully functioning.

Having a website that is accessible to people with disabilities will help improve the number of people able to view your site, which in turn should help increase sales. It is also worth noting that a website that does not take into account people with disabilities is theoretically breaking the law as there is a legal requirement to conform to the disabilities discrimination act. At the moment in time there have been no known cases of these causing webmaster legal issues but as the web becomes more ubiquitous providing access to the disabled will likely become more important.

HTML, XHTML & CSS For Dummies

Mon, 30 Sep 2008 12:15:00 GMT

posted by yshashikant

HTML, XHTML & CSS For Dummies

You don’t have to be a master programmer to build great Web pages! This book shows you what HTML is about and how to use XHTML to format great-looking pages. Then you’ll see how CSS helps you manipulate colors, fonts, and more. You can even add scripting languages and build interactive pages — here’s how!

Download:
http://rapidshare.com/files/145629444/HXCFD.rar

OR
http://www.xtraupload.de/?d=BF6DD6314

Masterlogo UK - css & xhtml hand coder,web 2.0 logo designing,Graphic Designing

Mon, 4 Nov 2008 12:57:27 GMT

posted by yuppmarks

Posted by mobilemen 3 hours ago (http://www.masterlogouk.com)
Category: General | Tags: masterlogouk css & xhtml hand coder web

masterlogouk.com website provides us with Freelance Web and Graphic Designing.It is Cheap,quality and very professional.They offer Web design,Logo design,web maintenance and web hosting services.Its one the best website which provides the web designing and logo designing services