MyCorollary

In Ask Pankaj & Arnab where in me and my friend Arnab, try to posts the answers of the questions asked to us from various people, I was required to put up a new header image with two hyperlinks (Joining the Mailing List and Contact Us). This can be easily achieved using the ‘MAP’ html tag which defines a client side image map (an image with clickable regions) and to define a region within an image map, ‘AREA’ html tag is used. Lets say we have an image called linksimage.jpg in the images directory, I will write my image-map as below …

<map id ="imagelinks" name="imagelinks">
    <area shape ="rect" coords ="15,5,85,70"
         href ="http://igoldindia.com" target ="_blank"
         alt="Join Mailing List" />
    <area shape ="rect" coords ="90,5,160,70"
      href ="http://www.askpankajandarnab.com/contact-us/"
      target ="_blank" alt="Ask Us"/>
</map>

where in ‘imagelinks’ is the id of of my map. There are two region defined for the ‘imagelinks’ image map.  The description of various attributes are as below …

shape - defines the shape of the region and possible values are rect/rectangle, circ/circle, poly/polygon
coords - for shape rect, it is left,top,bottom,right. for shape circ, it is centerx,centery,radius and for poly it is X1,Y1,X2,Y2, … XN, YN.
href - URL of course
target - _blank (New window), _parent (parent window), _self (same window), _top (full body of the window) 
alt - alternate text of the url

After the image map is defined, we just need to include an attribute of ’IMG’ tag called ‘usemap’ with the value as the id of our image map as it is done below …

<img src ="images/imagelinks.jpg" border="0" alt="An Image" usemap ="#imagelinks" />

Simple enough, yeah that is what I had in mind but after looking at the CSS Code and header.php of my WordPress Theme (Default Theme) quickly I realized that there is no direct way of using the image maps if the image is declared in the CSS file to be used as background image in a ‘DIV’ and that was exactly the case here. This is how header is defined in style.css of default WordPress theme

     #header {
         background: #73a0c5 url('images/kubrickheader.jpg')
         no-repeat bottom center;
     }

     #headerimg {
         margin: 7px 9px 0;
         height: 192px;
         width: 740px;
     }

To rescue, I used our familer tag called anchor (<a>) tag to which I could assign a dimension and a position and float it over the background image. But there is another twist to it since <a> is an inline tag and we can’t really give dimensions to it but it can be converted in block by either using display: block on the link or float: left on the link. So I added following in my CSS file …

    #mailinglist {
        float: left;
        width : 70px;
        height: 70px;
        margin-left: 270px;
        margin-top: 76px;
    }

    #contactus {
        float: left;
        width : 70px;
        height: 70px;
        margin-left: 5px;
        margin-top: 76px;
    }

After this, I placed following two links inside header.php within the ‘headerimg’ div

<div id="header">
  <div id="headerimg">
    <a id="mailinglist" href="http://igoldindia.com" target="_blank"
           alt="Join Mailing List"></a>
    <a id="contactus" href="http://askpankajandarnab.com/contact-us/"
           alt="Ask Us"></a>
    <h1>
       <a href="<?php echo get_settings('home'); ?>/">
                <?php bloginfo('name'); ?></a>
    </h1>
    <div class="description">
         <?php bloginfo('description'); ?>
    </div>
</div>

You can see it working here. For more reading, one can read a neat article at Night of the Image Map.

My friend who is setting up a school called VIBGYOR HIGH here in Bangalore, India, needed to send invitation emails to parents. He asked me to help him in doing so. He showed me the contents in the word document which had a logo, formatted text (bold, italic, numbering etc). He didn’t want to send the word document as an attachment to the email instead he wanted the contents to be displayed as the email itself.

Probably the simplest way to do this is to create an html page, copy the contents and paste from the html page into the email and send the email. Creating an html page from a word document is also an easy task, just save as web page. MS Word gives you three options as
- Single File Web Page (*.mht, *.mhtml)
- Web Page (*.htm, *.html)
- Web Page, Filtered (*.htm, *.html)

Choose the default and save the word document as web page. Copy the contents from the new html page, paste it in the email, write the recipients and send it.

Anyway, just for curiosity, I thought of making the word document’s content as a stationary so that it can be further utilized if required. Here is what I did to achieve this …

1. Saved the word document as web page. I chose the third option which is the ‘Web Page, Filtered’ since in the first two, MS words adds lot of tags which I didn’t need. I wanted to keep it a simple HTML page with only HTML tags. Changes are much easier this way. This could be just my comfort level so suite yourself. Idea is to get a HTML page which works fine.

2. Copied the html page along with all the images required by the page to the folder ‘C:\Program Files\Common Files\Microsoft Shared\Stationery’. This is the default location where all the stationary documents are stored. Double check the html page by opening it in the browser and see if everything is okay like all images are displayed properly. If not, adjust accordingly.

Now to use it in the Outlook express
- Open Outlook express.
- Click on the down arrow beside the ‘Create Mail’ button and ’select stationary’ option. You should see it listed in the list with the name of your web page’s title.
- Select it and enjoy.

To use in MS Outlook …
- Click on the new email.
- Click on the down arrow of the options button and click on stationary.
- Go to Personal Stationary tab and then click on theme button. You should see it listed in the list with the name of your web page’s title.
- That is it.

You can create more generic email templates / stationary for different types of people you communicate to and have fun.