Template:ImageMap

From 2009.igem.org

(Difference between revisions)

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:

@@ Line 42: / Line 42: @@
                        position: relative; margin: 10px;
                        background: url(</html>{{{2}}}<html>) no-repeat; }
-#imap li { margin: 0; padding: 0; list-style: none; display: block; text-indent: -9999px; }
+#</html>{{{1}}}<html> li { margin: 0; padding: 0; list-style: none; display: block; text-indent: -9999px; }
-#imap a { display: block; text-decoration: none; position: absolute; }
+#</html>{{{1}}}<html> a { display: block; text-decoration: none; position: absolute; }
 </html>{{{5}}}<html>
 </style>
 </html></includeonly>