Template:ImageMap

From 2009.igem.org

(Difference between revisions)
m (Make id mandatory.)
m
 
(3 intermediate revisions not shown)
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>
-
#{{1}} { display: block; width: {{3}}px; height: {{4}}px; position: relative; margin: 10px;
+
#</html>{{{1}}}<html> { display: block; width: </html>{{{3}}}<html>px; height: </html>{{{4}}}<html>px;
-
        background: url({{2}}) no-repeat; }
+
                      position: relative; margin: 10px;
-
#imap li { margin: 0; padding: 0; list-style: none; display: block; text-indent: -9999px; }
+
                      background: url(</html>{{{2}}}<html>) no-repeat; }
-
#imap a { display: block; text-decoration: none; position: absolute; }
+
#</html>{{{1}}}<html> li { margin: 0; padding: 0; list-style: none; display: block; text-indent: -9999px; }
-
{{5}}
+
#</html>{{{1}}}<html> a { display: block; text-decoration: none; position: absolute; }
 +
</html>{{{5}}}<html>
</style>
</style>
-
</html>
+
</html></includeonly>

Latest revision as of 14:08, 14 September 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"