Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to stop jump in this scrolling script? 1

Status
Not open for further replies.
kippie

kippie

Technical User
Nov 8, 2001
158
In the HTML below I let one image scroll from left to right. Above it is a text. The idea is:
1. onMouseOver of the text and the image the scrolling stops
2. onMouseOut of the text and the image the scrolling continues where it was.
3. onMouseOver of the text the color of the text changes
4. onMouseOver of the image the color of the text changes also and in the same way as in 2.
5. onMouseOut of the text the color of the text changes back to the original color.
6. onMouseOut of the image the color of the text changes also back to the original color.
The final idea is to add more images and texts scrolling so that both texts and images are used as a sort of menu.

The problem is that onMouseOut of the image the scrolling jumps back, while onMouseOut of the text the scrolling continues nicely. I can't figure why the continuation of the scrolling goes wrong onMouseOut of the image while it works fine on the text. Could anyone help?

This is the HTML:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns="<head>
<title>Image Scroller</title>


<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<link href="layout2.css" rel="stylesheet" type="text/css">

<script language="javascript" src="sleight.js"></script>



<style type="text/css">
/*<![CDATA[*/

body {
background: #ffffff;

}
#middle {
position:absolute;
left: 0px;
top: 120px;
width: 1050px;
height: 350px;
overflow: hidden;
}
#container {
width: 3788px; /*total images width */
display: none;
position: absolute;
top: 0px;
border: solid 0px #6699cc;
}

.images {
float:left;
border:none;
}

.kop { color: #4c5ea1; font-weight: 700; font-size: 13px; font-family: Arial; text-align: left; width: 100% }
a.kop:link { color: #4c5ea1; font-weight: 700; font-size: 13px; font-family: Arial; text-decoration: none }
a.kop:active { color: #4c5ea1; font-weight: 700; font-size: 13px; font-family: Arial; text-decoration: none }
a.kop:visited { color: #4c5ea1; font-weight: 700; font-size: 13px; font-family: Arial; text-decoration: none }
a.kop:hover { color: #ffae06; font-weight: 700; font-size: 13px; font-family: Arial; text-decoration: none }

a.kop2:link { color: #ffae06; font-weight: 700; font-size: 13px; font-family: Arial; text-decoration: none }
a.kop2:active { color: #ffae06; font-weight: 700; font-size: 13px; font-family: Arial; text-decoration: none }
a.kop2:visited { color: #ffae06; font-weight: 700; font-size: 13px; font-family: Arial; text-decoration: none }
a.kop2:hover { color: #4c5ea1; font-weight: 700; font-size: 13px; font-family: Arial; text-decoration: none }

#wzw1{ position: absolute; top: 15px; left: 0px; width: 150px; height: 20px; visibility: visible }
#wzw2 { position: absolute; top:15px; left: 0px; width: 150px; height: 20px; visibility: hidden }


/*//]]>*/
</style>

<script language="javascript">
function hideLayers(sel) {
var eles = document.getElementsByTagName("div");
var all = (sel) ? 0 : 1;
if(all){
for(i=0;i<eles.length;i++) {
document.getElementById(eles.id).style.visibility="hidden";
}
}
else{
for(i=0;i<eles.length;i++) {
if(eles.id==sel) document.getElementById(eles.id).style.visibility="hidden";
}
}
}

function showLayer(sel) {
var eles = document.getElementsByTagName("div");
for(i=0;i<eles.length;i++) {
if (eles.id==sel) {
document.getElementById(sel).style.visibility="visible";
}

}
}
</script>

<script type="text/javascript">
//<![CDATA[

//* preload rollover
var roll = new Image()
roll.src = 'spiraalmetman3opt.jpg'

var x = 550;
var w = 3788; /*total images width */
var i = 0;
var speed = 5;

/*-----------------------------------------------------------------------------
Scroller functions
-----------------------------------------------------------------------------*/

function imageScroll() {
var Scontainer = document.getElementById("container").style;
Scontainer.display = "block";
Scontainer.left = (x - i) + "px";
i++;
if(i >(x + w)) {
i = 0;
}
scroller=setTimeout("imageScroll()",speed);
}
onload = imageScroll;

function stopScroll(el) {
clearTimeout(scroller);
}

/*-----------------------------------------------------------------------------
Image swap

- No 2nd arg = "swap back"
-----------------------------------------------------------------------------*/

function swap(img,src)
{
if(src){
img.oSrc = img.src;
img.src = src;
}
else
img.src = img.oSrc;
}

/*-----------------------------------------------------------------------------
Mouse events
-----------------------------------------------------------------------------*/

function img_mouseover(img, src)
{
stopScroll();
swap(img,src);
img.onmouseout = img_mouseout;
}

function img_mouseout()
{
imageScroll();
swap(this);
}

//]]>
</script>

</head>

<body>
<div id ="middle">
<div id = "container">

<table>
<tr>
<td height="30"><div id="wzw1"><img border="0" src = "dotwhite.gif" height="0" width="32">
<a href="" class="kop" target="_self" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>Wie zijn wij?</a>
</div>
<div id="wzw2"><img border="0" src = "dotwhite.gif" height="0" width="32">
<a href="" class="kop2" target="_self" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>Wie zijn wij?</a>
</div>
</td>
</tr>
<tr>
<td>
<a href=""><img class = "images" border="0" src = "intromanopschommelopt.jpg" onmouseover = "showLayer('wzw2'); hideLayers('wzw1'); stopScroll(this);return false;" onmouseout = "img_mouseout(); showLayer('wzw1'); hideLayers('wzw2');" alt = ""/></a>
</td>
</tr>
</table>

</div>
</div>

</body>
</html>
 
Sort by date Sort by votes

I can't figure why the continuation of the scrolling goes wrong onMouseOut of the image while it works fine on the text.
Click to expand...

Without looking into things too deeply, I notice immediately that you are calling two extra functions when the onmouseout event of the image fires.

Could this be the reason why?

Hope this helps,
Dan
 
Upvote 0 Downvote
Hi Billy,

The two extra functions called onMouseOver and onMouseOut of the image are to realise the colorchange of the textlink from blue to orange and back. So onMouseOut the first (showLayer) is to show the blue textlink and the second (hideLayers) to hide the orange textlink. These two functions are not used onMouseOver and onMouseOut of the textlink while that rollover is realised with a simple hover command.
I can't fugure out why these two extra functions bug the thing. Or is there another more simple way to make a change of color of a textlink when the user goes onMouseOver and onmouseOut of an image?
Any help is greatly appreciated!
 
Upvote 0 Downvote

Aaah - your problem is your bad use of variables.

You are using "i" as the increment counter (global variable), but also using "i" as a local loop counter in some functions. Because in these functions you are not defining "i" with "var", it is overwriting the global "i", rather than creating a local variable, "i".

I suggest:

1) Using more meaningful names for your variables. This may have made the problem easier to spot, and
2) Always define local variables with var:

Code: 
for (var loop=0; loop<someValue; loop++)

Hope this helps,
Dan

 
Upvote 0 Downvote

Incidentally, you are never using the img_mouseover function - you may as well delete it.

Also, your code really could do with indenting - not only does it make it more legible to you, it greatly aids others who are helping you to debug. If you already have indentation in your code, then you should use the correct TGML to post, so that it is retained.

Dan

 
Upvote 0 Downvote

Oh yes - to answer your second question... yes - there is a far easier way to change the colour of text than by hiding and showing layers. You can simply change "style.color". Something like this:

Code: 
myEl.style.color = '#FF0000';

Hope this helps,
Dan

 
Upvote 0 Downvote
Hi Dan,

Thanks for your help. I changed the variable i and it works fine. Thanks a lot. But it probably can be done much more simple using the "style.color". But I have never seen anything about it. Do you know an example where I can find more info on this?
I always use indenting mtself, but it never is shown in any of my posts. I don't understand. What is a TGML and how can I use the correct one?

Kippie

 
Upvote 0 Downvote

Here's an example of changing the colour of some text using the code above.

If you have a SPAN with an ID:

Code: 
<span id="myText01">Some text here</span>

and have it set to red using CSS:

Code: 
#myText01 {
   color: #FF0000;
}

then you can change it to green by changing style.color:

Code: 
document.getElementById('myText01').style.color = '#0000FF';

Of course, there are many ways to skin a cat, so don't assume this is the most effective for your needs.

TGML is the code used to add effects and formatting to your post. When replying or creating a new post, click the link that says "Process TGML" above the "Submit Post" button. You should see a popup window explaining all about it appear.

Dan


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
373
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
484
MDGarcia
MDGarcia

Part and Inventory Search

Sponsor

Back
Top