CODEWITHSUNDEEP
jqueryhtmlcss
pooja
pooja

Reputation: 58

how to wrap html tag around image tag?

I want to convert below html image tag 

<img src="img-1.jpg" width="290" height="420" class="frameImage" />

to following code using jquery.

<table class="frame" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="border-top" colspan="3"></td>
  </tr>
  <tr>
    <td class="border-left"></td>
    <td><div class="image-frame"><img src="img-1.jpg" width="290" height="420" class="frameImage" />
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-right"></div>
        <div class="bottom-left"></div>
      </div></td>
    <td class="border-right"></td>
  </tr>
  <tr>
    <td class="border-bottom" colspan="3"></td>
  </tr>
</table>

Upvotes: 1

Views: 478

Answers (4)

Jerph
Jerph

Reputation: 4570

This isn't exactly an answer, but you may be interested in jQuery-ImageFrame.

Upvotes: 0

powtac
powtac

Reputation: 41040

$('img[src=img-1.jpg]').before('<table class="frame" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="border-top" colspan="3"></td>
  </tr>
  <tr>
    <td class="border-left"></td>
    <td><div class="image-frame"><img src="img-1.jpg" width="290" height="420" class="frameImage" />
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-right"></div>
        <div class="bottom-left"></div>
      </div></td>
    <td class="border-right"></td>
  </tr>
  <tr>
    <td class="border-bottom" colspan="3"></td>
  </tr>
</table>').remove();

Upvotes: 1

Anthony Shaw
Anthony Shaw

Reputation: 8166

You should be able to do something like this:


    $('.image-frame').html('<img src="img-1.jpg" width="290" height="420" class="frameImage" /%gt;')

but it would require you to print the table first and then insert the image into the table

Upvotes: 0

rahul
rahul

Reputation: 187030

  1. Append the whole table without the image to the document.
  2. Find div with class 'image-frame' and place the image inside it.

Upvotes: 2

Related Questions