Its my blog
Posts tagged html
Creating Image Maps for Complex Shapes !! The easiest way
Apr 9th
Hey friends its been a while since i last posted something on the blog. This time i have got a tutorial for you on how to create Image Maps for (well maps) images which have complex layouts.
For eg. To Create Image Map of Image like this (see below) is a herculean task if done manually
The tool i use is Adobe Fireworks. And probably it is the best tool for the same task.
Step 1 : Open up the image in Adobe Fireworks
Step 2 : Click on Magic Wand Tool in the toolbox and click on the area you want to select. You’ll see it will automatically create a selection around the “similar colored area”.
Step 3 : This step is optional, This is just to make our image map look and function better. Go To Select –> Expand Marquee.. and Expand the marquee by 1px
Step 4 : Now Go to Select –> Convert Marquee to Path
Step 5 : You’ll now the see the image turn up something like this.
Now Right Click the portion which is highlighted by blue dots , or in other terms the Path that you just created and Click Insert HotSpot or press Ctrl+Shit+U
Now the image will turn up like this.
Next Step is to repeat the stuff with as many regions as you want. And then to export the image as HTML. To export the image Go To File –>Export (or press Ctrl+Shift+R)
And then save the HTML file anywhere. Now open up the HTML file to get the Coordinates to the area or the image map.
Hope you find this tutorial useful , if you have any doubts pertaining to Image Maps feel free to ask it in the Comments.
btw – here is a demo of the website i was working on where i implemented this map
http://anuj.im/gqa/ . Please note this is just a development setup for the website.
Web Developer Tips – How to disable spellcheck in firefox
Jan 27th
Hello my fellow web developers and designers. Many times while creating a websites we are encountered with problem of not so good looking forms , and on top of that firefox’s built in spellcheck functionality adds to the disgrace by adding red dotted underline to misspelled words , or more appropriately words that are not in firefox’s dictionary. For eg. Have a look at the following “textarea” input field. It is a default textarea field with attributes rows="5” and cols=”40” set. i.e.
1 | <textarea rows="5" cols="40"> </textarea> |
Do you see the red-dotted underline beneath “textarea” and “smartanuj” , they just are not good. Whatever firefox thinks to me both textarea and smartanuj are correct spellings. So how can i get rid of this problem.
Now here is a another subtle but significantly good looking textarea
You see how the textarea and smartanuj both are free of the red-dotted underlines. Lets see how you can accomplish the same.
To create the above textarea i used the following code.
1 2 | <textarea spellcheck="false" rows="5" cols="40" style="border:1px solid #ccc;-moz-border-radius:4px;padding:5px;font-family:Verdana, Geneva, sans-serif;font-size:20px;color:#4B4949"> </textarea> |
Lets break down the textarea bits by bits and understand whats going on there
spellcheck="false"
Disables the firefox spellcheck functionality on that textarea
rows="5" cols="40"
Sets rows and columns of textarea or width and height of the textarea
border:1px solid #ccc;
Sets border around the textarea which is 1px in width , solid and has color code #ccc
-moz-border-radius:4px
Curves the border around the corners in an arc of radius 4 cms
padding:5px
Sets padding 5 pixels , so the characters are some pixels away from the borders
font-family:Verdana, Geneva, sans-serif;font-size:20px;color:#4B4949
Sets font-family to “Verdana , Geneva , Sans-serif ” , the size to 20px , and font-color to color code #4B4949
Isn’t it fairly simple. Important thing to remember , the make the styles inline to give the textarea proper formatting
If you have any questions please use the comments area below
Recent Comments