In this article, we will be talking about how to hyperlink an image. If you are having difficulties or need any further clarification, please contact WebTraining@bhsu.edu for assistance. Below you will find the written instructions, a printable file for your convenience and you can watch a short video as well.

Linking images can be very helpful for your audience. This can help them navigate through your webpage and make it much more user-friendly. To start the process, make sure you are logged in.

  1. First, navigate to the module that contains the image you wish to hyperlink and click on, Edit Content.
    Go to Edit Content
    NOTE: Check out the Inserting a Picture Tutorial if you need more information on inserting a picture.
     
  2. The edit content page will come up and the next step is to either
    (a.) Right click on the image you wish to hyperlink and select Image Properties
    Right click on the image        
    or (b.) Select the image and then click the Insert/Edit Image icon in the navigation bar.
    Or click on the Insert/Edit Image Button
     
  3. This will bring up the Image Properties window. Click on the Link tab.
    Click on the Link tab
  4. Select the URL radio button, then in the URL: field, you may type in or paste in a web address.
    NOTE: Additional options include linking to a file, or to a page on your site. For example, I linked this image to my Art Gallery. To do this, select the radio button Page ( A Page on Your Site ). Then in URL: dropdown menu, select the desired page.
    Find the page or file in the Link Gallery
     
  5. Click Use selected link in the bottom left corner of the Link Gallery window.
  6. On the Image Properties window, a blue border around the picture in your preview window will appear. This is a quick way to know that you have successfully hyperlinked the image. This blue border will not appear on the actual page.
    The image will have a blue border so you know it is hyperlinked
  7. Important Things to Remember:
    • Enter Alternative Text if it is not already there.
      This is important for screen readers and search engines and will show up when a user hovers over the image. When you have hyperlinked an image, this can be especially important to let them know it is hyperlinked. For example, I am going to enter “Click here to see my Art Gallery”.
    • Under the Link tab, there is a dropdown menu labeled Target. It is important to select New Window when you are sending a user somewhere other than your website you are currently on. For example, if I wanted to send a user to www.cnn.com, I would want to use New Window so they can see the link in a window that pops up and continue to follow along on my webpage.
  8. Click OK on the Image Properties window.
  9. Click Save.

Do you want to print out the instructions? Download the printable version of How to Hyperlink an Image.

 

Oops! Looks like you don't have Javascript enabled, or don't have Flash Player installed.

 

If you have any questions about this or any other posting, please feel free to contact us.

Actions: E-mail | Bookmark |