Click on an image and open a new browser tab-CodePudding

I have the following snippet of code:

shinyUI(fluidPage(
  useShinyjs(),
  div(
    div(
      div(
        img(src="img_1.png", filetype="image/png", height="40px", width="120px", style="float: left;")
      ),
      div(
        img(src="img_2.png", filetype="image/png", height="40px", width="80px", style="float: right;")
      ),
      style='display: inline-block; width: 100%;'
    ),
    # rest of code
  )
  # rest of code
))

I would like to link a link to each of the two images, so that when the user clicks on the image (for example img_1.png) a new browser page opens with the chosen link. For example, if I click on img_1.png it opens a new page on the browser and connects to the site "https://en.wikipedia.org/wiki/Main_Page". How can it be done?

CodePudding user response：

use a() tag. add target = "_blank" if you want to open a second tab.

shinyUI(fluidPage(
  useShinyjs(),
  div(
    div(
      div(
        a(href="https://en.wikipedia.org/wiki/Main_Page", img(src="img_1.png", filetype="image/png", height="40px", width="120px", style="float: left;"))
      ),
      div(
        a(href="https://en.wikipedia.org/wiki/Main_Page", img(src="img_2.png", filetype="image/png", height="40px", width="80px", style="float: right;"))
      ),
      style='display: inline-block; width: 100%;'
    ),
    # rest of code
  )
  # rest of code
))