Onmouseover Events

**wrathyimp** · 03-20-2011, 10:49 AM

Hi,

I have a smooth scrolling div javascript on mouseover event.

Code:

    <script type="text/javascript">
        var scrollTop, imgDirection, scrollID1;
        window.onload = function() {
            div1 = document.getElementById("Div1");
            scrollTop = div1.scrollTop;
        };
        function scrollOnImage() {
            if (imgDirection ==1 ) {
                if (scrollTop != 0)
                    scrollTop--;
            }
            else if (imgDirection == 2) {
            if (scrollTop != (div1.scrollHeight - 300))
                    scrollTop++;
            }
            div1.scrollTop = scrollTop;
            scrollID1 = setTimeout("scrollOnImage()", 10);
        }
    </script>

Code:

    <div style="float: left;height: 300px;"> 
    <img src="images/upDownArrow.png"   onmouseout="clearTimeout(scrollID1)" onmouseover="imgDirection=1; scrollOnImage()" /><br /><br />
    <img src="images/downUpArrow.png" style="margin-top:265px" onmouseout="clearTimeout(scrollID1)" onmouseover="imgDirection=2; scrollOnImage()" />
    </div>

I need to add image rollover to the same onmouseover event in addition to the scrolling event.
images to be used:
Up Arrow
defualt image: upDownArrow.png
rollover image: upDownArrow2.png
Down Arrow
defualt image: downUpArrow.png
rollover image: downUpArrow2.png

Thanks

**vwphillips** · 03-20-2011, 02:38 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
    <script type="text/javascript">
        var scrollTop, scrollHeight,imgDirection, scrollID1,images;
        window.onload = function() {
            div1 = document.getElementById("Div1");
            scrollHeight = div1.offsetHeight;
            div1 = document.getElementById("Div1").getElementsByTagName('DIV')[0];
            scrollTop = div1.offsetTop;
            images=['http://www.vicsjavascripts.org.uk/StdImages/One.gif','http://www.vicsjavascripts.org.uk/StdImages/Two.gif'];
        };

        function scrollOnImage() {
            imgs=div1.getElementsByTagName('IMG');
            imgs[imgDirection-1].src=images[1];
            if (imgDirection ==1&&scrollTop>= 0 ) {
                    scrollTop--;
            }
            else if (imgDirection == 2&&scrollTop<=scrollHeight) {
                    scrollTop++;
            }
            div1.style.top = scrollTop+'px';
            scrollID1 = setTimeout("scrollOnImage()", 10);
        }

 function Pause(){
  clearTimeout(scrollID1);
  imgs=div1.getElementsByTagName('IMG');
  imgs[0].src=images[0];
  imgs[1].src=images[0];
 }

    </script></head>

<body>
    <div id="Div1"  style="position:relative;float: left;height: 300px;border:solid red 1px;">
    <div  style="position:absolute;top:0px;float: left;height: 300px;border:solid black 1px;">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50"  onmouseout="Pause();" onmouseover="imgDirection=1; scrollOnImage()" /><br /><br />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50"  style="margin-top:265px" onmouseout="Pause();" onmouseover="imgDirection=2; scrollOnImage()" />
    </div>
    </div>
</body>

</html>

**wrathyimp** · 03-20-2011, 03:50 PM

Thank vic, but this is my page:

How can i fit your code hear?

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        var scrollTop, imgDirection, scrollID1;
        window.onload = function() {
            div1 = document.getElementById("Div1");
            scrollTop = div1.scrollTop;
        };
        function scrollOnImage() {
            if (imgDirection ==1 ) {
                if (scrollTop != 0)
                    scrollTop--;
            }
            else if (imgDirection == 2) {
            if (scrollTop != (div1.scrollHeight - 300))
                    scrollTop++;
            }
            div1.scrollTop = scrollTop;
            scrollID1 = setTimeout("scrollOnImage()", 10);
        }
    </script>
    <style>
    .imgStyle
    {
        padding:3px 3px 3px 3px;
    }
    .imgStyle:hover
    {
        background-color:Gray;
        cursor:pointer;
    }
    </style>
</head>
<body>
    <br />
    <br />
    <div style="float: left">   
        <div id="Div1" style="height: 300px; width: 200px; overflow: auto;" >
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content dummy content dummy content
            dummy content dummy content dummy content dummy content
        </div>
    </div>
    <div style="float: left;height: 300px;"> 
    <img class="imgStyle" src="images/upDownArrow.png"   onmouseout="clearTimeout(scrollID1)" onmouseover="imgDirection=1; scrollOnImage()" /><br /><br />
    <img class="imgStyle" src="images/downUpArrow.png" style="margin-top:253px" onmouseout="clearTimeout(scrollID1)" onmouseover="imgDirection=2; scrollOnImage()" />
    </div>
</body>
</html>

not pro in javascripts, i am a basic html dev

**vwphillips** · 03-20-2011, 04:32 PM

replace the current script with the posted code

also change the html with the posted code

Thread: Onmouseover Events

Thread Tools

Search Thread

Onmouseover Events

Bookmarks

Bookmarks

Posting Permissions