View source for Proteopedia:Image as clickable link

This page is a supplement to [[Proteopedia:Cookbook#Image as clickable link]].

People tend to click an image expecting it to take them to more about that image, via a hyperlink. Below are various examples of wikitext to do this. 

The examples below go to only one link target, regardless of where you click within the image. If you want to have different targets for different parts of the image, see [[Proteopedia:Cookbook#Imagemaps]]. 


==No Link==
[[Image:Cys-spacefilled.png|100px]]
Clicking this image goes to the image upload page.

<PRE>
[[Image:Cys-spacefilled.png|100px]]
</PRE>

==Simplest Link==

<imagemap>
Image:Cys-spacefilled.png|100px
default [[Introduction to molecular visualization]]
</imagemap>
Clicking this image goes to ''Introduction to molecular visualization''. Clicking the blue circle with "i" goes to the uploaded image.

<PRE>
<imagemap>
Image:Cys-spacefilled.png|100px
default [[Introduction to molecular visualization]]
</imagemap>
</PRE>

Notice the "100px" which specifies the width of the image. The uploaded image is much larger.

==Inside Wikitable==
{|
|-
<imagemap>
Image:Alphafold2-orf8-vs-7jx6-114x124.gif|50px|frame|Clicking this image goes to ''AlphaFold2 examples from CASP 14''.
default [[AlphaFold2 examples from CASP 14]]
</imagemap>
|}
The wikitable |frame| option puts the image and its caption within a frame. By default, it aligns the box at the right side of the page. However, I was unable to get a width specification to work, so here I used a small image at its intrinsic size.
<PRE>
{|
|-
<imagemap>
Image:Alphafold2-orf8-vs-7jx6-114x124.gif|50px|frame|Clicking this image goes to ''AlphaFold2 examples from CASP 14''.
default [[AlphaFold2 examples from CASP 14]]
</imagemap>
|}
</PRE>
{{clear}}

==Inside HTML Table==

<table style="border: 1px solid;background-color:#ffffd8;" align="right"><tr><td>
<imagemap>
Image:Cys-spacefilled.png|100px
default [[Introduction to molecular visualization]]
</imagemap>
</td><td width="15">
</td><td width="200">
Clicking this image goes to ''Introduction to molecular visualization''.
</td></tr></table>

Technical note: In my attempts to use a wikitable
* With |frame| I was unable to specify the width of the image in pixels.
* I was unable to style a border or a background color.
Therefore, here I have used an HTML table for more flexibility. [[User:Eric Martz|Eric Martz]] 22:31, 9 March 2021 (UTC)

<PRE>
<table style="border: 1px solid;background-color:#ffffd8;" align="right"><tr><td>
<imagemap>
Image:Cys-spacefilled.png|100px
default [[Introduction to molecular visualization]]
</imagemap>
</td><td width="15">
</td><td width="200">
Clicking this image goes to ''Introduction to molecular visualization''.
</td></tr></table>
</PRE>