Web Analytics Made Easy -
StatCounter imagebar that slides on mouse follow - CodingForum

Announcement

Collapse
No announcement yet.

imagebar that slides on mouse follow

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • imagebar that slides on mouse follow

    Hi there,

    I would like to make an imagebar consisting of two layers, so that the innerlayer slides through the outer layer. I have already managed to do this (see http://www.emmahuis.nl/suus ), but I would like to have the imagebar move on mouse follow, just as it would in Flash (see http://www.symor.com, click on Collection and then bodyfashion. Is this possible in Javascript and if so, can anyone tell me how to do this?

    Thanks in advance!

  • #2
    Put this extra code in with your other javascripts
    Code:
    /** EXTRA ***/
    function overScroll(e)
    {
    	var x = event.x;
    
    	if(x < 150)
    		P7_HScroller('view','Right',0,350,'Fast');
    	else if (x < 200)
    		P7_HScroller('view','Right',0,350,'Medium');
    	else if (x < 250)
    		P7_HScroller('view','Right',0,350,'Slow');
    	else if (x < 350)
    		P7_HScroller('view','Left',0,350,'Slow');
    	else if (x < 450)
    		P7_HScroller('view','Left',0,350,'Medium');
    	else if (x < 550)
    		P7_HScroller('view','Left',0,350,'Fast');
    }
    function outScroll(e)
    {
    	P7_HScroller('view','Stop',0,0,'Fast')
    }
    /** EXTRA ***/
    Change your div to
    Code:
    <DIV class="layerstyle" id="viewport" [color=red]onmousemove="overScroll()" onmouseout="outScroll()"[/color]
    style="Z-INDEX: 2; LEFT: 110px; OVERFLOW: hidden; WIDTH: 350px; CLIP: rect(0px 350px 157px 0px); POSITION: absolute; TOP: 250px; HEIGHT: 157px">
    This works in IE only. I don't have any other browsers re-installed yet to test with.
    The answer does not come from thinking outside the box, it comes from realizing the truth :-
    "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

    Comment


    • #3
      Wow! You're the best! Thanks, it works perfectly!

      Comment

      Working...
      X