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.
Post Tags:
Background Image CSS HTML Image Map WordPress
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.
Post Tags:
Finally I have one of my own. Bought it yesterday (29th November, 2006). It took me one full day in transferring the data on to the new one which is Lenovo 3000 N100 series. Costed me a fortune (Why things have to so expensive in India?) and after this I am kind of broke but I had to buy one anyway since the one I was using till now (Dell XPS M140) was borrowed from my friend and he needs it now. Anyway I needed it and I bought it, deal closed
Hopefully I will be productive from tomorrow 
Post Tags:
This is one question I have been asked many times in the past from various people I know.
Lets understand the problem first. I as Internet user, read lot of information published or updated on various websites and weblogs (commonly known as blogs). As a simple example, a news site like CNN publish news everyday and there are so many blogs I am interested in reading which are updated regularly. Now if I have to read the fresh content on a daily basis i would need to personally visit each site/blog (say around 15/20) and check if there is fresh content in these forums and then read them, whew! it would become a virtually impossible task for me . This is where feeds comes in handy and solves my problem.
So what are feeds anyway? Web Feed, more commonly known as feed, is the data format used for serving the regularly updated contents such as news, forums, blogs to Internet users like me (us). These provider or distributor of these types of contents syndicated a web feed which users can subscribe to. Sounds complicated? OK, I will try to put it in suppsedly in a more simple manner :). There are websites who wants to publish / distribute their contents (news sites, forums, blogs). In order to do so, these websites syndicate a web feed that produce contents in a standard data format. Now People who wants to read or receive these contents, subscribe to these web feed. Much simpler.
How do the users receive the actual contents from a web feed anyway? There are software programs called feed readers or aggregator which does this job for you. Using these programs, you can subscribe to a web feed (by entering the URL) provided by the content distributor. These programs checks for the new contents when you get connected on these website and downloads for you if anything new is available. This is easy since you can subscribe to as many feeds as you want, get connected and download all the fresh/updated content. This way you can read all the updated content from one program (your feed reader) and you save your time by not visiting to individual website / blogs. Problem solved.
The feed readers are available as a client application (a program installed on your PC/Laptop) for various platforms (Windows, Linux, Mac, Pocket PC, Mobile Phones) or Web based services built in portals like Google, Yahoo. For a more a less complete list, please refer to RSS Compendium - RSS Readers
What happened to RSS and Atom? Well, RSS and Atom are two standard data format for providing web feeds to its users. The acronym RSS is a term for a format that means different depending the various available versions as mentioned below …
- Really Simple Syndication (RSS 2.0)
- Rich Site Summary (RSS 0.91, RSS 1.0)
- RDF Site Summary (RSS 0.9 and 1.0) (RDF - Resource description Framework)
As far as Atom is concerned, it is product of dissatisfaction in existing RSS data format. Atom is an attempt to solve many incompatibilities and widely adopted versions of RSS and to ease the difficulties of developers developing web application with web syndication feeds.
Anyway, most of the content distributors provide feeds in both the format but some of them in only one.
Resources
- To know the history of feed formats, refer to RSS (file format)
- For a detail comparison between RSS and Atom, refer to Atom (standard).
Post Tags:
I love reading quotes but as of now all of them are in my emails, bookmarks, notepads etc but now since I have a place to share, I think I will slowly dig them from various places and put it here on my blog.
For this purpose, I wanted to create a page where in all the quotes should be displayed and a random quote selected from a set of available quotes on the home page (or a place I choose). There is good collection of all types of plugins at WordPress Plugin Database. One can directly reach to plugins related to Quotes (Classified as Features -> Randomness by Plugin) by clicking here. There is also an another source where available plugins for WordPress are hosted. Click Here to visit the page
I read about quite a few quotes plugin here and I am listing down few of them which I found interesting …
- Random Quote Plugin
- DonkieQuote
- Yet Another Random Quote
- Yakuter Random Quote Plugin
All the above mentioned plugins maintain a database where quotes are stored and selected for random display. There is another set of quotes plugin which pulls the quote from another site. Couple of them mentioned below …
- Quotation Plugin
- The Quotations
For myself, I have selected the Random Quote Plugin since using this plugin I could create a WordPress page and put the in order to display all the quotes in one page along with the feature of displaying the random quotes of course.
I am already using this plugin and you can see the page I created for displaying all the quotes available in Quotes page. Not much of collection though at this point of time but page has been created :-D. All these plugins looks great and will meet the basic requirement of displaying a random quote but I guess I have to create another quotes plugin for myself since I would like to organize the quotes in various quotes categories which these plugins don’t. I am not sure whether this is a reasonable requirement of mine but I would like to do it anyway. At least for this reason, I will learn how to write plugins for WordPress. 
Post Tags: