function myfuction() conflict with jquery

Question

i have thumbnail image, when mouseover on thumbnail will be show in big size...

below this code:

<img onMouseOver="seebig('<{$pic}>')" style="cursor:pointer" src="path/images/<{$pic}>.jpg" border=0 width="45" height="40">

and function call like this :

<script type="text/javascript">function seebig(id){ $('imgmove').innerHTML='<a href="path/images/'+id+'.jpg" target="_blank"><img border="0" src="path/images/'+id+'.jpg" width=280 ></a>';}</script>

BTW when i put jquery-1.3.2.min.js and prototype.js on heading this function not work? anyone can help...thank you

SOLUTION

<script type="text/javascript">
jQuery.noConflict();
function seebig(id)
{ 
    var mv = document.getElementsByClassName('imgmove')[0];
    mv.innerHTML = '<a href="path/images/'+id+'.jpg" target="_blank"><img border="0" src="path/images/'+id+'.jpg" width=280 ></a>';
}

Thank you for dima_horror ,but your tips still not worked before inserting jQuery.noConflict();

and now goes fine!!! thank you

Answer 1

Change $('imgmove').innerHTML to $('imgmove').html()

<script type="text/javascript">
    function seebig(id)
    { 
        $('imgmove').html('<a href="path/images/'+id+'.jpg" target="_blank"><img border="0" src="path/images/'+id+'.jpg" width=280 ></a>');
    }
</script>

UPDATE 2 Try update html without jquery

<script type="text/javascript">
    function seebig(id)
    { 
        var mv = document.getElementsByClassName('imgmove')[0];
        mv.innerHTML = '<a href="path/images/'+id+'.jpg" target="_blank"><img border="0" src="path/images/'+id+'.jpg" width=280 ></a>';
    }
</script>