i want to pause the sliding image on mouse over

Question

0.00/5 (No votes)

See more:

Java

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <script type="text/javascript">
            var image1=new Image()
            image1.src="images/flash1.jpg"
            var image2=new Image()
            image2.src="images/flash8.jpg"
            var image3=new Image()
            image3.src="images/flash3.jpg"
            var image4=new Image()
            image4.src="images/flash4.jpg"
        </script>
        <script type="text/JavaScript">




<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <img src="images/flash1.jpg" Height="500px" Width="1200px" name="slide"/> 
                   
                    <script>
                                              
                                                   
                                                    var step=1
                                                    function slideit(){
                                                    
                                                        if (!document.images)
                                                            return
                                                        document.images.slide.src=eval("image"+step+".src")
                                                        if (step<4)
                                                            step++
                                                        else
                                                            step=1
                                                      
                                                        setTimeout("slideit()",1250)
                                                    }
                                                     slideit()
                                                  
                                                  </script>

Posted 21-Jan-15 21:24pm

Member 11393502

Updated 25-Jan-15 23:40pm

Kenneth Haugland

v2

Add a Solution

Comments

jaket-cp 26-Jan-15 4:29am

I have updated my solution with jsfiddle examples.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaket-cp · Answer 1 · 2015-01-21T22:46:00

You have not mentioned how you want the setTimeout to be stopped.

clearTimeout can be used to stop setTimeout, but it needs to be assigned to a variable.

JavaScript

//set global variable for setTimeout to be assigned to, similar how the var step variable is created.
var ImgSlide;

//Change setTimeout to
ImgSlide = setTimeout("slideit()",1250)

//create a stopit type function and call it to stop setTimeout
function stopit(){
    clearTimeout(ImgSlide);
}

HTML

<!--the stopit function can be call with anchor like so-->
<a href="#" >StopIt</a>

For working example read, Window setTimeout() Method: http://www.w3schools.com/jsref/met_win_settimeout.asp[^]

happy coding :)

Here are 2 jsfiddle examples:
OnClick - http://jsfiddle.net/yqtf2qzt/[^]
MouseOver/MouseOut - http://jsfiddle.net/yqtf2qzt/1/[^]

Raje_ · Answer 2 · 2015-01-21T23:08:00

Here I modify your code. Please check if it works well :

HTML

<img src="images/i1.jpg" id="slide" height="200" width="500px" alt="" name="slide" />

C#

<script type="text/javascript">
        var slideimages = new Array()
        slideimages[0] = new Image()
        slideimages[0].src = "images/i1.jpg"
        slideimages[1] = new Image()
        slideimages[1].src = "images/i2.jpg"
        slideimages[2] = new Image()
        slideimages[2].src = "images/i3.jpg"

        var pauseSlide = true;
        var step = 0

        function slideit() {
            document.getElementById("slide").onmouseover = function () {
                pauseSlide = false;
            };

            document.getElementById("slide").onmouseout = function () {
                pauseSlide = true;
            };

            if (!document.images)
                return
            if (pauseSlide) {
                document.getElementById('slide').src = slideimages[step].src

                if (step < 2)
                    step++
                else
                    step = 0
            }
            setTimeout("slideit()", 500);

        }
        slideit();

    </script>

Hope it helps you.
Good luck.

i want to pause the sliding image on mouse over

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0