Image maps for wordpress.com
It is possible to add image maps in a wordpress.com blog even though the official wordpress.com Support Doc says otherwise.
What is an image map?
The best way to understand what an image map is is by viewing an example.
Please view the image above. Put the cursor on the text links (they are blue). You will be able to click on them and go to the links!
BUT it is an image. Put the cursor anywhere in the image (except on the blue text links), right-click and view image.
You see an image that looks just like the above image but the blue text links aren’t clickable. See below:
Official definitions: Image Map
In HTML a imagemap is made of the actual image, that is embedded with the
-Tag. The image gets simultaneously the attibute usemap. The imagemap comprise
-tags, which defines the fields with the weblinks. These are similar to the -Tag defining which URL should be opened.
Definition and Usage
The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The name attribute is required in the map element. This attribute is associated with the <img>’s usemap attribute and creates a relationship between the image and the map.
The map element contains a number of area elements, that defines the clickable areas in the image map.
Browser Support
The <map> tag is supported in all major browsers.
-From w3schools
How to create an image map
Try the Google search for the how-to: How to create an image map
Try free online image mapping programmes:
Download a software that creates image maps
Check out this Google search: download softwares to create image maps
Or try these softwares:
Question
So which one of these tools listed so far do I recommend?
Answer
None of them!
Why?
Because I haven’t really tested any of these tools. Sorry. Maybe you can test some and enlighten me! 
Which image mapping tool do I use and why?
Well, I have my own favourite free online image mapping tool.
I use Kwout for all my image mapping needs at wordpress.com. It is so easy and I have gotten so used to it that I didn’t even bother to test any other tool (now you know the reason!).
Click our bookmarklet on a web page you wish to quote, and the screenshot of the entire web page will be popped up. (The size of the screenshot can be selected from small, medium or large.) By dragging a mouse on the screenshot, select an area you wish to quote, and click the “Cut Out” button. Then the area you selected will be cut out as an image with an image map (hyperlinks). Finally, the embed code, which is used to post the image (with the image map) to your web site, will be displayed. In addition, you can post it directly to Twitter, Facebook, Tumblr, and so on.
- From Kwout
Kwout is super-easy. Try it for yourself!
Psst: a secret
I will soon be posting interesting wordpress.com tips on how to use Kwout’s image mapping tool creatively in a wordpress.com blog. If you want to be an early bird, subscribe to the rss feed of my wordpress tips.
How to embed a video playlist in a wordpress.com blog
Do you post multiple videos in your blog? If so, you can choose to embed a video play list instead of adding single videos every time.
Why?
Because it takes up less space, granting your visitor the comfort of browsing all videos without having to scroll on and on. Also, that gives you an opportunity to make other contents in the blog post (say, text) accessible at first glance.
If the idea is sold on you, try these free sites to create video play lists.
About Jamzee
Create video playlists for Myspace or your personal blog. Manage multiple playlists to share on social sites using video sources such as YouTube, MetaCafe, and Blip.tv.Create unlimited, free video playlists to share with your friends and embed on other sites. Begin by using the Video Search at the top of the page to find your favorite videos!
-From Jamzee
See an example…
The code for the Jamzee player above:
View an example…
The code for the Embedr video in this post:
Instructions on embedding Video play lists in a wordpress.com blog
After you are done creating a video play list you need to modify the (Flash) embed they give you, if you want to embed a video play list in a wordpress.com blog. You can learn to do that here:
How to have Flash embeds in a wordpress.com blog
Mixpod
Mixpod allows you to search for videos or add video urls. Mixpod is for music videos only.
You can choose autoplay if you want.
Here is an example video play list.
How to embed a mini video player in a wordpress.com blog
If you want to add video to a blog post, but don’t want it to take up too much space you can choose to embed a mini video player.
VTubeTools lets you customize the size of a video player easily. Just provide the url of the video you want to embed.
Here is an example.
The code they give you is Flash. Now, if you have a non-wordpress.com blog, you can use the code without modification in order to have the player in your blog. But for a wordpress.com blog, you have to modify the code first in order to have the video player. You can learn how to do that here:
How to have Flash embeds in a wordpress.com blog
Note: VTubeTools also lets you change the look of your video player. And you can choose autoplay and fullscreen options if you want.
How to create music online and embed in blogs using Noteflight
Noteflight enables you to create music online for free! You can create pertty complex sheet music which you can listen to, share with friends and embed in blogs.
Use Noteflight to capture your musical ideas in notation – anywhere, anytime – and share them with friends, collaborators, band-mates, teachers and students. Noteflight lets you compose, read, print and hear notation and guitar tablature in any browser and on any computer. Your music is online from the moment you create it: share your scores’ web addresses with others, link to your music from other web pages, even embed music in web pages.
-from Noteflight
The embed code they give you is Flash and you can embed a Noteflight creation in wodpress.com blogs too!
Seeing (and hearing) is believing. So check out the example score below…
It’s called Secret best unknown piano piece.
If your jaw is dropping why not browse for more creations?
Important notice
This post is a stub. Help me enrich it. If you try the service(s) listed in this post please use the comment box to fill in the missing details (usage instructions and feature reviews). I will pick good information from there and add it to the post under the section Readers’ Contributions – crediting (and linking to) you as the contributor.
Readers’ Contributions
Currently there’s nothing to show in this section. It might be due to one of the following reasons:
1. Nobody is smart enough to contribute to the post yet.
2. Everybody is too lazy/busy to contribute.
Currently there’s nothing to show in this section. It might be due to one of the following reasons:
1. Nobody is smart enough to contribute to the post yet.
2. Everybody is too lazy/busy to contribute.
How to embed documents from Docstoc in a wordpress.com blog
Docstoc is an oh-so-lovely way to embed documents in your blog and it works for wordpress.com too!
Docstoc is the premier online community and marketplace to find and share professional documents. Docstoc provides the platform to upload and share documents with the world, and serves as a vast repository of free and for purchase legal, business, financial, technical, and educational documents that can be easily searched, previewed and downloaded.
Docstoc also provides technology through various APIs and Widgets to help facilitate the sharing and promotion of documents across the web. The site has popularized the use of embedding documents throughout the blogosphere and mainstream media.
-From Docstoc
Seeing is believing. Just “play” with the embed below. Put the cursor on the left, then on the right, then scroll, then click Menu (the Menu gives you a lot of options). Okay, you don’t have to do these in the exact same order as written here… just get to know it!
Instructions
The Docstoc embed code is Falsh code and in order to embed the code in a wordpress.com blog, you have to modify it first. You can read the following post to learn how:
How to have Flash embeds in a wordpress.com blog
Important notice
This post is a stub. Help me enrich it. If you try the service(s) listed in this post please use the comment box to fill in the missing details (usage instructions and feature reviews). I will pick good information from there and add it to the post under the section Readers’ Contributions – crediting (and linking to) you as the contributor.
Readers’ Contributions
Currently there’s nothing to show in this section. It might be due to one of the following reasons:
1. Nobody is smart enough to contribute to the post yet.
2. Everybody is too lazy/busy to contribute.
Currently there’s nothing to show in this section. It might be due to one of the following reasons:
1. Nobody is smart enough to contribute to the post yet.
2. Everybody is too lazy/busy to contribute.
How to embed a zooming presentation from Prezi in a wordpress.com blog
Prezi has got to be one of THE coolest free online services I have stumbled upon lately.
Prezi is a web-based presentation application and storytelling tool that uses a single canvas instead of traditional slides. Text, images, videos and other presentation objects are placed on the infinite canvas and grouped together in frames. The canvas allows users to create non-linear presentations, where they can zoom in and out of a visual map.[1] A path through different objects and frames can be defined, representing the order of the information to be presented. The presentation can be developed in a browser window, then downloaded so that an internet connection is not needed when showing the presentation.
Prezi uses the freemium model. Customers who use the free Prezi Public license must publish their work on the [Prezi site]. Customers who pay for a Prezi Enjoy or Prezi Pro license can create and share private Prezis. Prezi also offers a special education license for students and educators.
From Wikipedia
Prezi is so unique that you actually have to see a real Prezi presentation in action.
View the example below. Please view it fullscreen to appreciate it completely.
Although it looks a little tacky at first because of the red lips, it is worth a look!
Please go to the Getting started page to learn how to use Prezi.
You can create your own Prezi and embed it (or any other Prezi) in a wordpress.com blog. All you have to do is modify the Flash embed code they give you. The following post will help you learn how to do that.
How to have Flash embeds in a wordpress.com blog
Important notice
This post is a stub. Help me enrich it. If you try this service please use the comment box to fill in the missing details. I will pick good information from there and add it to the post under the section Readers’ Contribution – crediting (and linking to) you as the contributor.
Readers’ Contributions
Currently there’s nothing to show in this section. It might be due to one of the following reasons:
1. Nobody is smart enough to contribute to the post yet.
2. Everybody is too lazy/busy to contribute.
Currently there’s nothing to show in this section. It might be due to one of the following reasons:
1. Nobody is smart enough to contribute to the post yet.
2. Everybody is too lazy/busy to contribute.
How to add a Twitter Flash widget to show your latest Tweets in a wordpress.com blog
It is possible to show your latest Tweets in your wordpress.com blog in style. Get Flashy!
An aside
Flash widgets
The following services create Flash widgets that pull your latest Tweets from your Twitter feed.
You can find the feed url of your Twitter at the bottom right corner of your Twitter homepage.
And if you need to know how to embed Flash widgets in a wordpress.com blog, please read this post:
How to have Flash embeds in a wordpress.com blog
You can create a a Twitter widget in two styles – List or slideshow.
| List style | Slideshow style |
Important notice
This post is a stub. Help me enrich it. If you try these services please use the comment box to fill in the missing details. I will pick good information from there and add it to the post – crediting (and linking to) you as the contributor.
How to add a Twitpic image widget in a wordpress.com blog
What is TwitPic?
TwitPic lets you share photos on Twitter in real-time.How do I use TwitPic?
You can post photos to TwitPic from your phone, from the site, or through email. All popular Twitter clients have built-in support for TwitPic using our API.
-From Twitpic
If you need to share images in Twitter, you can use Twitpic for free to upload the images. Just log in using your Twitter account.
What if you want to show your Twitpic images in your wordpress.com blog? Well, the code they give you for “Photo widget” won’t work in this platform because the code is javascript.
But you can create Flash widgets that will automatically show your latest Twitpics in your blog. And here are some examples of Twitpic Flash widgets.
I used the RSS feed url of Twitpic Public Timeline for the examples in this post. You can find the RSS feed url of your Twitpic page at the bottom left of your Twitpic homepage.
Some customization options are available at these sevices.
Bonus tip
Did you know that Twitpic enables you to add Face Tagging and Geolocation to your images?
Instructions
In order to embed these Twitpic Flash widgets in a wordpress.com blog, you have to convert the Flash code to a code that will work in wordpress.com. You can learn to do that here:
How to have Flash embeds in a wordpress.com blog
Note:
This post is a stub. Help me enrich it. If you try these services please let me know your opinions. I will add good information in the post and credit (and link to) you as the contributor.
How to use Embedit to embed any document in a wordpress.com blog
Do you want to embed documents (MS Doc, pdf) etc in a wordpress.com blog?
If so, then ry Embedit, it’s a free service and you don’t even have to sign up for a new account.
Fetch the document from your computer and upload it using the “Select Files” link. When the document is uploaded, just log into Embedit using your account at Google, Yahoo, Twitter, WordPress, Aol or OpenID. Once you log in you will be redirected to the Embedit page where you can see your document in a nifty Flash player on the right side of the page with the Embed code on top of it and on the left side you can find customization options.
Customization options
You can choose the size of the embed and you can also choose whether or not your readers can print or download it or if they can view it in a separate link outside your blog (as in, in the Embedit website).
See the example below. I have embedded a pdf file.
Advantages of Embedit
I like Embedit for several reasons:
1. It is customizable.
2. It’s easy
3. I have control about what my readers can do with the document.
4. Since the embeds can be viewed Fullscreen, my readers can access the whole document at 100% viewing size without me having to be worried about readabilty or screen space.
How to add a screenshot and not embed the whole document
What if you do not want to embed the file itself in your blog, but would like to use an image (a screenshot) of the file that will take the reader to the embed when clicked?
You may think that in that case you have to choose the link “Thumb” beside the link “Embed”. But be aware that doing so is not fruitful for wordpress.com blogs, since they give you a javascipt code for the thumb.
So, we are going to work our way to a glorious solution.
Go to the “My embeds” page and you will see a thumbnail of your embed. Right-click and view the image. Copy the image location from the address bar and paste it in your wordpress.com blog using the image tab in your HTML editor. Now link it to the Embedit url for your embedded document. You can find the link at the bottom, under Privacy Settings
.
Here is the thumbnail of my pdf.
:caution: In order to embed an Embedit in a wordpress.com blog, you have to modify the Flash embed code first, or else the code will be stripped off by wordpress for security reasons.
How to embed a Deviantart slideshow in a wordpress.com blog
Deviantart is an awesome site where artists upload their creative works. You can use images from Deviantart in your wordpress.com blog.
But did you know that you can also embed a Deviantart slideshow in a wordpress.com blog?
Here is an example. If you haven’t guessed already, the slideshow contains images from my Deviantart Gallery.
Instructions
1. Go to the homepage of a Deviantart member.
For example: This is my Deviantart page – Sanjidas at Deviantart .
2. Click the link “Browse Gallery”. And the gallery of that member will load.
This is my gallery – Sanjidas’s Gallery
.
3. Click the link “Sitback” in the gallery page and a slideshow (consisting of the images in the gallery) will load in a new window.
This is the link for my slideshow – Sanjidas’s Deviantart slideshow
Now click the link “Share” and copy the code found in “Embed on your site”. Copy the code, paste it in your wordpress.com blog, modify the Flash embed code and you are gonna have a Deviantart slideshow running in no time at all!
And if you need to take a look at the code after being modified for wordpress.com…. here is the modified code that is running the Deviantart slideshow in this post:
Giveback time
Please give me feedback on my images. I would love to know what you think of them!
