[JS] Thumbnail slider stop niet - Softwareontwikkeling

donderdag 15 februari 2007 19:38

Acties:

Topicstarter

Ik heb een slider gemaakt. Bij een mouse over aan de rechter kant beweegt een interne DIV heen en weer. Momenteel werkt alleen de 'volgende' knop nog, maar bij de mouseout blijft hij scrollen. Hoe kan ik ervoor zorgen dat hij bij een mouseout stopt?

code:

<head>
<style>
BODY {
    background-color:#3366FF;
}
DIV#back {
    position:absolute;
    top:85px;
    left:40px;
}
DIV#forward {
    position:absolute;
    top:85px;
    left:620px;
}
DIV#container {
    background-color:#FFFFFF;
    width:500px;
    height:100px;
    border:solid 1px #000000;
    overflow:hidden;
    position:absolute;
    top:50px;
    left:100px;
}
DIV#images {
    position:relative;
    width:1300px;
    left:-100px;
}
DIV#images IMG {
    float:left;
    margin:8px;
    border:solid 1px #cccccc;
}
</style>
<script language="javascript" type="text/javascript">
function moveRight(objId,defPos,speed) {
    if (document.getElementById) {
        var obj = document.getElementById(objId);
        var pos = obj.style.left.split('px');
        if(pos[0] == '') {
            pos[0] = defPos;
        }
        var newPos = parseFloat(pos[0])-parseFloat(speed);
        obj.style.left = newPos+'px';
        window.setTimeout("moveRight('"+objId+"',"+defPos+","+speed+")",100);
    }
}
function moveStop(objId) {
    if (document.getElementById) {
        var obj = document.getElementById(objId);
        var pos = obj.style.left.split('px');
        if(pos[0] == '') {
            pos[0] = defPos;
        }
        var newPos = parseFloat(pos[0]);
        obj.style.left = newPos+'px';
    }
}
</script>
</head>

<body>
<div id="back"><a href="#" onmouseover="">&lt; terug</a></div>
<div id="container">
  <div id="images">
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
    <img src="<afbeelding>" border="0" />
  </div>
</div>
<div id="forward"><a href="#" onmouseover="moveRight('images',-100,5);" onmouseout="moveStop('images');"><img src="<afbeelding>" border="0" /></a></div>
</body>

You cannot not communicate

donderdag 15 februari 2007 21:40

Acties:

X-trace

Topicstarter

Inmiddels heb ik de oplossing gevonden: de timeout een variabele toekennen en bij de mouseout een clearTimout aanroepen.

code:

function moveRight(objId,defPos,speed) {
    if (document.getElementById) {
        var obj = document.getElementById(objId);
        var pos = obj.style.left.split('px');
        if(pos[0] == '') {
            pos[0] = defPos;
        }
        var newPos = parseFloat(pos[0])-parseFloat(speed);
        obj.style.left = newPos+'px';
        timeout=setTimeout("moveRight('"+objId+"',"+defPos+","+speed+")",100);
    }
}
function moveStop() {
    clearTimeout(timeout);
}

<a href="#" onmouseover="moveRight('images',-100,5);" onclick="moveStop();moveRight('images',-100,10);" onmouseout="moveStop();">

You cannot not communicate

Reageer