PDA

View Full Version : Onmouseover Events



wrathyimp
03-20-2011, 10:49 AM
Hi,

I have a smooth scrolling div javascript on mouseover event.


<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>





<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
<!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?



<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