Hi all,

I am trying to do a fancy blur/fade effect (which means i need 2 images) but I only want to load 1 in the HTML (in case js is not active) and add the other filename via jQuery (copying and renaming the file/src)

The pure html is along the lines of:

<div id="work">
 <div>
  <img src="css/images/abc1.jpg" width="360" height="227" alt="" />
 </div>
 <div>
  <img src="css/images/xyz1.jpg" width="360" height="227" alt="" />
 </div>
</div>

But the html after jquery has manipulated the DOM needs to be like:

<div id="work">
 <div>
  <img src="css/images/abc0.jpg" width="360" height="227" alt="" />
  <img src="css/images/abc1.jpg" width="360" height="227" alt="" />
 </div>
 <div>
  <img src="css/images/xyz0.jpg" width="360" height="227" alt="" />
  <img src="css/images/xyz1.jpg" width="360" height="227" alt="" />
 </div>
</div>

The question is, what is the jQuery to clone/copy the relative images and then rename the src?

Any help would be much appreicated.

A.