Our popular tool MapDesign allows users to create images with certain areas, or hotspots, that when clicked will take the user to different destinations (links). Check out this tutorial for adding an image map to an iWeb website. Make your iWeb site even more professional with image maps made in MapDesign
Video Transcript:
In this tutorial, I’m going to show you how to create an image map, and embed it on your iWeb website. If you are not familiar with image maps, imagine that you have an image on your site that allows users to be able to click on different areas of the image and be taken to different pages.
I’m going to show you how you can easily make an image map, and place it on your website in iWeb using RAGE Software’s MapDesign.
So the first thing we need to do, is drag and drop our image onto the MapDesign canvas.
Next, we can draw the link areas around certain sections of our image. These are known as hotspots.
On the left hand side, we will see all of the different hotspot locations that we just created. For organizational purposes, we can re-name these hotspots so we know where each one belongs to. Now comes the important part. We must link these hotspots so that when our users hover over them with their mouse, they will be able to click the hotspots to be taken to the page that we linked to.
We can do this by pressing the Edit button, which will bring up the Inspector window. In the Link To text box on the Behavior tab, type in the the URL that you want this particular hotspot to link to. You can also give some alternate text if you’d like. I also want you to check off the Open In New Window option. Don’t forget this step, otherwise it won’t work correctly.
When you are all done linking all of your hotspots, we must then press the Export To Web Site button. In this popup window, make sure that Simple Image Map is selected, and then press Next and save your image to a location on your hard drive that you won’t forget. I am saving mine to my Desktop. You will see that once I save it, I will have an index.html file, as well as an images folder.
Now, open up your web browser, and go to www.imageshack.com
Press the browse button and locate the image that you just saved. It should have the exact same name as the image you see on my screen which is rage_css_imagemap.jpg. Highlight the image, and then press Open. Then press the Upload Now button.
Once your image has been uploaded, you will then need to copy the URL in the Link text field. Paste the link in your address bar, and hit enter or return.
Next, hover your mouse over your image, and do a secondary, or right click and select Copy Image Location. Then paste that URL in your address bar and hit enter or return. Now just double check that only your image is shown using this address. If it is, proceed to the next step.
Locate the index.html file and open it in an HTML editor. I am using RAGE Software’s WebDesign.
Locate the code for the image which will read images/rage_css_imagemap.jpg.
Highlight the text within the quotation marks, just like I am doing here. Press the delete key, and then paste the URL that we had copied from the previous step.
Next, highlight all of the code located within the body tags, and copy it. Next, open up your site in iWeb, and drag an HTML Snippet onto the page. Paste the code that we just copied.
You should be able to see your image, and you will be able to move your image wherever you want on your page
Your image map is now complete, and when you publish your site, you will be able to test your image map by clicking on the hotspots you created.
The video below will show you how you can incorporate an image map on your WordPress website. Image maps allow your websites users to click on different areas of your image and be taken to different links. Image maps are extremely easy to create when using MapDesign.
Video Transcript:
In this tutorial, I am going to show you how you can add an image map to a website in WordPress, using MapDesign.
Before I begin I want to mention that there is one tricky part that will require the user to do a bit of trial and error. The image that you want to use to create your image map will need to fit into the body of your posts or pages. Basically you want to make it so that your image is the same size or less than the width of the body where your posts or pages go. This might require you to make a mistake or two along the way and go back and correct it. So I will leave that part up to you and continue along with the tutorial.
So here I have my image ready on my desktop. I am going to drag it onto MapDesign. Then I will create my hot spots by selecting the Rectangle, Circles, or Polygon tools.
Next, I will link these hotspots by clicking on Edit, and typing in the URL on the Behavior tab.
When I am done creating my hot spots, I will click on the Export To Web Site button to export the image map. You will notice I have select Simple Image Map. I encourage all of you to do the same to ensure that our image maps will work properly on our WordPress sites.
I will leave the format as JPEG and the Quality as High. I will click the next button, and save export the image map to my desktop.
On my desktop, I will now have an index.html file and an images folder, which will contain my image map.
Open up the index.html file in your favourite HTML editor. Make sure you are not opening it a web browser. I am opening mine up in our HTML editor called WebDesign.
Highlight all of the code with the opening Body and Closing body tags just like I have done. Then copy this code.
Now go to your WordPress dashboard, and either add a new post, or add a new page, whichever your prefer. Make sure you are on the HTML tab and paste the code that you just copied.
Now I will open a new tab or a new window in your web browser and go to imageshack.us. You can choose to host the image on your own server, but for the purpose of this video, I am going to host it on imageshack. The choice is up to you, but it will be easier for you to follow along if you also host it on imageshack.
Click on the browse button, and locate the image map which is inside of the images folder. Highlight it and click Open. Then click on the Upload Now button on image shack.
Highlight the URL in the Link field, copy it, and paste it in your web browser. Then do a secondary click on your image, and select Copy Image Address, or copy image location. Now go back to your post in your WordPress dashboard.
At the bottom of the code that we copied and pasted, you should see a location for your image which reads images/rage_css_imagemap.jpg. Highlight that part of the code, and paste the URL that we have just copied. Make sure your URL has quotation marks around it like mine does.
Quickly click on the visual tab to confirm that everything has worked. If you are able to see your image, then you have done everything correctly and you can publish your post or page.
Back in February of 2011, we made a post with a video tutorial showing you how to create a custom Facebook page for your business using MapDesign. Not too long after, Facebook discontinued the use of FBML which was vital to the creation of the custom Facebook pages. In this new video tutorial, we will teach you the new and updated way of creating your custom Facebook page using MapDesign. This method is actually a bit easier than the last video as we are able to use a Facebook App called iFramed. So without further ado, here is the new tutorial:
Video Transcript
As of March 2011, there was a change to the way we add our image maps to our fan pages on Facebook. If you’ve added your image map in the past, you most likely did it by using the Facebook Markup Language. FBML has since been discontinued, and there is now a new method for getting our image maps on Facebook.
In our tutorial, we covered how to sign up for a Facebook fan page. We will do the same here, however it will not be as extensive as last time. If you need assistance signing up for Facebook and then creating a page, you can refer to the old tutorial, but I will warn you that there have been some interface changes so things may look a bit different.
So let’s get right to it. What you’ve been seeing here is a Facebook profile. Like mentioned earlier, you must have one of these in order to create a page. From here, I am going to go to the address bar and type in pages, so that my destination is facebook.com/pages.
Next, I will click on the Create Page button which is located in the top right corner.
Choose the type of page you are making, and fill out the required fields.
Now that the Facebook fan page has been created, I’m going to prepare my image. Remember that this can be any image you want, but for this tutorial, I am showing how to make your image a picture of your website since that seems to be the most popular request. So I will go to the page on my site that I want to be shown in my image, and I will take a screen shot by holding down Command, shift, and 3.
Next, you can see your screen shot on your desktop. Let’s open up our screenshot so that we can crop out any unnecessary parts of the image. Basically we want to crop out as much as we can as we’re going to be trying to fit a pretty large image into a pretty small area. Now I’m just going to copy what I have highlighted and then I will select New From Clipboard.
Next, and this is an extremely important step if you want the image to fit in the Facebook page, I’m going to select Tools in the menu bar, and then I am going to click on Adjust Size. Then I will change the value of the Width to 510 pixels. If you remember from the old tutorial, this number was 520px, but I am making it a bit smaller because I found 520 to be a bit too wide. I don’t have to change anything else as it is done automatically for me. Then I will save this image to my desktop.
Now we’ll launch MapDesign, and drag and drop this saved image, and it should appear in the application. As of now, this is just a screenshot of this webpage. It doesn’t do much, in the sense that I cannot click on any of the links. So for example, this navigation menu allows you to click on all of these links if you were browsing this page in your web browser. But as an image, this ability is gone. This is what we are going to change with the use of this application.
The first thing I’m going to do is choose the Rectangle option. Now I will be able to create the area that will have a live link. I’m going to do this for all of the text and images that I want to have links. I’m going to fast forward through this process since it can take a few minutes depending on how many areas you are going to link.
So now that all of my link options are set, you will notice that there are now a bunch of options in the Hotspots section, which is located on the left hand side of the application. These options are labeled Rectangle 1, 2, 3 and so on. Each of these represents each rectangle that I placed on the image. For example, you saw that the first rectangle I placed was around the area that says Home. This means that Rectangle 1 belongs to that area.
Beside each hotspot is an edit button. Selecting the edit button will allow us to set the URL to the destination we want to link each area to. So since this rectangle is surrounding the text that reads “Home,” I will link this area to the homepage. I will then need to link Rectangle 2 to the Store as that was the second hotspot that I created. We will need to repeat this process for the remaining hot spots on the image.
You will notice that for each link, I am including http:// and also selecting the option to open in a new window. You must do this as well or your image map may not function correctly.
When we are all done, we’re going to Export the image map by selecting File in the menu bar, and then pressing the Export button. I am going to export it to my desktop.
Next, I am going to create a new folder, and I am going to call it mapdesign. You can name it whatever you want, but make it something you can easily type because we’re going to be typing it in again. Then place the exported files into that folder. There should be one file named index, and one folder names images.
Now what we need to do with this folder is we need to publish it to our server. I am going to demonstrate publishing it to FTP. If you’re publishing to your MobileMe account, the process is going to be very similar.
So here I’ll just drag and drop the folder onto my server via CybderDuck.
Now I’ll head back to my Facebook page, and in the search field, I am going to type in iFramed. What iFramed is, is just an app we’re going to use to add our image map to our page. Doing it using iFramed versus installing iFrames manually will save us a lot of time, and it is much easier to do.
So we’ll click on Go To App, and then select one of the Tabs, and then choose the page that we want to add the application to. Then press the Add iFramed! button. This will take us back to our Page, and you will notice on the left, there is a new link that says Welcome. We’ll click on Welcome, and the iFramed app will load. Click the Start button.
Now we’ll need to type in the location of the folder that we just published. So if you published to the root of your server, you should type in your domain slash folder name. So for example, I will type in www.ragesw.com/mapdesign-facebook. If you published the folder to your iDisk, you will type in web.me.com/username/foldername. It is very important that you know the precise location of where you published the folder to, otherwise the image map will not show up.
You will notice that there are two different places to put your URL for your image map. One is the fan view, one is the non-fan view. So that means if you want to show different image maps for people who have Liked your page versus people who haven’t, you can do that. For this example, I will just make both of them the same. Press the Save buttons, and then you can preview your image map, and test it and make sure everything works the way you wanted it to.
And that’s how you customize your Facebook page with iFrames and not FBML. Now your Facebook page can have the same look and feel as your website.
In this video, we’re going to show you how you can add an image map made in MapDesign to a RapidWeaver 5 website.
Video Transcript
There are two types of image maps that you can make in MapDesign. A Simple map, and an Effects Map. This tutorial is going to show you how you can add a Simple Map to your RapidWeaver website.
After you have created your image map, you will need to export the image map by pressing the Export To Web Site button. Make sure Simple Image Map is selected and press the Next button and save your image map.
Once you save your image map, you will notice that you have an index file, as well as an images folder that contains your image.
Open RapidWeaver and add a new page. Make sure you select the HTML Code page. Next, open the images folder, and drag and drop the image into the Resources section.
Now open up the index file in an HTML editor so that you can see the code. Highlight all of the code that is within the opening, and closing body tags. Copy this code, and go back to RapidWeaver, and paste the code in your HTML Code page.
Locate the image path, and replace images with resources just like I have done.
When you press the preview button, you will see your image map, and you can test to see if it works by clicking on the hotspots.
If you are using Facebook to connect with customers, you should definitely make your Facebook page resemble your business. This can be done in various ways, but is most commonly done by using what is known as “Boxes.” These boxes are created using an app on Facebook which allows users to add HTML and CSS to their “boxes.”
This video tutorial is going to show you how you can create these boxes. This will make it so that users navigating through your Facebook page can land on your custom box and an image, or images that resembles your website, or promotional material.
The application used to create the interactive image is called MapDesign. Follow all the steps correctly, and your custom Facebook page will be up in no time!
Video Transcript
Many business owners know the importance of having a Facebook page to connect with current customers and reach out to future customers.
What I am going to show you in this video tutorial is how to make your Facebook page look like your website. I will show you how to setup your Facebook page from the very beginning, all the way to adding a section of your page that looks like your website. The end result will look something similar to this.
Rather than code this in HTML, we are going to take a different approach. Simply put, we are going to create an image map of our website and put it on our Facebook pages. The application we will be using to do this is called MapDesign which can be downloaded from ragesw.com
So the first thing we’re going to do is setup our Facebook page. Keep in mind that the interface of Facebook changes quite often so if what you see in this video differs from what you see in your web browser, don’t worry, it still should be pretty easy for you to figure out.
On the Facebook Login page you should see something that says “Create a page for a celebrity, band or business.” Click on the link to create the page.
You should see two options, one for creating a community page, and the other for creating an official page. We are going to use the Official Page option. Select the description which best describes the page you are going to create. For this demonstration, I will select the second option which says Brand, product, or organization. Then we will need to give the page a name. This can be almost anything you want it to be, but I would recommend making it very relevant to what your page is going to be about – for example, the name of your business. Lastly, you will need to check off that you are the official representative of this person, business or brand or product, and that you have permission to create the page. Remember, do not create pages for any of the above for which you do not have permission to do so. If you are able to check the box, your next step is to click the Create Official Page button.
You will need to login with your Facebook e-mail address and password, otherwise you will need to create a new account.
When you have logged in, you should be taken to your page, which should look pretty blank like this. In order to get our website’s image map on our Facebook page, we will need to setup the ability to add HTML to our page. To do so, click on the Edit Page button, and then select Apps. If you scroll down, you should see an app under the Apps You May Like section, called Static FBML. Click on the Add App button.
When the app is added, click on the Go To App button. You should be taken to a page that looks similar to this. Leave this page open for now, and we will be coming back to it shortly.
In order to get our website on our Facebook page, we’ll first need to take a screenshot of the webpage that we want to show on the Facebook page. To do this, Press Command and Shift and 3. Next, you can see your screen shot on your desktop. Let’s open up our screenshot so that we can crop out any unnecessary parts of the image. Basically we want to crop out as much as we can as we’re going to be trying to fit a pretty large image into a pretty small area. Now I’m just going to copy what I have highlighted and then I will select New From Clipboard.
Next, and this is an extremely important step if you want the image to fit in the Facebook page, I’m going to select Tools in the menu bar, and then I am going to click on Adjust Size. Then I will change the value of the Width to 520 pixels. I don’t have to change anything else as it is done automatically for me. Then I will save this image to my desktop.
Now we’ll launch MapDesign, and drag and drop this saved image, and it should appear in the application. As of now, this is just a screenshot of this webpage. It doesn’t do much, in the sense that I cannot click on any of the links. So for example, this navigation menu allows you to click on all of these links if you were browsing this page in your web browser. But as an image, this ability is gone. This is what we are going to change with the use of this application.
The first thing I’m going to do is choose the Rectangle option. Now I will be able to create the area that will have a live link. I’m going to do this for all of the text and images that I want to have links. I’m going to fast forward through this process since it can take a few minutes depending on how many areas you are going to link.
So now that all of my link options are set, you will notice that there are now a bunch of options in the Hotspots section, which is located on the left hand side of the application. These options are labeled Rectangle 1, 2, 3 and so on. Each of these represents each rectangle that I placed on the image. For example, you saw that the first rectangle I placed was around the area that says Home. This means that Rectangle 1 belongs to that area.
Beside each hotspot is an edit button. Selecting the edit button will allow us to set the URL to which we want to link each area to. So since this rectangle is surrounding the text that reads “Home,” I will link this area to the homepage. I will then need to link Rectangle 2 to the Store as that was the second hotspot that I created. We will need to repeat this process for the remaining hot spots on the image.
When we are all done, we’re going to Export the image map by selecting File in the menu bar, and then pressing the Export button. Make sure you have HTML/CSS selected. I am also going to keep the format, but I am going to change the Quality from High to Maximum. Then I will press next, and save the image map to my desktop.
The next thing we are going to do is upload the image file. You can upload it to your own server if you’d like, or you can use an image hosting website. I’m going to use ImageShack.com to publish my image. I’ll just press the browse button and locate my image, and then press the Upload Now button. Once the image is uploaded, I’m going to select the Direct Link, and copy it.
My next step is to paste this link in my address bar, and I will then click on my image and select Copy Image Address so that I can copy the address for the actual image.
Now I’ll open the index.html file for our image map with my HTML editor, and I’m going to replace this image location with the image location that I had just copied in our previous step.
Lastly, I’m going to highlight the code from Style Type all the way down to the final closing div tag, and I am going to copy it.
Now we can go back to that Facebook page that we left open, and we can paste this code in the large text box next to FBML. We’re gonna have to scroll down a bit, and we’re going to delete the closing head tag, followed by the opening body tag.
Then we’ll scroll up to the top and we can rename the Box Title to whatever we want. This is what will show up in the tabs section of our Facebook page.
Scroll back down and press the Save Changes button.
Now if you go back to your Facebook page, and click on the tab for your image map, you will see that the image is there, and if you hover your mouse over those certain sections that you made linkable, you will see that you can then click to be taken to those destination URLs.
And that’s how you customize your Facebook page so that it can have the same look and feel as your website.
If you want to learn how to make your website rank higher in search engines, be sure to check out the SEO Video Courses at ragesw.com
Create Add-ons, Tutorials, & Resources For Third Party Products
The number one best strategy that you can employ in driving more traffic to your website is leveraging the success and visitors of other websites. A great way to do this is by creating add-ons, tutorials or third party products for an existing product or service. Before worrying about the How and For What, consider the benefits of going in this direction. Companies love when you extend or talk about their product or service for the same reason you would appreciate the gesture, free advertising. You single handily increase their exposure and the usefulness of their product or service.
With that being said, most companies would be more than willing to help promote your add-on and they may even have some insight into promotional areas you can leverage on your own. Taking a look at Apple’s online store we see a multitude of third party products that customers can purchase. The extra exposure these companies get by providing an Apple related product greatly enhances their product reputation and provides free advertising for their website. They can than leverage this extra exposure to help promote other product lines.
In another example, RAGE Software’s MapDesign provides a great way for website developers to easily add interactive media to their websites. Of course, there are dozens of software packages that users can use to design and build websites. One of the most popular for the Mac, RapidWeaver, was being used by many of our RAGE MapDesign customers. We leveraged the success of RapidWeaver by making it easy to use RAGE MapDesign along with it. We created an online video tutorial to show step by step how the two applications can integrate with each other and posted it to the RapidWeaver forums. Since we were the first to do this, we were able to attract a large portion of RapidWeaver users over to our product line. As we introduced more products, these customers kept coming back. In addition, we also increased our search engine rankings by branching off into new features that were searched often in many major search engines.
Now you may be wondering what you can do in order to leverage the traffic and success of other products and services, and in turn, gain new customers and higher search engine rankings. At the very least you can write articles pertaining to your area of expertise. However, by getting a little creative you can go further in leveraging the traffic of other websites.
First and foremost you must consider the industry you are in. Whether it be law, religion, technology, SEO, there is always creative options you can take advantage of. Very generically you can use special deal websites such as Red Flag Deals to announce your one time deals on products or services.
How To Brainstorm New Traffic Generating Ideas
Here are the steps involved in determining the websites to go after;
Make a list of all the ways your customers use your products or services. Get specific and creative here. Do a search for your product or service name to see if anyone has been talking about using your product in a way you may not have thought of yet.
Find other products or services that your products can be used with to help make those customers more productive.
Look for any communities that may already have been established around these products or services to see if their customers could benefit from your offerings and to find places you can promote your product/services.
Create your free add-on, tutorial or resource for these third party products. The important strategy here is to make this add-on free because it gives you more of an opportunity to promote and will lower the barriers required for new customers to come try it and discover what else you have to offer.
Evaluate the traffic and feedback you get from these new users to see if your promotional efforts have paid off and whether you should consider additional add-ons for this segment or move on to a new one.
So we have gotten a lot of emails asking whether or not RAGE MapDesign can easily be used with Rapidweaver. It definitely can be, and it is actually quite easy. We have created a short movie to show exactly how it is done.
The point where most users were have trouble was due to specifying the correct paths to your image files. The following tutorial will show how to add your interactive image maps to Rapidweaver. Although this shows how to add Effects based (CSS) image maps, adding purely HTML image maps can also be done easily. If you are having trouble with that, please feel free to contact support and we will be more than happy to walk you through it, and if necessary create an accompanying video.
Update: As of version 1.2 you no longer need to edit the files to rename the images directory to assets. Just go to the Preferences in RAGE MapDesign and select ‘Create Rapidweaver compatible image maps’. This will automatically use an assets folder instead of an images folder.
Recently Yahoo performed a number of tests to determine what are the major factors to slow loading web pages and provides 13 useful tips to help improve your web page load time. Having fast loading web pages is important for a variety of reasons including;
1. It has been estimated that visitors will spend less than 8 seconds waiting for a page to load before going somewhere else
2. Search engine bots will be able to scan and index your web site faster
How does this relate to RAGE MapDesign? Well Yahoo found that the number one factor to speeding up page load time is too reduce the number of HTTP requests sent to your web server. A web browser sends a request to a web server for each image it must load according to your HTML code. Yahoo actually recommends creating one large image map instead of splitting up your images manually. And of course RAGE MapDesign is the faster and easiest way to create web site image maps.
This reduces the number of requests sent to your server and in return helps speed up your web page load time. You can read the 13 Tips To Faster Loading Web Pages at Yahoo’s developer web site.
Some tips get very creative so go through them to see what else you can do to help reduce the amount of time it takes web browsers to display your web site.
We recently released an update to RAGE MapDesign which adds support for transparent PNGs in image maps. This means that you can easily overlay any mouse over or mouse down effect in your image map by using png images. This make it really easy to make beautiful transitions using only CSS and XHTML.
I created an example to show off what you can do with the new transparency features. Check out this sample CSS Based Image Map with transparency. The image will overlay the background image with a transparent PNG as the mouse moves over the specified hot spots. This example took about 10 minutes to make including creating the PNGs and putting it up online.
In contrast, when I used version 1.0 to create this image map, it took a while to fake the transparency by using the same section of the main image as the background image for the mouse over effects.
We have some great new features already planned for the next free update of RAGE MapDesign, so keep checking back!
Twitter
Facebook
Youtube
Blog RSS