Difference between revisions of "Help:Image maps"

From FamilySearch Wiki
Jump to: navigation, search
m (Steps)
m
Line 6: Line 6:
  
 
:'''Note''':It is not necessary to use an image map to add a link to an entire image, this can be done by adding an [[Help:Images#Link_to_another_page|image link]].
 
:'''Note''':It is not necessary to use an image map to add a link to an entire image, this can be done by adding an [[Help:Images#Link_to_another_page|image link]].
 +
===STEPS===
 +
==== 1. Upload your image ====
  
== Steps ==
+
*Upload into FamilySearch Wiki the image you want to make into an image map.
  
1. '''Upload your image.'''
+
==== 2. Copy the URL for the image ====
  
:*[[Help:Submitting images for approval|Upload]] your image to FamilySearch Wiki if you have not done so already.
+
*Right click on the image and choose ''copy image URL''.
 +
*Note '''do not copy the URL from the browser''', it will not work.
  
2. '''Copy the URL for the image.'''
+
==== 3. Open the Image Map Editor ====
*Place mouse over image and click the right button.
 
*Choose "Copy Image URL."
 
OR
 
:*Go to the page displaying the image and description (e.g., https://wiki.familysearch.org/en/Image:Oregon_flag.png).
 
:*Click on the link to the file just below image to bring you to the page showing the full URL to link to the image.
 
:*Your browser should now just show the image, but no descriptive information.
 
:*You should see a URL similar to this: https://wiki.familysearch.org/en/images/1/17/Oregon_flag.png
 
:*Copy this URL.
 
  
3. '''Open the Image Map Editor.'''
+
*Open [https://toolserver.org/~dapete/ImageMapEdit/ImageMapEdit.html?en%7CImageMap Editor]
  
:*Open a new window or tab in your browser and navigate to the [http://tools.wikimedia.de/~dapete/ImageMapEdit/ImageMapEdit.html?en ImageMap Editor]. (The ImageMap Editor is a tool that will help you to select the appropriate region(s) within your image for use as links to other pages. Once you have selected your region(s), the ImageMap editor will generate the correct code to define those region(s). This code can then be pasted into your article to make your image map work as intended.)
+
==== 4. Load image into editor ====
  
4. '''Load your image into the editor.'''
+
*Paste the URL into "Load from URL."
 +
*In Name box, copy and paste the file name of the image with its extension (jpg, png, etc).
 +
*Click Load.
 +
*The image will show up in the image box immediately below.
 +
*If image does not display, you have a problem with the URL.
  
:*Enter your URL into the field labeled "Load from URL" and enter the image name in the field labeled :"Name" (note: the image name is the text following the final / in the URL you copied). Be sure to include the file extension (e.g., .PNG, .JPG, .GIF) as well.
+
==== 5. Select category of area being outlined ====
:*Click "Load" to display your image in the ImageMap Editor. The image will display in a box labeled :"Image" below the "Load Image" box.
 
  
5. '''Define a region to be used as a link.'''
+
*Below the image box is the '''Areas''' box.
 +
*Depending on the shape of the image, select the correct category: Rectangle, Circle or Polygon.
 +
*Most of the time you will probably be using Polygon as most images you will be outlining do not have regular shapes.
 +
*When you click polygon, a box marked '''General''' appears.
  
:*Choose Rectangle, Circle, or Poly. Choose the area type that best matches the shape of the area you want to link.
+
==== 6. Install links and title ====
::*Rectangle: Select the upper left corner with the left mouse button. Select the lower right corner with the right mouse button. The XY coordinates for the corners of your image will now be displayed in  the boxes indicating "Left/Top" and "Right/Bottom". These coordinates can be manually adjusted.
 
::*Poly: Click for each point you want defined.
 
::*Circle: Select center of the circle with the left mouse button. Select the radius with the right mouse button.
 
  
6. '''Fill in "link" and "title" in the "General" box.'''
+
*Put the link to the article in the Wiki for the area you are outlining on your image map.  
 +
*Or the URL for a site outside of the wiki.
 +
*Next, put in the title box whatever title you want to appear in the tooltip to be seen by anyone who clicks on the area.
  
:*In the link field, type the name of the page that you want the section to link to, the destination page.
+
==== 7. Outline area with the cross ====
:*In the title field, type the word or phrase that you want to appear when you hover your cursor over the area in the image map. If you leave the title field blank, it will display the name of the link by default.
 
  
7. '''Change "Global Settings"''' (optional)
+
*Go back up to the image box and you will see a cross.
 +
*Place the cross on the starting point of the area to be selected.
 +
*Click on the various parts of the image you want to be part of the area.
 +
*As you progress along the borders, the area will become shaded.
 +
*Return to the starting point.
  
:*Scroll down the page in the ImageMap Editor until you see the box labeled "Global Settings." If you would like to keep the default settings, you do not need to do anything with this box. By default, these settings will superimpose a blue circle with an "''i ''" in it on the bottom left corner of your image which provides a link to the image's information page (the rest of the image will link to the pages you selected).
+
==== 8. Check the coordinates in the ImageMap box ====
:*If you do not want to display the information link, select "None."
 
:*If you would like to select a different location for the information link, choose one of the other locations.
 
  
8. '''Copy the newly created code.'''
+
*After you have finished with the first area, go down to ImageMap extension code box and you will see the coordinates of the area you just outlined.  
 +
*Notice that the link and its name is between the set of [[ ]].
 +
*You will also notice that area you outlined is shaded so you can see what area has already be covered.
  
:*Scroll down and copy the ImageMap extension code from the box directly below the "Global Settings" box. This is the code you will paste into a wiki page to create your image link.
+
==== 9. Create the next clickable area ====
::*The code begins with the text <nowiki><imagemap></nowiki> and ends with the text <nowiki></imagemap></nowiki>. Be sure you copy these and everything between.
 
::*The rest of the code defines your area:
 
::* "rect 1 1 741 445" indicates a rectangle starting at pixel 1,1 (i.e., upper right) and going to pixel 741,445.
 
::*The "<nowiki>[[]]</nowiki>" are the brackets that will surround the page the image will link to. This follows standard wiki markup.
 
  
{{note|'''Note: FCK editor breaks image map code!'''
+
*To create the next clickable area on your image, '''click Polygon again'''.
:There are two ways around this:
+
*It will blank the General box.
::1. Create a [[Help:Templates|template]] and paste in the image map code. Add the code<br>{{xt|<nowiki><noinclude>_&thinsp;_NORICHEDITOR_&thinsp;_</noinclude></nowiki>}} to the end of the template after the image map code. This will prevent the template from being broken. The template can then be safely inserted into a page.<br>2. Add the image map code directly to a page. Insert the [[Help:Magic words|magic word]] <br>{{xt|<nowiki>_&thinsp;_NORICHEDITOR_&thinsp;_</nowiki>}} at the bottom of the page. This has a downside in that the FCK editor will be disabled for all users on that page.}}
+
*Enter the next link and title.  
 +
*The cross will appear again so go around the area you want to outline next.  
 +
*When you have finished all the areas you want to select, go to ImageMap extension code again and copy all the code in the box including <nowiki><imagemap> and </imagemap></nowiki>
  
 +
==== 10. Create imagemap template ====
  
 +
*Enter in the search box Template:Name of Your Image Map.
 +
*Paste in coding you copied from ImageMap extension '''into Wikitext editor''' not the Rich Editor.
 +
*Save the template.
 +
*You should see the image and when you put your mouse on the various areas you selected, you should see a tooltip with the title of the area.
 +
*Click on the area to see if your links are ok.
 +
 +
==== 11. Limit size of image map ====
 +
 +
*The image will be the size it was uploaded as.
 +
*If you want to limit the size of the image, go to the WIkitext editor and install a pipe after the name of the image at the top of the coding followed by the size in pixels, like so:
 +
::::Image:Name of Image.jpg<font color="red">|400px</font>
 +
 +
==== 12. To install your image map ====
 +
 +
*Installed image on page like any template.
 +
*Type <nowiki>{{Name of image map}}</nowiki> where you want it on the page.
 +
*If the image is still too large or you want to increase the size, go back and edit the template by changing the size in pixels at the top of the page.
 
{{Contributor Help badge}}
 
{{Contributor Help badge}}
  

Revision as of 23:07, 6 April 2014

Help-content.png This help article will guide you as you edit in the Wiki. See Contributor Help for more help articles.


The ImageMap extension to the MediaWiki software allows you to insert images with clickable links into articles in the wiki. With the ImageMap extension, you can make an entire image serve as a link to a different article or you can select multiple areas within that image to link to different articles. The ImageMap extension is a powerful and flexible tool, but because it is coded in HTML and defines regions via coordinates, many users may find it difficult to use at first. This guide will show you the easiest way to use the ImageMap extension to use an image to link to another article.

Note:It is not necessary to use an image map to add a link to an entire image, this can be done by adding an image link.

STEPS

1. Upload your image

  • Upload into FamilySearch Wiki the image you want to make into an image map.

2. Copy the URL for the image

  • Right click on the image and choose copy image URL.
  • Note do not copy the URL from the browser, it will not work.

3. Open the Image Map Editor

4. Load image into editor

  • Paste the URL into "Load from URL."
  • In Name box, copy and paste the file name of the image with its extension (jpg, png, etc).
  • Click Load.
  • The image will show up in the image box immediately below.
  • If image does not display, you have a problem with the URL.

5. Select category of area being outlined

  • Below the image box is the Areas box.
  • Depending on the shape of the image, select the correct category: Rectangle, Circle or Polygon.
  • Most of the time you will probably be using Polygon as most images you will be outlining do not have regular shapes.
  • When you click polygon, a box marked General appears.

6. Install links and title

  • Put the link to the article in the Wiki for the area you are outlining on your image map.
  • Or the URL for a site outside of the wiki.
  • Next, put in the title box whatever title you want to appear in the tooltip to be seen by anyone who clicks on the area.

7. Outline area with the cross

  • Go back up to the image box and you will see a cross.
  • Place the cross on the starting point of the area to be selected.
  • Click on the various parts of the image you want to be part of the area.
  • As you progress along the borders, the area will become shaded.
  • Return to the starting point.

8. Check the coordinates in the ImageMap box

  • After you have finished with the first area, go down to ImageMap extension code box and you will see the coordinates of the area you just outlined.
  • Notice that the link and its name is between the set of [[ ]].
  • You will also notice that area you outlined is shaded so you can see what area has already be covered.

9. Create the next clickable area

  • To create the next clickable area on your image, click Polygon again.
  • It will blank the General box.
  • Enter the next link and title.
  • The cross will appear again so go around the area you want to outline next.
  • When you have finished all the areas you want to select, go to ImageMap extension code again and copy all the code in the box including <imagemap> and </imagemap>

10. Create imagemap template

  • Enter in the search box Template:Name of Your Image Map.
  • Paste in coding you copied from ImageMap extension into Wikitext editor not the Rich Editor.
  • Save the template.
  • You should see the image and when you put your mouse on the various areas you selected, you should see a tooltip with the title of the area.
  • Click on the area to see if your links are ok.

11. Limit size of image map

  • The image will be the size it was uploaded as.
  • If you want to limit the size of the image, go to the WIkitext editor and install a pipe after the name of the image at the top of the coding followed by the size in pixels, like so:
Image:Name of Image.jpg|400px

12. To install your image map

  • Installed image on page like any template.
  • Type {{Name of image map}} where you want it on the page.
  • If the image is still too large or you want to increase the size, go back and edit the template by changing the size in pixels at the top of the page.
Help-content.png Questions?
Visit the Wiki Contributor Help Forum to receive help with contributing to the Wiki.


Example

In this example, you will take an image of the Oregon flag and make it so that when you click on the image, you are taken to the Oregon page.

  1. Go to https://wiki.familysearch.org/en/Image:Oregon_flag.png, and then click on the link to the file just below image to bring you to the page showing the full URL to link to the image.
  2. Copy the URL (https://wiki.familysearch.org/en/images/1/17/Oregon_flag.png)
  3. Go to ImageMap Editor and paste the URL in the URL field of the "Load from URL" box. Enter the full name of the image in the name box. In this example, the full name of the image is Oregon_flag.png.
  4. Click load
  5. The image will then load.
  6. Click Rectangle in the New Area box.
  7. In the link field of the General box, type Oregon.
  8. Next, you will set the clickable area that will link to the "Oregon" page. In the right upper corner of the image, click with the right mouse button. In the left lower corner of the image, click with the left mouse button.
  9. In the Global Settings box, click none.
  10. Paste your code in the appropriate location in the page. You should see something like this:

<imagemap>
Image:Oregon_flag.png|
rect 1 1 741 445 [[Oregon|Oregon]]
desc none
</imagemap>

Save your page and test your link. If you followed the instructions for this code, you would see:

OregonOregon flag.png

Tips

  • You can use the ImageMap extension and the ImageMap editor to define multiple regions within your image that link to different pages.
  • You can learn more about some advanced applications of the ImageMap extension at MediaWiki.
  • It's a good idea to get familiar with new tools by playing with them in the Sandbox before trying them out on full articles.

Sources and Citations


__NORICHEDITOR__