Any chance to change image src on hover , count up to 10 and back again from first?
This is what i need, this is default thumb, flv-3.jpg!
<img src="/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg" /> On mouse hover need to change only number
- flv-1.jpg
- flv-2.jpg
- flv-3.jpg
- flv-4.jpg
- etc..
up to 10, and back again back and start from number 1, but when i move mouse from thumbs need to back to default thumb flv-3.jpg
This what im use now but its not very good solutions,
var _thumbs = new Array(); function changeThumb(index, i, num_thumbs, path) { if (_thumbs[index]) { document.getElementById(index).src = path + i + ".jpg"; preload = new Image(); preload_image_id = (i + 1 > num_thumbs) ? 1 : i + 1; preload.src = path + preload_image_id + ".jpg"; i = i % num_thumbs; i++; setTimeout("changeThumb('" + index + "'," + i + ", " + num_thumbs + ", '" + path + "')", 800) } } function startThumbChange(index, num_thumbs, path) { if (num_thumbs < 2) return false; _thumbs[index] = true; changeThumb(index, 1, num_thumbs, path); } function endThumbChange(index, image) { _thumbs[index] = false; document.getElementById(index).src = image; } and html
<img onmouseout="endThumbChange('515e9279d96c6', '/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg');" onmouseover="startThumbChange('515e9279d96c6', '10', '/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-','.jpg');" id="515e9279d96c6" src="/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg" class="img"> And also its possible to add effect like fade when thumbs is changed?