Это довольно тривиальная задача.
По первому вопросу:
<style>
#image {
	position: absolute;
	top: 20px;
	left: 4px;
	background: #FFAAFF;
	padding: 10px;
}
</style>
<div id="image" onMouseOver="slide()" onMouseOut="slideback()">Here is something</div>
<script language="JavaScript">
var slidepos = 4;
var slidediv = document.getElementById('image');
var sliding = false;
function slide() {
	// Изначально убираем интервал (на всякий случай)
	sliding = clearInterval(sliding);
	
	// Ставим интервал (тут 40 ms - скорость движения, меньше=быстрее)
	sliding = setInterval(function() {
		if( slidepos < 600 ) {// Двигаемся до 600 пикселей
			slidepos++;
			slidediv.style.left = slidepos; // Тут лучше без px - глючит в konqueror
		} else {
			// Убираем интервал, когда он не нужен
			sliding = clearInterval(sliding);
		}
	}, 40 );
}
function slideback() {
	sliding = clearInterval(sliding);
	
	sliding = setInterval(function() {
		if(slidepos > 4) { // до начальной позиции
			slidepos--;
			slidediv.style.left = slidepos;
		} else {
			sliding = clearInterval(sliding);
		}
	}, 40 );
}
</script>
По второму вопросу могу сказать, что если это не критично, дополнительно обрабатывать события (кроме onMouseOver, onMouseOut), не надо. Обидно, что в некоторых браузерах, когда окошко 
само уплывает из-под мышки событие onMouseOut не вызывается, вот в FF всё в порядке. Для полной кроссбраузерности придется, наверно, считать координаты.