Hi guys, wondering if someone can help me.
There is an image contained in a div (overflow hidden). When the user mouses over a certain link, the image inside the div is supposed to move to a different position. This works perfectly in all browsers, but when I change onmouseover to onclick, opera fails to move the image to its new location. Instead, in opera, the image shakes and then moves back to the original position of 0px no matter which link I click on.
[CODE]
function setPosition() {
var box = document.getElementById(“color_img”);
box.style.top = “0px”;
box.style.right = “0px”;
var colorList = document.getElementById(“color_list”);
var link = colorList.getElementsByTagName(“a”);
link[0].onmouseover = function() {
movePosition(“color_img”, 0, 10);
}
link[1].onmouseover = function() {
movePosition(“color_img”, 100, 10);
}
link[2].onmouseover = function() {
movePosition(“color_img”, 200, 10);
}
link[3].onmouseover = function() {
movePosition(“color_img”, 300, 10);
}
}
Here’s the movePosition function if it helps…
[CODE]function movePosition(element, final_x, interval) {
var box = document.getElementById(element);
if (box.movement) {
clearTimeout(box.movement);
}
var xpos = parseInt(box.style.right);
if (xpos == final_x) {
return true;
}
if(xpos < final_x) {
var dist = Math.ceil((final_x – xpos) / 10);
xpos = xpos + dist;
}
if(xpos > final_x) {
var dist = Math.floor((final_x – xpos) / 10);
xpos = xpos + dist;
}
box.style.right = xpos + “px”;
var repeat = “movePosition(‘”+element+”‘, “+final_x+”, “+interval+”)”;
box.movement = setTimeout(repeat, interval);
}
Am I doing something wrong? ?