How do i get 2 images to switch positions upon mouse over using html?

how can i get 2 images to swap positions with either other one of the left, the other to the right using html?How do i get 2 images to switch positions upon mouse over using html?
%26lt;img id=';left'; src=';left.jpg'; onmouseover=';moveImage()'; alt=';'; /%26gt;


%26lt;img id=';right'; src=';right.jpg'; onmouseover=';moveImage()'; alt=';'; /%26gt;





%26lt;script type=';text/javascript';%26gt;


function moveImage() {


var left = document.getElementById( 'left' );


var leftsrc = left.src;


var right = document.getElementById( 'right' );


var rightsrc = right.src;





right.src = leftsrc;


left.src = rightsrc;


}


%26lt;/script%26gt;How do i get 2 images to switch positions upon mouse over using html?
I believe you have to use JavaScript for that. That's the only way I've done it before. It's been years since I dabbled in that - so do a web search for Javscript image rollovers and you should find some tutorials - fairly easy to do if you are already proficient at updating your HTML files (the JavaScript is inserted into your HTML) and managing files on your server.
Not with pure HTML. You would have to use something like JavaScript to achieve this:





Once you have assembled your images, place this JavaScript onto your page. You should put it in the %26lt;head%26gt; of the document, so that it is already working before it has a chance to be called.





Code for %26lt;head%26gt;:





%26lt;script type=';text/javascript';%26gt;


var revert = new Array();


var inames = new Array('smirk');





// Preload


if (document.images) {


var flipped = new Array();


for(i=0; i%26lt; inames.length; i++) {


flipped[i] = new Image();


flipped[i].src = ';media/';+inames[i]+';2.gif';;


}


}





function over(num) {


if(document.images) {


revert[num] = document.images[inames[num]].src;


document.images[inames[num]].src = flipped[num].src;


}


}


function out(num) {


if(document.images) document.images[inames[num]].src = revert[num];


}


%26lt;/script%26gt;











Now we just need to add the images. This is done like any other image, but with some extra JS attributes thrown in:





%26lt;img src=';media/image.gif'; name=';image'; onMouseOver=';over(0)'; onMouseOut=';out(0)';%26gt;











This HTML creates the image. The script will then wait for the user to trigger it. The onMouseOver event handler 鈥榣istens鈥?for certain user actions; in this case their mouse passing over the image. When this happens it fires the over function, and sends the image鈥檚 number along with it. It鈥檚 the first rollover image on the page so it sends a 0. The second image would send a 1 etc. Always remember, the first object in an array is numbered with a zero.





When the user鈥檚 mouse moves away from the image again, onMouseOut notices and fires out, again adding in the image鈥檚 number so the function knows which image it has to work on.





The name attribute we add to our images should be exactly the same as the names we gave the image in the inames array in the script. This is used to construct the rolled-over image鈥檚 filename. If we call our first image image, as I have done, the script decides that the corresponding rolled-over filename will be media/image2.gif. The initial image can be called anything you want, but it would be a good idea to name it similarly to the second, ending with a 1.



%26lt;script type=';text/javascript';%26gt;


%26lt;!--





var image1 = new Image();


image1.src = ';moveup.gif';;


var image2 = new Image();


image2.src = ';movedown.gif';;


var image3 = new Image();


image3.src = ';an1.gif';;


var image4 = new Image();


image4.src = ';an2.gif';;





//--%26gt;


%26lt;/script%26gt;



































%26lt;script type=';text/javascript';%26gt;


%26lt;!--





function roll(img_name, img_src)


{


document[img_name].src = img_src;


}





//--%26gt;


%26lt;/script%26gt;











%26lt;a href=';somewhere.html';


onmouseover=';roll('sub_but', 'movedown.gif')';


onmouseout=';roll('sub_but', 'movetup.gif')';%26gt;





%26lt;img src=';moveup.gif'; width=';143'; height=';39'; border=';0';


alt=';Move your mouse over me'; name=';sub_but'; /%26gt;





%26lt;/a%26gt;











%26lt;script type=';text/javascript';%26gt;


%26lt;!--





function roll(img_name1, img_src1, img_name2, img_src2)


{


document[img_name1].src = img_src1;


document[img_name2].src = img_src2;


}





//--%26gt;


%26lt;/script%26gt;











%26lt;a href=';somewhere.html';


onmouseover=';roll('sub1', 'movedown.gif', 'sub2', 'an1.gif')';


onmouseout=';roll('sub1', 'moveup.gif', 'sub2', 'an2.gif')';%26gt;





%26lt;img src=';moveup.gif'; name=';sub1'; width=';143';


height=';39'; border=';0'; /%26gt;


%26lt;/a%26gt;





%26lt;img src=';an2.gif'; name=';sub2'; width=';143'; height=';39'; /%26gt;