The CSS I am working with looks like this:
.cls .imageX
{
float:left;
}
.cls .imageY
{
float:right;
}
It is currently being used on a page in this way:
<div class="cls">
<a href="" class="imageX"><img src="left.png"/></a>
<a href="" class="imageY"><img src="right.png"/></a>
</div>
I do not have access to the source code of the site. I am viewing this through Firebug and my task is to write JavaScript code to make changes upon the onload event. My goal is to switch the positioning of the images, so it should look like this instead:
<div class="cls">
<a href="" class="imageX"><img src="right.png"/></a>
<a href="" class="imageY"><img src="left.png"/></a>
</div>
I have attempted two different solutions, but unfortunately, neither one seems to work for me at all.
1> $('.cls .imageX img').attr('src','right.png');
$('.cls .imageY img').attr('src','left.png');
2> $('.cls .imageX').css('float','right');
$('.cls .imageY').css('float','left');