Tag: html hacks

Uncategorized

Basics on area and map tag in HTML

HTML logoThere is nothing much to write about map and area tag in HTML but when I was writing a working code using marquee, map and area tag for my friend , then I realized that having a blog which will explain step by step about all these tag would be really nice for all programmers (specially for the beginners and intermediate HTML programmer).

Problem:I need to use world map and have to show brief information about different continents when mouse is hovered on that continent. Description should be displayed below the image and when again mouse is released from that clickable area, it should show the initial content. And initial content will be within a marquee tag.

Solution:
 What is required
Basic knowledge of HTML, CSS, JavaScript.

First I will explain all basic terms and syntax then will post fully working codes.
1. To show how map tag and area tag works
2.  How to add hovering style to map

Tags that we are going to use mainly are: map tag, area tag, marquee tag.
JavaScript is needed to do some action when mouse will be hovered on and hovered out at clickable area of the image.
 

What is map tag in HTML
An image-map is an image with many clickable areas in a single image.  The map element contains a number of area elements, which defines the clickable areas in the image map.

Syntax:
<map name="name-of-the-map-tag"> </map>

Inside which there will be many area tag elements. Remember whatever name you are using here under map tag , same name with hash as prefix, you need to use under Image tag <img> too. For ex: <img src=”path of an image”  usemap=”# name-of-the-map-tag”   />

What is area tag in HTML
The <area> tag defines an area inside an image-map. The area element is always nested inside a <map> tag.

Syntax:

<map name="name-of-the-map-tag">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
</map>

Taken from w3schools.org

Area tag has few attributes.

·         Shape
It can be rectangle, circle or polygon. Ex: shape=”rect” for rectangle, shape=”poly” for polygon, shape=”circle” for circle.

·         Coords attribute is for co-ordinates.

-Image

First of all, you need a suitable graphic. You need to be a bit careful when choosing the right image. An image that cannot be divided in different sections is not your best choice, but an image that has clear cut-offs or lines would be better. Of course, this down not apply to navigational menus or similar, just to everyday pictures like animals, objects or people.

–Co-ordinates

When you've chosen or created your desired image, you then insert it into an image editor (I use Ms Paint) so that you can find its co-ordinates. Try to either write down different co-ordinates of take them one by one and then insert them into your document. I used MeasureIt add-on in firefox to get the co-ordinates.
 You'll need different co-ordinates depending on what sort of "hot spot" you'd like to use. Hot spots are covered in the next paragraph.

–Hot Spot

Now that you've got your image and co-ordinates, HTML comes to finalise your job. There are three different shapes (commonly termed "hot spots") that can be used in image maps. They are as follows:

-RECT
-CIRCLE
-POLYGON

–Rect

Rect is obviously short for rectangle. For this one, you'll need two different co-ordinates. Top right and bottom left.

–Circle

Many people get confused with this one and many don't even know that it exists. I personally think it's the easiest of all. All you need is the centre co-ordinate (the point in the centre of your shape) and it's radius size (remember your maths: radius is HALF the diameter. Don't get diameter and radius mixed up!).

– Polygon

The most common hot spot used. This is used for when you can't use neither of the above hot spots. This one uses the co-ordinates of the points in order. So if you're going to have a pentagon (shape with five sides), then you list all five co-ordinates but make sure they're listed in ORDER. One after the other, otherwise you'll confuse some browsers.

–Map Name

Just like any person, document, image and country, image maps also require names. This is simply because if you are going to include more than one map on your page, then to identify which image goes with which map, you'll need to name the map. Confused? Look here:

<IMG SRC="img1.gif" USEMAP="#countryname1"> <IMG SRC="img2.gif" USEMAP="#countryname2"> <map name="worldmap">

[…. codes for map which I'll show you later on ….]

</map>

<map name="worldmap">

[……]

</map>

Now, if you didn't name each map, how would the browser know which image goes with which map?

You'll also notice this tag at the end of each map: </map>. You may have suspected by now that </map> just closes the map. Simple!

–Area & Anchor Tags

There are two more tags you should know before completing your image map. <area shape="rect"> is a tag that identifies which hot spot is being used. The other is the anchor tag which I'm sure you already know what it means. It's just <href="http://www.aliencoders.org&gt;. So in a completed code, they should both look like this:

<area shape="circle" coords="245,30" href="http://www.aliencoders.org"&gt;

–Final Code

Now you just need to put all these codes together and you've got magic! Here's what your final code should look like:

<body>
<img src="world-map.gif" width="614" height="340" alt="World Map" usemap="#world-map" border="0 px"  />
<map name="world-map">        
           <area shape = "poly" coords = "420, 220, 454,185, 461, 166, 426, 145, 400, 171, 420, 220" onMouseOver="showText('India');"  onMouseOut =  "showText('');" alt= "India" href="#" />                       <area shape = "poly" coords = "486,272, 490, 300, 555, 320, 560, 285, 545, 245, 510, 245, 480,265, 486, 272" onMouseOver="showText('Australia');"  onMouseOut = "showText('');" alt= "Australia" href="#" />
</map>
</body>

– Other Tips

Of course, you don't just have to use external links. You can also use anchors for bookmarks on the page [href="#SectionTwo"], mailto [href="mailto:george@trees.com] and other anchor tags. You can specify the target as well (put it right after the anchor tag) [target="_new"]. Insert alternative text tags- alt (insert it after anchor as well) [alt="Click here to learn about trees"].

– Summary

So that's all you need to do. Very easy to create and very professional looking when used with a good graphic.

Fully Working code on this topic has been posted in forum: http://www.aliencoders.org/content/area-and-map-tag-demonstration-html
(It's having code with and without marquee behavior too)

Uncategorized

Minimal solution for image alignment in HTML

HTML Logo by AlienCodersWhile working on area and map tag for some image manipulation tricks. I found that center attribute doesn't work at all for img tag .   We are having problems centering images – particularly when they're mixing the ALIGN attribute with style sheet properties. There are two main causes:HTML rules and browser compatibility issues.

Some Elements Center, Others Don't!

First, remember that the ALIGN attribute is a deprecated HTML attribute, meaning it's marked for deletion in future versions. Of course, deprecated doesn't mean that it will stop in near future. But it means  that you should be alert to use or  display issues in current and future browser versions.

Since ALIGN may not behave as you expect, how should you center an image?          

Your first thought is probably to include the align="center" property/value pair to your image tag. After all, it works for paragraphs, tables, and other elements:
[html]
     <p align="center">paragraph content here</p>
     <table align="center">table content here</table>
     <div align="center">div content here</div>
      <h2 align="center">header content here</h2>
[/html]

The content inside those tags centers reliably across browsers because they're block-level tags. But the IMG tag is an inline element, so it displays relative to the content around it. That's why the only supported ALIGN values are those that indicate how text and other page elements should display in relation to the image.

You can move an image to the left or right on the Web page or control its vertical placement with the ALIGN property, but you can't center it using the ALIGN attribute. align="center" isn't valid HTML. All browsers ignore align="center" when it's part of an IMG tag.

Deprecated Alignment Strategies

The simplest way to center an image is to place it inside opening and closing CENTER tags:

<center><img src="imgName.gif" alt="image description" height="100" width="100"></center>

Unfortunately, the CENTER tag is also deprecated and becoming somewhat unreliable in the most recent browser versions.

Another simple solution is to enclose the image inside a page element that CAN be aligned to the center – such as a paragraph or a DIV tag:

<p align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></p>

<div align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></div>

That solution works in all browsers, but you'll have to contend with the extra spaces that browsers automatically place above and below block-level tags. You'll have less control over page layout and display with this method. And remember that both rely on a deprecated HTML tag or attribute.

But a more pressing problem is that once an element or attribute is deprecated there are no firm rules governing how browsers should display it. Most browsers continue to recognize the tag or attribute, but you'll probably encounter display differences between browsers and browser versions.

Cascading Style Sheets (CSS) offer more alternatives, but also have their own set of browser display problems.

Aligning Images With CSS

The most obvious CSS solution is to use the text-align property to center the image. Unfortunately, that has the same effect as adding align="center" to the image tag: browsers ignore it entirely!

Instead, you'll have to apply the text-align property to the container element (the paragraph, DIV, or other block-level element that contains the image).

Create a style class and add it to the HEAD section of your page. Even better, add it to your external style sheet and use it on every page!

<style type="text/css">
.centeredImage
    {
      text-align:center;
      margin-top:0px;
      margin-bottom:0px;
      padding:0px;
    }
</style>

Nothing to display

Then, apply the class to the container element:

<p class="centeredImage"><img src="imgName.gif" alt="image description" height="100" width="100"></p>

That's slightly more trouble than just applying align="center" to the paragraph tag, but it has the added benefit of giving you more control over the spacing around the image. Note that in our example, we set the margin and padding values to zero pixels to avoid extra spacing that may push important content farther down the page.

Browser Display Issues And ALIGN

Of course, if you're moderately familiar with CSS, you may have already asked yourself this question:

"Why not just control the inline element problem by converting the problem image from an inline to a block-level tag?"

Yes, it seems simple. Just add this class:

<style type="text/css">
  .centeredImage
    {
     text-align:center;
     display:block;
    }
</style>

and apply it to the IMG you want to center:

<img src="imgName.gif" class="centeredImage" alt="image description" height="100" width="100">

That eliminates the extra code needed for the container tag.

That is (or seems to be) the easiest and most elegant solution. And it is – for Explorer browsers. Other browsers follow W3C standards more strictly than Explorer (even Explorer 6.x) and don't allow you to convert images from inline to block. Just to make it even more confusing though, some of those browsers do allow you to convert other inline elements to block-level!

Carefully check for display problems if you apply styles to any page element that also uses the ALIGN attribute. Some browsers may ignore the deprecated ALIGN attribute value. This is a particular problem in tables.

 Source: http://www.netmechanic.com/news/vol7/html_no10.htm