encasing a snippet of code within a customized hyperlink

Here's the following "embed code" for an Instagram photo featuring Kim Kardashian.

I'm curious - how can one encapsulate this embed code within an <a> tag (or another tag) so that clicking on the image will redirect to www.google.com?

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://instagram.com/p/5Fo5nTuSz9/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_top">I&#39;m really so proud of our Kardashian Beauty @kbeautyhair hair products!!! I use them everyday &amp; my fave is the dry shampoo!</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A photo posted by Kim Kardashian West (@kimkardashian) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-07-13T19:30:05+00:00">Jul 13, 2015 at 12:30pm PDT</time></p></div></blockquote>
  <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

Even after trying to wrap the code in HTML using 

<a href='http://www.google.com'></a>
, it seems unsuccessful.

Could there be a method to place the embedded image or video beneath a transparent image and enable the transparent image to be clickable with the intended link address?

javascriptjqueryhtmlcss

Answer №1

$("body").on("click", "blockquote.instagram-media", function (event) {
    var $element = $(this); //selecting blockquote element

    window.location = "http://www.example.com";
});

OR

function createLink () {
    $("blockquote.instagram-media").wrap( "<a href='http://www.example.com'></div>" );
}

createLink();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`In Node.js, retry attempts resulted in an HTTP 504 status code.`

I have a scenario where my http server always returns a 504 status code: const express = require('express') const app = express() app.get('/', (req, res) => { console.log('I AM HERE'); res.status(504).send('N ...

javascriptnode.jsexpresshttp-status-code-504node.js-got

Toggle the visibility of images with input radio buttons

Explanation I am attempting to display an image and hide the others based on a radio input selection. It works without using label, but when I add label, it does not work properly. The issue may be with eq($(this).index()) as it ends up selecting a differ ...

javascriptjqueryhtmlcss

What steps can I take to enhance my script and prevent the password field from being displayed alongside the username

I am currently working on a script that dynamically displays your username in the Login button as you type it. However, I have encountered an issue where the password is also being displayed, which is unacceptable. Additionally, I would like to enhance my ...

javascripthtml

Utilize AJAX to retrieve the output of a PHP randomizer

Current situation: I have a PHP file with a randomizer function and HTML that utilizes this function to display strings from a separate text document. The Function: <?php function rand_line($fileName, $maxLineLength = 4096) { $handle = @fopen($fileN ...

javascriptphpjqueryhtmlajax

The color of the navbar-toggler-icon in Bootstrap cannot be altered

While working on customizing my Bootstrap 5 navbar, I encountered an issue with changing the color of the navbar-toggler-icon. The preset colors, navbar-light and navbar-dark, didn't align with my theme, so I attempted to change the color to pure whit ...

htmlcsstwitter-bootstrapbootstrap-5

JavaScript error leading to ERR_ABORTED message showing up in the console

When I try to load my HTML page, my JavaScript code keeps throwing an error in the console. I am attempting to import some JavaScript code into VSCode using an app module for future reuse. The code is being run through a local server. Error Message: GET ...

javascripthtmlcssjson

What is the best way to verify the type of an object received from request.body in Typescript

Is it possible to check the object type from the request body and then execute the appropriate function based on this type? I have attempted to do so in the following manner: export interface SomeBodyType { id: string, name: string, [etc....] } ...

javascripttypescriptif-statementtypes

Populate form fields with dynamic data using jQuery and Ajax JSON response

I'm currently working on parsing returned data from JSON into form fields using an autocomplete form. I've successfully implemented the autocomplete feature. jQuery(document).ready(function() { var autocompleteArray = new Array(); jQuery("#bus ...

jqueryajax

Dealing with multiple jQuery ajax requests - strategies for managing them

Whenever I click the button quickly while there is jQuery Ajax loading, it seems to get stuck. How can I manage multiple requests being fired at the same time? What is the solution for the following: Cancel/abort all previous requests and only handle th ...

javascriptjqueryajax

Performing array reduction and summation on objects in JavaScript

Data Analysis: dataSet: [], models: [ { id: 1, name: "samsung", seller_id: 1, count: 56 }, { id: 1, name: "samsung", seller_id: 2, count: 68 }, { id: 2, name: "nokia", seller_id: 2, count: 45 }, { id: 2, name: "nokia", seller_id: 3, count: ...

javascriptarraysjsonvue.js

Align images to the bottom of the gallery only if their heights differ

I'm currently working on an image gallery project and have encountered a problem. When all the image labels are of the same length, they align perfectly. However, if the label is longer than one line, it causes the image to move up instead of creating ...

htmlcssimagealignment

Is there a way to generate a checkerboard dynamically with the help of jQuery?

I've made some progress so far, but I'm facing a challenge where I need to push 8 <td> elements into 8 different <tr> elements without hardcoding anything or modifying the HTML directly. Any help would be appreciated! JavaScript v ...

javascriptjqueryhtml

What are the steps to integrating an HTML source with jQuery Autocomplete?

Struggling with a challenging ajax call to an HTML source that is essential. The goal is to convert the html response into a format suitable for displaying in the jQuery autocomplete list. Working with Autocomplete and Ajax $("#From, #To, #FromVacation ...

javascriptjqueryajaxautocomplete

Guide to displaying JSON.stringify data in PHP

I am attempting to retrieve my Google contact list using the Contact API. I have successfully retrieved the result and it is displaying in the console of both Chrome and Firefox browsers. However, I want to print this data using PHP on the same page. < ...

javascriptphparraysjsonajax

Python is experiencing difficulties with copying xpath elements

I attempted to utilize some Python code to access Twitter and retrieve the "Happening now" text. Unfortunately, it was unsuccessful. import webbrowser print("Visiting Twitter.com...") webbrowser.get('C:/Program Files (x86)/Google/Chrome/Application/c ...

javascriptpythonhtmlselenium

Secure an input field for exclusive attention. React

How can I lock the focus of my input field? I attempted using the following code: onBlur={this.click()} However, it was not successful. What is the correct way to accomplish this? ...

javascriptreactjs

What is the best way to retrieve an instance variable using ajax?

Inside my User model's index.html.erb file, there is a link that triggers an ajax request to fetch the authenticated radars belonging to the user. Here's the code snippet: //user.js function retrieve_radars() { $.ajax({ type: "GET", ur ...

jqueryruby-on-railsajaxruby-on-rails-3

Issues with executing the intended task for a jQuery onclick function

I have a unique jQuery script set up where when #block4 is clicked, the .maincontent div will show. Initially it works perfectly by showing and then hiding the div. However, after the first two clicks, the .maincontent div shows and immediately disappears. ...

javascriptjqueryclick

Ensuring the validation of numerous HTML forms within a single page

Looking for a way to validate two forms on the same .php page within my manual account activation system. The two forms I have are: Accept form Decline form Upon entering a username and clicking the button on either of these forms, PHP code is executed ...

phphtml

Arranging JSON elements according to a separate array in Angular 2 or Node.js

Looking for a solution with optimal performance, I am seeking to achieve the rearrangement of a list using either Angular2 or NodeJS. My input consists of user fruit preferences' IDs {15, 43, 55, 67, 98}; In addition, I have a JSON object containin ...

javascriptjsonnode.jsangular