SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image "slide show" with mouse over effect

    Not the best javascript coder in town. Need some help.

    Got a project where I need a "slide show" that will rotate through several images on a page. But I also need to have an onMouseOver image swap when individual images are moused over.

    Now I have the below code for the "slide show", but cannot seem to figure out how to incorporate the image swap onMouseOver event.

    Any help is appreciated.

    Code:


    <html>
    <head>
    <title>Untitled</title>
    <script language="JavaScript1.1">
    <!--

    /*
    JavaScript Image slideshow:
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free JavaScript here!
    */

    var slideimages=new Array()
    var slidelinks=new Array()
    function slideshowimages(){
    for (i=0;i<slideshowimages.arguments.length;i++){
    slideimages[i]=new Image()
    slideimages[i].src=slideshowimages.arguments[i]
    }
    }

    function slideshowlinks(){
    for (i=0;i<slideshowlinks.arguments.length;i++)
    slidelinks[i]=slideshowlinks.arguments[i]
    }

    function gotoshow(){
    if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
    else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
    }

    //-->
    </script>
    </head>

    <body>
    <a href="javascript:gotoshow()"><img src="img1.jpg" name="slide" border=0 width=200 height=80></a>
    <script>
    <!--

    //configure the paths of the images, plus corresponding target links
    slideshowimages("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")
    slideshowlinks("link1 here","link2 here","link3 here","link4 here","link5 here")

    //configure the speed of the slideshow, in miliseconds
    var slideshowspeed=1200

    var whichlink=0
    var whichimage=0
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=slideimages[whichimage].src
    whichlink=whichimage
    if (whichimage<slideimages.length-1)
    whichimage++
    else
    whichimage=0
    setTimeout("slideit()",slideshowspeed)
    }
    slideit()

    //-->
    </script>
    </body>
    </html>


    Thanks again.

  2. #2
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should put an onmouseover and onmouseover on the image (slide) the onmouseover could be scripted inline,
    or be a called function, but either way it would want
    to say something like:

    this.src=(this.src.split('.'))[0]+'_o.'+(this.src.split('.'))[1];

    this.src=(this.src.split('_o')).join(//);

    Obviously you'd need to have image_o.gif for each of the images in your array.

    I don't know this would work, but it makes sense.

    if you need more help, just ask.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  3. #3
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks. I will try it out today.


Bookmarks

Posting Permissions

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