Display an image in a link

From pmusers
Jump to: navigation, search

JavaScript can be used to display an image in a link.

For example, a link field with the ID "companyLink" needs to display the following image:

40-Creative-Logo-Designs-to-Inspire-You-Movers-logo.jpg

Which is located at the following URL:
https://visme.co/blog/wp-content/uploads/2017/08/40-Creative-Logo-Designs-to-Inspire-You-Movers-logo.jpg

The following JavaScript will insert the image in the link, in place of its text label:

var htmlImg = '<img src="https://visme.co/blog/wp-content/uploads/2017/08/40-Creative-Logo-Designs-to-Inspire-You-Movers-logo.jpg" width="120px">';
$("#companyLink").find("a").html(htmlImg);

ImageInPlaceOfLinkLabel.png

If wishing to display the link's label before the image, then use the following JavaScript code:

var htmlImg = $("#companyLink").find("a").html() +
  ' <img src="https://visme.co/blog/wp-content/uploads/2017/08/40-Creative-Logo-Designs-to-Inspire-You-Movers-logo.jpg" width="120px">';
$("#companyLink").find("a").html(htmlImg);

LinkLabelToLeftOfImage.png

To display the link's label underneath the image, then use the following JavaScript code:

var htmlImg = '<figure>\n'+
'  <img src="https://visme.co/blog/wp-content/uploads/2017/08/40-Creative-Logo-Designs-to-Inspire-You-Movers-logo.jpg" width="80px">\n'+
'  <figcaption style="text-align: center;">'+$("#companyLink").find("a").html()+'</figcaption>\n'+
'</figure>';
$("#companyLink").find("a").html(htmlImg);

LinkLabelUnderImage.png