Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts

    Question Javascript Scoller with Mouseover

    Hey

    Attached is a javascript Scrolling demo which I got from dynamicdrive.com (http://www.dynamicdrive.com/dynamici...rightslide.htm)

    Its working fine.

    However, I was not able to add a mouseover effect on the scrolling images.

    For example.
    If I mouseover on tn_scroller_bw_01.jpg image, then that image should be replaced by tn_scroller_01.jpg and once the mouseout event occurs, the old image tn_scroller_bw_01.jpg should be loaded back.

    Plz guide.

    Thanx
    Attached Files Attached Files

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Have you tried on adding an onmouseover and onmouseout event on the image element:
    Code:
    leftrightslide[0]='<img src="images/tn_scroller_bw_00.jpg" border=0 onmouseover="this.src=\'images/tn_scroller_00.jpg\'" onmouseout="this.src=\'images/tn_scroller_bw_00.jpg\'">';
    leftrightslide[1]='<img src="images/tn_scroller_bw_01.jpg" border=0 onmouseover="this.src=\'images/tn_scroller_01.jpg\'" onmouseout="this.src=\'images/tn_scroller_bw_01.jpg\'">';
    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    the following code does not work

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    
    //Specify the slider's width (in pixels)
    var sliderwidth="650px"
    //Specify the slider's height
    var sliderheight="80px"
    //Specify the slider's slide speed (larger is faster 1-10)
    var slidespeed=1
    //configure background color:
    slidebgcolor="#FFF"
    
    //Specify the slider's images
    var leftrightslide=new Array()
    var finalslide=''
    leftrightslide[0]='<img src="images/tn_scroller_bw_00.jpg" border=0>'
    leftrightslide[1]='<img src="images/tn_scroller_bw_01.jpg" border=0>'
    
    
    
    
    //Specify gap between each image (use HTML):
    var imagegap=" "
    
    //Specify pixels gap between each slideshow rotation (use integer):
    var slideshowgap=5
    
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed=slidespeed
    leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
    var iedom=document.all||document.getElementById
    if (iedom)
    document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
    var actualwidth=''
    var cross_slide, ns_slide
    
    function fillup(){
    if (iedom){
    cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
    cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
    cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
    actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
    cross_slide2.style.left=actualwidth+slideshowgap+"px"
    }
    else if (document.layers){
    ns_slide=document.ns_slidemenu.document.ns_slidemenu2
    ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
    ns_slide.document.write(leftrightslide)
    ns_slide.document.close()
    actualwidth=ns_slide.document.width
    ns_slide2.left=actualwidth+slideshowgap
    ns_slide2.document.write(leftrightslide)
    ns_slide2.document.close()
    }
    lefttime=setInterval("slideleft()",30)
    }
    window.onload=fillup
    
    function slideleft(){
    if (iedom){
    if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
    cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
    else
    cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
    
    if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
    cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
    else
    cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
    
    }
    else if (document.layers){
    if (ns_slide.left>(actualwidth*(-1)+8))
    ns_slide.left-=copyspeed
    else
    ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
    
    if (ns_slide2.left>(actualwidth*(-1)+8))
    ns_slide2.left-=copyspeed
    else
    ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
    }
    }
    
    
    if (iedom||document.layers){
    with (document){
    document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
    if (iedom){
    write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
    write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
    write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
    write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
    write('</div></div>')
    }
    else if (document.layers){
    write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
    write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0;this.src=\'images/tn_scroller_00.jpg\'" onMouseout="copyspeed=slidespeed;this.src=\'images/tn_scroller_bw_00.jpg\'"></layer>')
    write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
    write('</ilayer>')
    }
    document.write('</td></table>')
    }
    }
    </script>

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Which code does'nt work? It works at my end.

    Could you pleases provide a link so that we could see what's happening at your end.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    Plz take a look into the attached code. I hvae included these two lines in this file.
    Code:
    onmouseover="this.src=\'images/tn_scroller_00.jpg\'" onmouseout="this.src=\'images/tn_scroller_bw_00.jpg\'"
    Attached Files Attached Files

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You add the onmouseout and onmouseover event erroneously.

    Should be on this part:
    Code:
    //Specify the slider's images
    var leftrightslide=new Array()
    var finalslide=''
    leftrightslide[0]='<img src="images/tn_scroller_bw_00.jpg" border=0 onmouseover="this.src=\'images/tn_scroller_00.jpg\'" onmouseout="this.src=\'images/tn_scroller_bw_00.jpg\'">';
    leftrightslide[1]='<img src="images/tn_scroller_bw_01.jpg" border=0 onmouseover="this.src=\'images/tn_scroller_01.jpg\'" onmouseout="this.src=\'images/tn_scroller_bw_01.jpg\'">';
    ...and not here:
    Code:
    write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0;this.src=\'images/tn_scroller_00.jpg\'" onMouseout="copyspeed=slidespeed;this.src=\'images/tn_scroller_bw_00.jpg\'"></layer>')
    write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
    write('</ilayer>')
    Last edited by rangana; 09-27-2008 at 12:50 PM.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    Now this is strange.

    If I directly open the HTML file with my browser it works like a charm.

    But when I access it thru localhost then I get a dancing and shaking image.

    What can be the reason for this?

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    That example didnt help me.

  • #10
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    Anyone else plz?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •