Proteopedia:Image as clickable link

From Proteopedia

Jump to: navigation, search

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.


Contents

No Link

Clicking this image goes to the image upload page.

[[Image:Cys-spacefilled.png|100px]]

Simplest Link

About this image

Clicking this image goes to Introduction to molecular visualization. Clicking the blue circle with "i" goes to the uploaded image.

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

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

Inside Wikitable

Clicking this image goes to ''AlphaFold2 examples from CASP 14''.About this image
Clicking this image goes to ''AlphaFold2 examples from CASP 14''.

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.

{|
|-
<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>
|}

Inside HTML Table

About this image

Clicking this image goes to Introduction to molecular visualization.

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. Eric Martz 22:31, 9 March 2021 (UTC)

<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>

Proteopedia Page Contributors and Editors (what is this?)

Eric Martz

Personal tools