Template:ImageMap

From 2009.igem.org

(Difference between revisions)
m
(Explanation of image map.)
Line 1: Line 1:
-
<html>
+
<noinclude>An image map (using just rectangular regions) with rollover effects can be created using this template (if the necessary images are available already). For example (note that it is important not to prepend the URLs with <code><nowiki>https://2009.igem.org</nowiki></code>, as this will cause them to be expanded img tags...):
 +
 
 +
<pre>
 +
{{imageMap|imap|/wiki/images/8/89/Arsenic_Filtering_System.png|604|400|
 +
{{imageMapLink|arsenic|36|0|145|68|/wiki/images/2/2d/Arsenic_Filtering_System_-_Arsenic.png}}
 +
{{imageMapLink|transport|65|54|116|120|/wiki/images/4/44/Arsenic_Filtering_System_-_Transport.png}}
 +
{{imageMapLink|accumulation|152|147|163|63|/wiki/images/8/84/Arsenic_Filtering_System_-_Accumulation.png}}
 +
{{imageMapLink|gas|400|90|136|97|/wiki/images/7/72/Arsenic_Filtering_System_-_Gas_Vesicles.png}}
 +
{{imageMapLink|promoter|111|291|168|61|/wiki/images/5/5c/Arsenic_Filtering_System_-_Promoter.png}}
 +
}}<html><center>
 +
<ul id="imap">
 +
<li id="arsenic"></html>It all starts with [[Team:Groningen/Vision|arsenic]] in solution.<html></li>
 +
<li id="transport"></html>[[Team:Groningen/Project/Transport|Metal transport]]<html></li>
 +
<li id="accumulation"></html>[[Team:Groningen/Project/Accumulation|Metal accumulation]]<html></li>
 +
<li id="gas"></html>[[Team:Groningen/Project/Vesicle|Gas Vesicle]]<html></li>
 +
<li id="promoter"></html>[[Team:Groningen/Project/Promoters|Metal sensitive promoters]]<html></li>
 +
</ul>
 +
</center></html>
 +
</pre>
 +
 
 +
Generates:
 +
 
 +
{{imageMap|imap|/wiki/images/8/89/Arsenic_Filtering_System.png|604|400|
 +
{{imageMapLink|arsenic|36|0|145|68|/wiki/images/2/2d/Arsenic_Filtering_System_-_Arsenic.png}}
 +
{{imageMapLink|transport|65|54|116|120|/wiki/images/4/44/Arsenic_Filtering_System_-_Transport.png}}
 +
{{imageMapLink|accumulation|152|147|163|63|/wiki/images/8/84/Arsenic_Filtering_System_-_Accumulation.png}}
 +
{{imageMapLink|gas|400|90|136|97|/wiki/images/7/72/Arsenic_Filtering_System_-_Gas_Vesicles.png}}
 +
{{imageMapLink|promoter|111|291|168|61|/wiki/images/5/5c/Arsenic_Filtering_System_-_Promoter.png}}
 +
}}<html><center>
 +
<ul id="imap">
 +
<li id="arsenic"></html>It all starts with [[Team:Groningen/Vision|arsenic]] in solution.<html></li>
 +
<li id="transport"></html>[[Team:Groningen/Project/Transport|Metal transport]]<html></li>
 +
<li id="accumulation"></html>[[Team:Groningen/Project/Accumulation|Metal accumulation]]<html></li>
 +
<li id="gas"></html>[[Team:Groningen/Project/Vesicle|Gas Vesicle]]<html></li>
 +
<li id="promoter"></html>[[Team:Groningen/Project/Promoters|Metal sensitive promoters]]<html></li>
 +
</ul>
 +
</center></html>
 +
</noinclude><includeonly><html>
<!-- Based on the nice example at http://ago.tanfa.co.uk/css/examples/europe-map.html -->
<!-- Based on the nice example at http://ago.tanfa.co.uk/css/examples/europe-map.html -->
<style>
<style>
Line 9: Line 46:
</html>{{{5}}}<html>
</html>{{{5}}}<html>
</style>
</style>
-
</html>
+
</html></includeonly>

Revision as of 11:12, 18 August 2009

An image map (using just rectangular regions) with rollover effects can be created using this template (if the necessary images are available already). For example (note that it is important not to prepend the URLs with https://2009.igem.org, as this will cause them to be expanded img tags...): 

{{imageMap|imap|/wiki/images/8/89/Arsenic_Filtering_System.png|604|400|
{{imageMapLink|arsenic|36|0|145|68|/wiki/images/2/2d/Arsenic_Filtering_System_-_Arsenic.png}}
{{imageMapLink|transport|65|54|116|120|/wiki/images/4/44/Arsenic_Filtering_System_-_Transport.png}}
{{imageMapLink|accumulation|152|147|163|63|/wiki/images/8/84/Arsenic_Filtering_System_-_Accumulation.png}}
{{imageMapLink|gas|400|90|136|97|/wiki/images/7/72/Arsenic_Filtering_System_-_Gas_Vesicles.png}}
{{imageMapLink|promoter|111|291|168|61|/wiki/images/5/5c/Arsenic_Filtering_System_-_Promoter.png}}
}}<html><center>
<ul id="imap">
<li id="arsenic"></html>It all starts with [[Team:Groningen/Vision|arsenic]] in solution.<html></li>
<li id="transport"></html>[[Team:Groningen/Project/Transport|Metal transport]]<html></li>
<li id="accumulation"></html>[[Team:Groningen/Project/Accumulation|Metal accumulation]]<html></li>
<li id="gas"></html>[[Team:Groningen/Project/Vesicle|Gas Vesicle]]<html></li>
<li id="promoter"></html>[[Team:Groningen/Project/Promoters|Metal sensitive promoters]]<html></li>
</ul>
</center></html>

Generates:

Retrieved from "http://2009.igem.org/Template:ImageMap"