Is possible to load as a src= .. a link put on a previous a href=?

Question

I have a numerous links enlisted in various tables in my web, those have a preview in an iframe that open as a popup, this works all well, but it will be more easy if I put the link only one time and not necessary to repeat on iframe, the links are written as follow:

<td>
<a href="LINK1.html" target="_blank"><img class="imageg" src="img/timon2.png"></a>
        <div class="boxht cint">
          <iframe src="LINK1.html" width = "100%" height = "100%" frameBorder="0" ></iframe>
        </div>
</td>
...
<td>
<a href="LINK2.html" target="_blank"><img class="imageg" src="img/timon2.png"></a>
        <div class="boxht cint">
          <iframe src="LINK2.html" width = "100%" height = "100%" frameBorder="0" ></iframe>
        </div>
</td>

Here is the original page with the iframe that is popped up when the mouse pass over the rotating rudder: http://emmind.net/endogenous_fields_&_mind.html.
The next lines are the part of the code that refer to the iframe and its effects if it can be helpful:

Rotating rudder:

.imageg {
    position: static;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    margin: -0px 0 0 -0px;
    -webkit-animation: spin 8.5s linear infinite;
    -moz-animation: spin 8.5s linear infinite;
    animation: spin 8.5s linear infinite;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

The div containing the iframe:

.boxht {
    display: none;
    width: 35%;
    position: fixed;
    z-index: 100;
    top: 16%;
    left: 63%;
    height: 65%;
    padding-bottom: 0px;
    border: 2px solid #dfdfdf;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #ffffbb;
}
a:hover + .boxht {
    display: inline;
}
.boxht:hover {
    display: inline;
}

Effect of stones overlapping the frame:

.cint:before,
.cint:after {
    content: "";
    display: block;
    position: absolute;
}
.cint:before {
    bottom: -40px;
    left: -30px;
    height: 79px;
    width: 85px;
    background-image: url(img/piedra2c.png);
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    transform: rotate(-50deg);
}
.cint:after {
    top: -42px;
    right: -20px;
    width: 93px;
    height: 80px;
    background-image: url(img/piedra1.png);
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    transform: rotate(-12deg);
}

Answer 1

It is quickly done with jQuery (even though it's arguable whether one should actually use it for this task being it not very complicated). Embed a version of jQuery in your header via the <script src> tag, and you can use this snippet.
As a reference you can look up the API docs of jQuery.

// Perform `function` when the page loads
$(function() {
  // Select all `img` tags with class `imageg` that are children of an `a`
  $('a > img.imageg').each(function(i) {
    // Wrap the parent (`a`) into jQuery
    var $href = $(this.parentNode);
    // Generate a new div > iframe and insert it after `a`
    $('<div class="boxht cint"><iframe src="' + $href.attr('href') + '" width="100%" height="100%" frameborder="0"></iframe></div>').insertAfter($href);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="LINK1.html" target="_blank">
        <img class="imageg" src="img/timon2.png">
      </a>
    </td>
    <td>
      <a href="LINK2.html" target="_blank">
        <img class="imageg" src="img/timon2.png">
      </a>
    </td>
  </tr>
</table>