Difference between revisions of "Reference:ImageMap"

[unchecked revision][unchecked revision]


The extension ImageMap allows you to link specific parts of an image in your wiki to internal or external pages.

Use[edit | edit source]

Imagemaps can e.g. be very helpful if you want to link the individual steps of a process diagram for in-depth study. Another example would be a picture of a meeting agenda, where you can add links to the various presentations held.

How does ImageMapEdit work?[edit | edit source]

ImageMapEdit is just a tool that generates code. You can then copy this code an insert it into the respective article. You can find access to the tool on the metapage of the file.

Create an ImageMap[edit | edit source]

Choose the desired picture and click on it to open the metapage of the file. You can also directly call up the picture via the URL, e.g.

http://wiki.company.de/index.php/Datei:WikiData_Model.png

You will be forwarded to the file page of the picture. Below the picture you will find the meta data, as well as an access to "ImageMapEdit":

Screenshot: Access to ImageMapEdit can be found under the picture

Click on the button "ImageMapEdit>" to open the "ImageMap" tool.


You will see the following dialogue:

Screenshot:Edit a picture as ImageMap
  1. Choose the form of your link selection in the box "Create new area".
    1. Rectangle: Left-click on the spot in the picture where you want to start your selection (left/top corner). Afterwards right-click on the spot where you want to end the selection (right/bottom corner). You chosen area will be highlighted in red.
    2. Circle: Left-click on the picture to create a circular area. If you want to enlarge the area you can enter a larger radius.
    3. Polygon: You can create any form by multiple left-clicks with your mouse.
  2. After highlighting the first area, use the field "link target" to enter the article title you want to link to. You can also enter an optional link title.
  3. Repeat step 1-3 to create other areas.
  4. When finished, copy the code from the field "Generated wikicode" and add it  your your your desired article. Make sure you use the wiki-code editor for this.
Icon-note.png Please note
As soon as you leave the meta page of the picture, the generated code will be deleted. If you want to re-use the code, you should call up the article where you already used the code and copy it from there.


Wiki-code[edit | edit source]

This is how the whole thing looks in wiki-code:

Example:
<imagemap>
Image:Schnelleinstieg.png|center|Schnelleinstieg

rect 145 76 356 98 [[Sales process|Sales process]]
rect 140 173 355 194 [[Support processes|Support processes]]

desc none
</imagemap>

Please note: If you want to link to external pages, you have to manually edit the wiki-code.

Example: Substitute [[Sales process|Sales process]] with [http://www.bluespice.com] to link to an external homepage.

Links[edit | edit source]

Video tutorial[edit | edit source]

This video show the function in BlueSpice 1.20.x. However, ImageMapEdit works the same way in later BlueSpice versions.

__NOTOC__
        

        The extension ImageMap allows you to link specific parts of an image in your wiki to internal or external pages.
        

        ==Use==
        
        Imagemaps can e.g. be very helpful if you want to link the individual steps of a process diagram for in-depth study. Another example would be a picture of a meeting agenda, where you can add links to the various presentations held.
        

        ==How does ImageMapEdit work?==
        
        ImageMapEdit is just a tool that generates code. You can then copy this code an insert it into the respective article. You can find access to the tool on the metapage of the file.
        

        ==Create an ImageMap==
        
        Choose the desired picture and click on it to open the metapage of the file. You can also directly call up the picture via the URL, e.g.
        
<pre>http://wiki.company.de/index.php/Datei:WikiData_Model.png</pre>
        

        You will be forwarded to the file page of the picture. Below the picture you will find the meta data, as well as an access to "ImageMapEdit":
        

        [[File:BlueSpice2-ImageMapEdit-Link.png|thumb|none|700px|Screenshot: Access to ImageMapEdit can be found under the picture]]
        

        Click on the button "ImageMapEdit>" to open the "ImageMap" tool.
        

        You will see the following dialogue:
        

        [[Image:ImagemapEdit-Tool.JPG|thumb|none|700px|Screenshot:Edit a picture as ImageMap]]
        

        # Choose the form of your link selection in the box "Create new area".
        
        ## Rectangle: Left-click on the spot in the picture where you want to start your selection (left/top corner). Afterwards right-click on the spot where you want to end the selection (right/bottom corner). You chosen area will be highlighted in red.
        
        ## Circle: Left-click on the picture to create a circular area. If you want to enlarge the area you can enter a larger radius.
        
        ## Polygon: You can create any form by multiple left-clicks with your mouse.
        
        # After highlighting the first area, use the field "link target" to enter the article title you want to link to. You can also enter an optional link title.
        
        # Repeat step 1-3 to create other areas.
        
        # When finished, copy the code from the field "Generated wikicode" and add it  your your your desired article. Make sure you use the wiki-code editor for this.
        

        {{Box_Hinweis|Hinweis Text =As soon as you leave the meta page of the picture, the generated code will be deleted. If you want to re-use the code, you should call up the article where you already used the code and copy it from there.}}
        

        ==Wiki-code==
        
        This is how the whole thing looks in wiki-code:
        

        Example:<br /><nowiki><imagemap></nowiki><br /><nowiki>Image:Schnelleinstieg.png|center|Schnelleinstieg</nowiki>
        
<nowiki>rect 145 76 356 98 [[Sales process|Sales process]]</nowiki><br />
        <nowiki>rect 140 173 355 194 [[Support processes|Support processes]]</nowiki>
        
<nowiki>desc none</nowiki><br />
        <nowiki></imagemap></nowiki>
        

        '''Please note:''' If you want to link to external pages, you have to manually edit the wiki-code.
        

        Example: Substitute <code><nowiki>[[Sales process|Sales process]]</nowiki></code> with <code><nowiki>[http://www.bluespice.com]</nowiki></code> to link to an external homepage.
        

        ==Links==
        
        * [http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm Self HTML Image Map]
        

        ==Video tutorial==
        
        This video show the function in BlueSpice 1.20.x. However, ImageMapEdit works the same way in later BlueSpice versions.
        
        {{#ev:youtube|aiek1wo4s3o|300}}
        

        [[Category:BlueSpice_docu]]
        
        [[Category:BlueSpice_free]]
        
        [[Category:Extension]]
        
        [[Category:BlueSpice_public]]
        
        [[en:{{FULLPAGENAME}}]][[de:Image Map]]
Line 31: Line 31:
 
# After highlighting the first area, use the field "link target" to enter the article title you want to link to. You can also enter an optional link title.
 
# After highlighting the first area, use the field "link target" to enter the article title you want to link to. You can also enter an optional link title.
 
# Repeat step 1-3 to create other areas.
 
# Repeat step 1-3 to create other areas.
# When finished, copy the code from the field "Generated wikicode" and add it your your desired article. Make sure you use the wiki-code editor for this.
+
# When finished, copy the code from the field "Generated wikicode" and add it  your desired article. Make sure you use the wiki-code editor for this.
  
 
{{Box_Hinweis|Hinweis Text =As soon as you leave the meta page of the picture, the generated code will be deleted. If you want to re-use the code, you should call up the article where you already used the code and copy it from there.}}
 
{{Box_Hinweis|Hinweis Text =As soon as you leave the meta page of the picture, the generated code will be deleted. If you want to re-use the code, you should call up the article where you already used the code and copy it from there.}}

Attachments

Discussions