Help:Image mapsEdit This Page

From FamilySearch Wiki

(Difference between revisions)
m (fix)
m (fixes)
 
(40 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
This article provides access to an image map editor and the step by step instructions for creating multiple links within a single image.
 +
 
{{Help article}}
 
{{Help article}}
  
 
__TOC__
 
__TOC__
  
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.
+
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, specify a particular area within the image, 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 [[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===
+
 
 +
 
 +
<!-------------------------------------------->
 +
<div style="border:2px solid green; padding:12px;border-radius:2em;">
 +
==='''Wiki image maps are as Easy as 1-2-3!'''===
 +
<center><font color="green">''This is a'' &nbsp; '''''condensed outline''''' ''&nbsp;of this article with links to the details that follow.''</font></center><br>
 +
----
 +
<font color="green">'''ONE.'''</font> '''''Using the on-line editor'''''<br>
 +
*Copy the Uniform Resource Locator (URL) from the image page for an image already uploaded to the wiki.  Use the mouse “right click” option and select “copy image location”.  Do not use the browser URL which will not work.
 +
*Open the external image map [[Help:Image_maps#3. Open the Image Map Editor|editor]] and paste the copied URL into the box as shown in the screenshot below so your image is displayed in the editor and the editor is ready to accept your input.
 +
*Define the areas of the image that you want to act as links.  The proper use of a image map would suggest anywhere from at least 2 to possibly hundreds of such areas would have to be [[Help:Image_maps#6. Define the areas within the image|defined]].
 +
*Type or paste the linking [[Help:Image_maps#7. Install links and title|information]] (the link target and description) into the editor so it is added to the correct coordinate coding that is generated by the editor.
 +
*[[Help:Image_maps#9. Create the next clickable area|Repeat]] as necessary until all the link areas are defined.
 +
::'''Note:''' You cannot save the coding within the editor itself so it is suggested that for large projects with many defined areas that the coding should be routinely saved to the template page or to any other software such as a Notepad or Microsoft Word file for safe keeping. <br><br>
 +
----
 +
<font color="green">'''TWO.'''</font> '''''Create the template''''' <br>
 +
*Create the [[Help:Image_maps#10. Create imagemap template|image map template]] in the wiki by creating a title and a new blank page
 +
*Copy and paste the contents of the editor into this new page as well as some important coding described in these instructions.
 +
*Adjust the [[Help:Image_maps#11. Limit the size of the image map|image size]] of the template either to the current maximum of 640px or a smaller size if desired.
 +
::You can make some minor code adjustments so that the image size is easier to adjust “on the fly” and this [[Help:Image_maps#Trick of the Trade|alternative coding]] will also eliminate the need to make numerous template which each have a different size image.<br><br>
 +
*Save the template and test that the links are working properly.  Correct if necessary.<br><br>
 +
----
 +
<font color="green">'''THREE.'''</font> '''''Add the template to the page''''' <br>
 +
*When on the target page click on the edit page link and go to the area where the image map is to be installed
 +
*[[Help:Image_maps#12. To install your image map|Install]] the image map onto the target page using standard template format
 +
::::'''<nowiki>{{</nowiki> (template name) <nowiki>}}</nowiki>'''<br><br>
 +
*Click on the “show preview” link near the bottom of the edit box.
 +
*Verify the correct positioning and size of the image.
 +
::'''Note:''' If the standard image map coding was used and the image size needs adjusting, it will be necessary to open another browser tab, '''return to the template page''', open it for editing, adjust the image size, save the changes, return to the target editing page, and click on the “show preview” again.  This will have to be repeated again and again until sized properly (and you have to hope that ''someone else does not adjust the image size in the template to fit their page''). <br>
 +
::'''Better yet:''' If the [[Help:Image_maps#Trick of the Trade|alternative coding]] was installed when the template was created, then it is only necessary to adjust the template input parameter while still in the target page’s edit box (''this sizing is independent of the template'').<br>
 +
::::'''<nowiki>{{</nowiki>''' (template name) '''|''' (<font color="maroon">image size</font>)'''px <nowiki>}}</nowiki>''' <br>
 +
::After changing the size click on “show preview” again to check the size and then repeat as necessary. This new coding can be used to upgrade older image maps as well. <br><br>
 +
 
 +
*Save the target page.
 +
*Verify that all the image map links are functioning properly.
 +
</div>
 +
<!-------------------------------------------->
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
----
 +
Check out this '''Trick of the Trade''' (an alternative '''EASIER''' method for sizing image maps)
 +
''<center>Are you tired of going back and forth between the page you are editing</center><center> and the image map template just to adjust the image size?</center>''<br>
 +
''<center>Do you want to avoid making multiple copies of the same template in order to </center><center>use the same image map on different pages with different image sizes?</center>''<br>
 +
 
 +
:If so, check out the new '''[[Help:Image maps#Trick of the Trade|Trick of the trade]]''' in this help article for the solution.
 +
----
 +
 
 +
 
 +
 
 +
===STEPS for using the image map editor===
 
==== 1. Upload your image ====
 
==== 1. Upload your image ====
  
*Upload into FamilySearch Wiki the image you want to make into an image map.
+
*[[Help:Submitting_images_for_approval|Upload]] into FamilySearch Wiki the image you want to make into an image map.
  
 
==== 2. Copy the URL for the image ====
 
==== 2. Copy the URL for the image ====
  
*'''Right click on the image and choose ''Copy image URL'''''.  
+
*Find the file for the approved image that is now within this Research Wiki by searching the image name or by using [[Special:ListFiles|ListFiles]] to check recently uploaded files.
 +
*Right click on the image and choose ''Copy image URL''.  
 
*Note '''do not copy the URL from the browser window''', it will not work.
 
*Note '''do not copy the URL from the browser window''', it will not work.
  
 
==== 3. Open the Image Map Editor ====
 
==== 3. Open the Image Map Editor ====
 
+
'''NOTE:''' The link to the previous Image Map Editor is currently unavailable due to '''User account expired'''.  The following replacement is is an alternative editor.  These directions have been updated to reflect the new editor.  Please report any issues or suggestions for other editor options that could also be included here.
*Open [https://toolserver.org/~dapete/ImageMapEdit/ImageMapEdit.html?en%7CImageMap Editor]
+
*Open [http://www.maschek.hu/imagemap/imgmap Editor]
 +
[[File:Screenshot Image map editor.jpg|center|600px|www.maschek.hu/imagemap/imgmap]]
  
 
==== 4. Load image into editor ====
 
==== 4. Load image into editor ====
  
*Paste the URL into "Load from URL."  
+
*Paste the URL (as obtained in Step 2) into "image on the Internet" box of the editor.  
*In Name box, copy and paste the file name of the image with its extension (jpg, png, etc).  
+
*Click "accept" (or use the check mark).  
*Click Load.  
+
 
*The image will show up in the image box immediately below.  
 
*The image will show up in the image box immediately below.  
*If image does not display, you have a problem with the URL.
+
*If image does not display, you have a problem with the URL and should return to Step 2.
  
==== 5. Select category of area being outlined ====
+
==== 5. Open an area section and select the desired shape ====
  
*Below the image box is the '''Areas''' box.  
+
*In the ''Image Map Area'' of the editor click on the plus (+) icon to open a new shape section.  
*Depending on the shape of the image, select the correct category: Rectangle, Circle or Polygon.  
+
*Note: The minus (-) icon is used to delete the currently selected section (a black dot in the circle to the left of the shape section shows the current selection).
 +
*Select the area type you wish to create: 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.  
 
*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.
+
::'''Note:''' You cannot save the coding within the editor itself so it is suggested that for large projects with many defined areas that the coding should be routinely saved to the template page or to any other software such as a Notepad or Microsoft Word file for safe keeping. <br>
  
==== 6. Install links and title ====
+
==== 6. Define the areas within the image ====
 +
=====Circles and Rectangles=====
 +
*Go back up to the image box and '''left click''' near the desired area in the image.
 +
*Drag the cursor away from the initial point (for circles and rectangles) to enlarge the shape.
 +
*Note: Hold down the '''shift''' key to change a rectangle into a square.
 +
*'''Left click - HOLD''' inside the shape to move it to the proper location.
 +
*Move the cursor over the shape boundary until arrows appear then '''left click - HOLD''' to resize the shape to cover the desired area. Repeat as necessary.
 +
*Note: For the circles and rectangles the arrows will appear on the top, bottom, and sides.
 +
*Note: You could also type number changes directly into the coordinates box if desired.
 +
=====Polygons=====
 +
*The creation of the polygons is a little more complicated.
 +
*'''Left click''' 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 polygon's area.
 +
*As you progress along the borders, the area will become shaded.
 +
*To "close" the polygon hold down the '''shift'''' key while marking the ''second to last'' point at which time the border will connect back to the starting point.
 +
*Note: Polygons cannot be resized (they must be redrawn). Select the appropriate shape section by clicking in the circle to the left of the shape selection box (black dot will move there).
 +
*Move the cursor to the new start point on the image and left click once the cursor cross hairs are visible.  This will erase the old polygon when the new one is started.
  
*Put the link to the article in the Wiki for the area you are outlining on your image map.  
+
==== 7. Install links and title ====
*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 ====
+
*Put the link to the article in the Wiki for the area you are outlining into the "Href:" box for the current shape section.  
 
+
*Or use the URL for a site outside of the wiki.  
*Go back up to the image box and you will see a cross.  
+
*Next, enter the title (tool tip description) in the "Alt:" box.  This will display the tool tip that will appear as the cursor is hovered over that specific area of the image.
*Place the cross on the starting point of the area to be selected.  
+
*If you only have one area to install, click "Enter" after you have type in both the "Href:" and "Alt:" boxes, otherwise they will be added when you click on the + button to add the next area.
*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 ====
 
==== 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.  
+
*After you have finished with the first area, go down to the 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 [[ ]].  
+
*Notice that the link and its name is between the set of double brackets [[ ]]. If you don't see anything between the [[ ]] go back to the "Href:" and "Alt:" boxes and type in the name and tool tip and hit your Enter key.
*You will also notice that area you outlined is shaded so you can see what area has already be covered.
+
*You will also notice that the area you have outlined is now shaded so you can see what areas have already been covered.
  
 
==== 9. Create the next clickable area ====
 
==== 9. Create the next clickable area ====
  
*To create the next clickable area on your image, '''click Polygon again'''.
+
*To create the next clickable area on your image, click on the plus (+) icon to open a new section.  
*It will blank the General box.  
+
*Enter the next link and title as was done above.  
*Enter the next link and title.  
+
*Repeat the above procedures (5 - 8) until all the desired areas have be marked. 
*The cross will appear again so go around the area you want to outline next.  
+
*'''Note:''' For overlapping image map areas, the first drawn area will take precedence over any click-able areas drawn afterwards (the earliest coding takes priority).
*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>
+
<div style="border:5px double red; padding:5px; ">HINT: If you find that the wrong image area is taking precedence when areas overlap, you can correct this problem rather than restarting the image map again from scratch.  You can rearrange the coding you have copied into the template by moving the desired line of coding (the line containing the area type, for instance, "circle" and its coordinates) higher in the list simply by using the copy/paste functions.  This may take a little trial and error to get it functioning properly.</div><br> 
 +
*When you have finished all the areas you want to outline, go to ImageMap extension code again and copy (Cntl C) all the code in the box including <nowiki><imagemap> and </imagemap></nowiki>
  
 
==== 10. Create imagemap template ====
 
==== 10. Create imagemap template ====
  
*Enter in the search box Template:Name of Your Image Map.  
+
*Open a new browser tab (if preferred) and type into the search box a name for the image  map template you want to create, for example, Template:''Name of Your Image Map''.
 +
*If the name you selected is not being used it will appear as a red link. If it is not a red link than you should repeat the procedure until a unique name is identified.
 
*Click on the '''red link''' and then '''edit page'''  to create your template.
 
*Click on the '''red link''' and then '''edit page'''  to create your template.
 +
 +
*Paste in coding you copied from ImageMap extension '''into Wikitext editor''' (''not the Rich Editor'').
 +
 
*<font color="#99000">'''IMPORTANT'''</font> <br> Using the Wikitext editor install this code <font color="#99000"><nowiki><noinclude>__</nowiki>NORICHEDITOR<nowiki>__ </noinclude></nowiki></font> at the top of the page.  This will prevent anyone from opening the file with the Rich Editor which will destroy your code (this is currently the only work-around).
 
*<font color="#99000">'''IMPORTANT'''</font> <br> Using the Wikitext editor install this code <font color="#99000"><nowiki><noinclude>__</nowiki>NORICHEDITOR<nowiki>__ </noinclude></nowiki></font> at the top of the page.  This will prevent anyone from opening the file with the Rich Editor which will destroy your code (this is currently the only work-around).
*Paste in coding you copied from ImageMap extension '''into Wikitext editor''' not the Rich Editor.  
+
 
 +
*Since this image map editor did not allow the addition of the image name (it uses the supplied link information), the image name has to be '''''corrected''''' at this time. 
 +
 
 +
*Also change the image link from an external link to an internal link (remove the https....).
 +
**For example, if the URL in your imagemap code is "<nowiki>https://familysearch.org/learn/wiki/en/images/3/3c/</nowiki><font color="maroon">Mexico_states-1000px.png</font>?1406320063521",
 +
**you need to change this to "'''Mexico_states-1000px.png'''".
 +
 
 +
*Also include the following code at the bottom of the edit page to designate a category for the template: '''<nowiki><noinclude>[[Category:Image map templates]]</noinclude></nowiki>'''
 +
 
*Save the template.  
 
*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.  
+
*You should see the image and when you put your mouse on the various areas you selected, you should see a tool tip with the title of the area.  
*Click on the area to see if your links are ok.
+
*Click on each link you created to ensure that they are functioning properly.
 +
<div style="border:5px double red; padding:5px; ">HINT: If you are having a hard time working with a map that has many small areas to outline, break up the entries.  Do a few items and install this coding into the template you are creating.  Refresh the editor and put in the same map.  Then continue with new areas.  Copy only the new coding and paste it after the last area that appears in the template but before the closing tag  '''<nowiki></imagemap></nowiki>'''.<br>
 +
This new image map editor also has a zoom feature wherein the image can be magnified either 200% or 300% (range is from 25% to 300%) so that outlining smaller areas is much easier.</div>
  
==== 11. Limit size of image map ====
+
==== 11. Limit the size of the image map ====
  
 
*The image will be the size it was uploaded as.
 
*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:  
 
*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="#990000">|400px</font>
 
::::Image:Name of Image.jpg<font color="#990000">|400px</font>
 +
*This specified size will be the image size that will be displayed on the target page for the template.
 +
 +
::::'''Note:''' Also see the '''[[Help:Image_maps#Trick of the Trade|Trick of the Trade]]''' below for an alternative way to size the image on the target page without returning to the template each time.
  
 
==== 12. To install your image map ====
 
==== 12. To install your image map ====
  
*Installed image on page like any template.  
+
*Install the image map (the template)  on a target page like any other template.  
*Type <nowiki>{{Name of image map}}</nowiki> where you want it on the page.  
+
*Type &nbsp;&nbsp;  '''<nowiki>{{</nowiki>''' ''Name of the image map template'' '''<nowiki>}}</nowiki>''' &nbsp;&nbsp;  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.
+
*If the image is still too large or you want to change the size, go back and edit the template by changing the size in pixels as in Step 11 or change the input parameter if the alternative coding method was used (see the '''[[Help:Image_maps#Trick of the Trade|Trick of the Trade]]''' ).
{{Contributor Help badge}}
+
 
 +
<div style="border:5px double red; padding:5px; ">NOTE: '''''An identified issue that may occur with the image map editor.'''''<br>
 +
Some users have encountered an unusual glitch wherein the "Href" and "Alt" information does not get properly recorded in the resulting wikitext code when adding polygons.  This appears to be caused if the editor is not fully refreshed before each use (or if the page is refreshed or the browser is restarted with the page already open).
 +
*At this time It is recommended that the editor either be reopened for each use or it can also be refreshed using the ''"online editor"'' link found in the left sidebar on the '''''editor's page'''''.
 +
*If this occurs during use, the Href and Alt information can be erased and re-entered which should properly put it into the code.
 +
*The Href and Alt information could also be entered manually after pasting the code onto the template page.
 +
Please continue to report this and any other issues that are encountered when using this new editor.  You can use the [[Help_talk:Image_maps|talk page]] to report any problems.</div>
 +
<br>
 +
{{Submit Forms}}
 +
 
 +
 
 +
== Trick of the Trade ==
 +
 
 +
An alternative coding option for the imagemap extension
 +
*''Are you tired of going back and forth between the page you are editing and the image map template just to adjust the image size?''
 +
*''Do you want to avoid making multiple copies of the same template in order to use the same image map on different pages with different image sizes?''
 +
 
 +
By making a minor adjustment to the coding already generated using the image map editor, the image size can be selected while on the edited (''target'') page using an input parameter instead of accessing the template each time.  For example, using the template call of <nowiki>{{HubEightBullet1|400px}}</nowiki> will transclude the HubEightBullet1 image map that is 400 pixels in size.
 +
 
 +
:*Follow the directions above for creating the template coding using the image map editor by copying the editor code onto the template page using wikitext (not the RichEditor).
 +
 
 +
:*'''''Replace''''' the initial wikitext '''<font color="#99000">< imagemap ></font>''' and the <font color="#99000">Image:''name''.jpg'''|640px'''</font> coding by substituting the following:
 +
 
 +
::::'''<nowiki>{{#tag:imagemap|</nowiki>'''<br>
 +
::::<nowiki>Image:</nowiki>''name''.jpg '''<nowiki>{{!}}{{{1|640px}}}</nowiki>'''<br><br>
 +
 
 +
:*'''''Replace''''' the ending '''<font color="#99000">< /imagemap ></font>''' with the closing braces '''<nowiki>}}</nowiki>'''
 +
 
 +
In this example this coding will make the default size 640px if no parameter is used while allowing the image size to be changed to various sizes on multiple pages by using the template input parameter.  Changing the image map size can also be changed at any time by simply changing the input parameter value on the page being edited. 
 +
 
 +
See the template ''[[Template:HubEightBullet1| HubEightBullet1]]'' as an example of the coding changes.  Within this template there is the extra code <nowiki>{{{1}}}</nowiki> to display the parameter value (this code should not be included in your image map template).
 +
 
 +
<div style="position:relative; top:20px; left:0px; width:1000px; height:750px; ">
 +
'''Example of multiple sizing of the same image map template'''
 +
<div style="position:absolute; top:25px; left:0px; ">
 +
{{HubEightBullet1|75px}}
 +
</div>
 +
<div style="position:absolute; top:40px; left:75px; ">
 +
{{HubEightBullet1|150px}}
 +
</div>
 +
<div style="position:absolute; top:40px; left:225px; ">
 +
{{HubEightBullet1|300px}}
 +
</div>
 +
<div style="position:absolute; top:40px; left:525px; ">
 +
{{HubEightBullet1|500px}}
 +
</div>
 +
<div style="position:absolute; top:375px; left:0px; width:460px">
 +
'''Updating existing templates'''<br><br>
 +
The older existing templates can also be updated with the new coding and if desired, the previously used image size can be used as the default value. For example, for a current image size of 640 pixels, the parameter default ( <font color="maroon">'''Image:'''''image name''.jpg <nowiki>{{!}}{{{1|</nowiki>'''640px'''<nowiki>}}}</nowiki></font> ) could be specified to be the current image size that was used in the original coding.  This would ensure that the existing template calls would not have to be modified but could still be changed at any time simply by adding a new input parameter.<br><br>
 +
 
 +
'''Quick reminder:''' The parameter input when calling the template must include the <font color="maroon">'''px'''</font> after the image size number for the code to function properly.  This is slightly different than the conventional use of the input parameter which may only require a number.
 +
</div>
 +
</div>{{Submit Forms}}
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
== Example from Image Map Editor ==
 +
'''Note: This is an example that was made using the original image map editor.'''
  
== 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.  
 
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.  
# 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.
+
# Go to [[:File: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.
 
# Right click the image and choose "Copy image URL."  
 
# Right click the image and choose "Copy image URL."  
# Go to [http://tools.wikimedia.de/~dapete/ImageMapEdit/ImageMapEdit.html?en 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.
+
# Go to [http://www.maschek.hu/imagemap/imgmap 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.
 
#Click load
 
#Click load
 
#The image will then load.
 
#The image will then load.
Line 112: Line 254:
 
*You can use the ImageMap extension and the ImageMap editor to define multiple regions within your image that link to different pages.
 
*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 [http://www.mediawiki.org/wiki/Extension:ImageMap MediaWiki].
 
*You can learn more about some advanced applications of the ImageMap extension at [http://www.mediawiki.org/wiki/Extension:ImageMap 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.
+
*It's a good idea to get familiar with new tools by playing with them in the [[Help:Practice_editing_in_your_Sandbox|sandbox]] before trying them out on full articles. If you are a registered user, here is the link to '''[[Special:MyPage/Sandbox|Your]]''' sandbox.
  
 
== Sources and Citations ==
 
== Sources and Citations ==
  
*[http://www.mediawiki.org/wiki/Extension:ImageMap MediaWiki ImageMap Extension and documentation]
+
*[http://www.mediawiki.org/wiki/Extension:ImageMap MediaWiki ImageMap extension and documentation]
*[http://tools.wikimedia.de/~dapete/ImageMapEdit/ImageMapEdit.html?en ImageMap editor]
+
*The original [http://tools.wikimedia.de/~dapete/ImageMapEdit/ImageMapEdit.html?en ImageMap editor] '''(currently a dead end link (but it may be revived)'''
 +
*[http://www.maschek.hu/imagemap/imgmap New ImageMap editor]
  
 
{{Contributor help-navbox}} {{Editing help}}
 
{{Contributor help-navbox}} {{Editing help}}
Line 124: Line 267:
  
 
__NORICHEDITOR__
 
__NORICHEDITOR__
 +
 +
{{Auto-outdated|90}}<br><br>
  
 
[[Category:Help|{{PAGENAME}}]]
 
[[Category:Help|{{PAGENAME}}]]

Latest revision as of 22:03, 9 February 2015

This article provides access to an image map editor and the step by step instructions for creating multiple links within a single image.

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


Contents


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, specify a particular area within the image, 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.


Wiki image maps are as Easy as 1-2-3!

This is a   condensed outline  of this article with links to the details that follow.


ONE. Using the on-line editor

  • Copy the Uniform Resource Locator (URL) from the image page for an image already uploaded to the wiki. Use the mouse “right click” option and select “copy image location”. Do not use the browser URL which will not work.
  • Open the external image map editor and paste the copied URL into the box as shown in the screenshot below so your image is displayed in the editor and the editor is ready to accept your input.
  • Define the areas of the image that you want to act as links. The proper use of a image map would suggest anywhere from at least 2 to possibly hundreds of such areas would have to be defined.
  • Type or paste the linking information (the link target and description) into the editor so it is added to the correct coordinate coding that is generated by the editor.
  • Repeat as necessary until all the link areas are defined.
Note: You cannot save the coding within the editor itself so it is suggested that for large projects with many defined areas that the coding should be routinely saved to the template page or to any other software such as a Notepad or Microsoft Word file for safe keeping.


TWO. Create the template

  • Create the image map template in the wiki by creating a title and a new blank page
  • Copy and paste the contents of the editor into this new page as well as some important coding described in these instructions.
  • Adjust the image size of the template either to the current maximum of 640px or a smaller size if desired.
You can make some minor code adjustments so that the image size is easier to adjust “on the fly” and this alternative coding will also eliminate the need to make numerous template which each have a different size image.

  • Save the template and test that the links are working properly. Correct if necessary.


THREE. Add the template to the page

  • When on the target page click on the edit page link and go to the area where the image map is to be installed
  • Install the image map onto the target page using standard template format
{{ (template name) }}

  • Click on the “show preview” link near the bottom of the edit box.
  • Verify the correct positioning and size of the image.
Note: If the standard image map coding was used and the image size needs adjusting, it will be necessary to open another browser tab, return to the template page, open it for editing, adjust the image size, save the changes, return to the target editing page, and click on the “show preview” again. This will have to be repeated again and again until sized properly (and you have to hope that someone else does not adjust the image size in the template to fit their page).
Better yet: If the alternative coding was installed when the template was created, then it is only necessary to adjust the template input parameter while still in the target page’s edit box (this sizing is independent of the template).
{{ (template name) | (image size)px }}
After changing the size click on “show preview” again to check the size and then repeat as necessary. This new coding can be used to upgrade older image maps as well.

  • Save the target page.
  • Verify that all the image map links are functioning properly.







Check out this Trick of the Trade (an alternative EASIER method for sizing image maps)

Are you tired of going back and forth between the page you are editing
and the image map template just to adjust the image size?

Do you want to avoid making multiple copies of the same template in order to
use the same image map on different pages with different image sizes?

If so, check out the new Trick of the trade in this help article for the solution.


STEPS for using the image map editor

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

  • Find the file for the approved image that is now within this Research Wiki by searching the image name or by using ListFiles to check recently uploaded files.
  • Right click on the image and choose Copy image URL.
  • Note do not copy the URL from the browser window, it will not work.

3. Open the Image Map Editor

NOTE: The link to the previous Image Map Editor is currently unavailable due to User account expired. The following replacement is is an alternative editor. These directions have been updated to reflect the new editor. Please report any issues or suggestions for other editor options that could also be included here.

www.maschek.hu/imagemap/imgmap

4. Load image into editor

  • Paste the URL (as obtained in Step 2) into "image on the Internet" box of the editor.
  • Click "accept" (or use the check mark).
  • The image will show up in the image box immediately below.
  • If image does not display, you have a problem with the URL and should return to Step 2.

5. Open an area section and select the desired shape

  • In the Image Map Area of the editor click on the plus (+) icon to open a new shape section.
  • Note: The minus (-) icon is used to delete the currently selected section (a black dot in the circle to the left of the shape section shows the current selection).
  • Select the area type you wish to create: 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.
Note: You cannot save the coding within the editor itself so it is suggested that for large projects with many defined areas that the coding should be routinely saved to the template page or to any other software such as a Notepad or Microsoft Word file for safe keeping.

6. Define the areas within the image

Circles and Rectangles
  • Go back up to the image box and left click near the desired area in the image.
  • Drag the cursor away from the initial point (for circles and rectangles) to enlarge the shape.
  • Note: Hold down the shift key to change a rectangle into a square.
  • Left click - HOLD inside the shape to move it to the proper location.
  • Move the cursor over the shape boundary until arrows appear then left click - HOLD to resize the shape to cover the desired area. Repeat as necessary.
  • Note: For the circles and rectangles the arrows will appear on the top, bottom, and sides.
  • Note: You could also type number changes directly into the coordinates box if desired.
Polygons
  • The creation of the polygons is a little more complicated.
  • Left click 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 polygon's area.
  • As you progress along the borders, the area will become shaded.
  • To "close" the polygon hold down the shift' key while marking the second to last point at which time the border will connect back to the starting point.
  • Note: Polygons cannot be resized (they must be redrawn). Select the appropriate shape section by clicking in the circle to the left of the shape selection box (black dot will move there).
  • Move the cursor to the new start point on the image and left click once the cursor cross hairs are visible. This will erase the old polygon when the new one is started.

7. Install links and title

  • Put the link to the article in the Wiki for the area you are outlining into the "Href:" box for the current shape section.
  • Or use the URL for a site outside of the wiki.
  • Next, enter the title (tool tip description) in the "Alt:" box. This will display the tool tip that will appear as the cursor is hovered over that specific area of the image.
  • If you only have one area to install, click "Enter" after you have type in both the "Href:" and "Alt:" boxes, otherwise they will be added when you click on the + button to add the next area.

8. Check the coordinates in the ImageMap box

  • After you have finished with the first area, go down to the 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 double brackets [[ ]]. If you don't see anything between the [[ ]] go back to the "Href:" and "Alt:" boxes and type in the name and tool tip and hit your Enter key.
  • You will also notice that the area you have outlined is now shaded so you can see what areas have already been covered.

9. Create the next clickable area

  • To create the next clickable area on your image, click on the plus (+) icon to open a new section.
  • Enter the next link and title as was done above.
  • Repeat the above procedures (5 - 8) until all the desired areas have be marked.
  • Note: For overlapping image map areas, the first drawn area will take precedence over any click-able areas drawn afterwards (the earliest coding takes priority).
HINT: If you find that the wrong image area is taking precedence when areas overlap, you can correct this problem rather than restarting the image map again from scratch. You can rearrange the coding you have copied into the template by moving the desired line of coding (the line containing the area type, for instance, "circle" and its coordinates) higher in the list simply by using the copy/paste functions. This may take a little trial and error to get it functioning properly.

  • When you have finished all the areas you want to outline, go to ImageMap extension code again and copy (Cntl C) all the code in the box including <imagemap> and </imagemap>

10. Create imagemap template

  • Open a new browser tab (if preferred) and type into the search box a name for the image map template you want to create, for example, Template:Name of Your Image Map.
  • If the name you selected is not being used it will appear as a red link. If it is not a red link than you should repeat the procedure until a unique name is identified.
  • Click on the red link and then edit page to create your template.
  • Paste in coding you copied from ImageMap extension into Wikitext editor (not the Rich Editor).
  • IMPORTANT
    Using the Wikitext editor install this code <noinclude>__NORICHEDITOR__ </noinclude> at the top of the page. This will prevent anyone from opening the file with the Rich Editor which will destroy your code (this is currently the only work-around).
  • Since this image map editor did not allow the addition of the image name (it uses the supplied link information), the image name has to be corrected at this time.
  • Also change the image link from an external link to an internal link (remove the https....).
    • For example, if the URL in your imagemap code is "https://familysearch.org/learn/wiki/en/images/3/3c/Mexico_states-1000px.png?1406320063521",
    • you need to change this to "Mexico_states-1000px.png".
  • Also include the following code at the bottom of the edit page to designate a category for the template: <noinclude>[[Category:Image map templates]]</noinclude>
  • Save the template.
  • You should see the image and when you put your mouse on the various areas you selected, you should see a tool tip with the title of the area.
  • Click on each link you created to ensure that they are functioning properly.
HINT: If you are having a hard time working with a map that has many small areas to outline, break up the entries. Do a few items and install this coding into the template you are creating. Refresh the editor and put in the same map. Then continue with new areas. Copy only the new coding and paste it after the last area that appears in the template but before the closing tag </imagemap>.
This new image map editor also has a zoom feature wherein the image can be magnified either 200% or 300% (range is from 25% to 300%) so that outlining smaller areas is much easier.

11. Limit the size of the 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
  • This specified size will be the image size that will be displayed on the target page for the template.
Note: Also see the Trick of the Trade below for an alternative way to size the image on the target page without returning to the template each time.

12. To install your image map

  • Install the image map (the template) on a target page like any other template.
  • Type    {{ Name of the image map template }}    where you want it on the page.
  • If the image is still too large or you want to change the size, go back and edit the template by changing the size in pixels as in Step 11 or change the input parameter if the alternative coding method was used (see the Trick of the Trade ).
NOTE: An identified issue that may occur with the image map editor.

Some users have encountered an unusual glitch wherein the "Href" and "Alt" information does not get properly recorded in the resulting wikitext code when adding polygons. This appears to be caused if the editor is not fully refreshed before each use (or if the page is refreshed or the browser is restarted with the page already open).

  • At this time It is recommended that the editor either be reopened for each use or it can also be refreshed using the "online editor" link found in the left sidebar on the editor's page.
  • If this occurs during use, the Href and Alt information can be erased and re-entered which should properly put it into the code.
  • The Href and Alt information could also be entered manually after pasting the code onto the template page.
Please continue to report this and any other issues that are encountered when using this new editor. You can use the talk page to report any problems.


Nuvola apps kopete.png
Have comments or fixes to report
Use Feedback. the talk page or submit form
Your voice is important to us



Trick of the Trade

An alternative coding option for the imagemap extension

  • Are you tired of going back and forth between the page you are editing and the image map template just to adjust the image size?
  • Do you want to avoid making multiple copies of the same template in order to use the same image map on different pages with different image sizes?

By making a minor adjustment to the coding already generated using the image map editor, the image size can be selected while on the edited (target) page using an input parameter instead of accessing the template each time. For example, using the template call of {{HubEightBullet1|400px}} will transclude the HubEightBullet1 image map that is 400 pixels in size.

  • Follow the directions above for creating the template coding using the image map editor by copying the editor code onto the template page using wikitext (not the RichEditor).
  • Replace the initial wikitext < imagemap > and the Image:name.jpg|640px coding by substituting the following:
{{#tag:imagemap|
Image:name.jpg {{!}}{{{1|640px}}}

  • Replace the ending < /imagemap > with the closing braces }}

In this example this coding will make the default size 640px if no parameter is used while allowing the image size to be changed to various sizes on multiple pages by using the template input parameter. Changing the image map size can also be changed at any time by simply changing the input parameter value on the page being edited.

See the template HubEightBullet1 as an example of the coding changes. Within this template there is the extra code {{{1}}} to display the parameter value (this code should not be included in your image map template).

Example of multiple sizing of the same image map template

75px - display size

first linksecond linkHub blank2.jpg



150px - display size

first linksecond linkHub blank2.jpg



300px - display size

first linksecond linkHub blank2.jpg



500px - display size

first linksecond linkHub blank2.jpg



Updating existing templates

The older existing templates can also be updated with the new coding and if desired, the previously used image size can be used as the default value. For example, for a current image size of 640 pixels, the parameter default ( Image:image name.jpg {{!}}{{{1|640px}}} ) could be specified to be the current image size that was used in the original coding. This would ensure that the existing template calls would not have to be modified but could still be changed at any time simply by adding a new input parameter.

Quick reminder: The parameter input when calling the template must include the px after the image size number for the code to function properly. This is slightly different than the conventional use of the input parameter which may only require a number.

Nuvola apps kopete.png
Have comments or fixes to report
Use Feedback. the talk page or submit form
Your voice is important to us






Example from Image Map Editor

Note: This is an example that was made using the original image map editor.

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 File: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. Right click the image and choose "Copy image URL."
  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. If you are a registered user, here is the link to Your sandbox.

Sources and Citations






  • This page was last modified on 9 February 2015, at 22:03.
  • This page has been accessed 5,582 times.