Replace an iframe with an image of the source of the iframe via jQuery

advertisements

I think what I want to do is create a variable from an attribute's value so I can insert a new object using the variable as another attribute's value...

I have a media search site in an environment where my ability to configure the template for our search results page is restricted. Hovering on a search result displays the web page of the result in an iframe off to the side:

The the code for the content in the iframe includes the an image's URL as a link's href attribute, and I'd like to replace the iframe with an image using this href attribute value as its src attribute.

So, I want to get the value of div.foo a's href attribute, and replace iframe.bar with <img src="href from div.foo a"/>

I have this notion that I can use jQuery to get and "store" the value of div.bar's href attribute, replace iframe.foo with an img, and set the img's src attribute's value to my stored href attribute value.

Help!


You could do something along the lines of:

    //retreive href
    href = $('.foo').attr('href');

    // set image source
    $('.bar').attr('src', href);

From what you're asking though it sounds like you'll want to change the <iframe> to <img> one way to do this is with:

    // get iframe's parent and change to image
    iframe = $('iframe.bar').parent();

    // change to image tag
    iframe.replaceWith( '<img class="bar">' );