Thread: RollOver

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    2
    Rep Power
    0

    RollOver


    Helo!
    Im trying to do rollovers but something is going wrong , i can see picture but when i "mouseover it (sorry rly dont know how to say it) nothing happens,here is my script:
    Code:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> rollover </TITLE>
    <script language=javascript text="text/javascript">
    if(document.images)
    {Stena=new Image
     rodina=new Image
    
     Stena.src="Stena.jpg"
     rodina.src="rodina.jpg"}
    else
    {Stena=""
     rodina=""
     document.arrow=""} 
    </script>
    </HEAD>
    <BODY>
    <a href="youtube.com"
    onMouseRollover="document.arrow.src=rodina.src";
    onMouseout="document.arrow.src=Stena.src">
    <img src="Stena.jpg"></a>
    </BODY>
    </HTML>
    Thanks for answers!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,173
    Rep Power
    184
    You need to use onmouseover, not onMouseRollover and here is a basic tutorial, about JavaScript Image Flips: http://www.htmlgoodies.com/tutorials...le.php/3479941. This should give you a basic idea on how to do, what your wanting to do.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    2
    Rep Power
    0
    thanks , i used it even with mouseOver but it didnt work , this is script from "javascript world wide web" (book im learning from)
    anyway , the script which i copied from the site you told me to visit doesnt work either , :
    Code:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> test </TITLE>
    <script language=javascript type="text/javascript">
    Image1=new Image
    Image1.src="Stena.jpg"
    Image2=new Image
    Image2.src="rodina.jpg"
    function swap()
    {document.imageflip.src=Image2.src;return true;}
    Function swapback()
    {document.imageflip.src=Image1.src;return true;}
    </script>
    
    </HEAD>
    <BODY>
    <a href="www.youtube.com"
    onMouseOver="swap()";
    onMouseOut="swapback()">
    <img src="stena.jpg"></a>
    
    
    </BODY>
    </HTML>
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,173
    Rep Power
    184
    Try this... and I know your learning how to do this with JavaScript, but the easiest and most common way to do a image flip; is with CSS and use JavaScript to preload your images:
    Code:
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> test </TITLE>
    <script type="text/javascript">
    
    var Image1 = new Image();
    Image1.src = "Stena.jpg";
    var Image2 = new Image();
    Image2.src = "rodina.jpg";
    
    function swap()
    {
    document.imageflip.src = "rodina.jpg";
    }
    function swapback()
    {
    document.imageflip.src = "Stena.jpg";
    }
    
    </script>
    
    </HEAD>
    <BODY>
    
    <a href="www.youtube.com"><img name="imageflip" src="stena.jpg" onmouseover="swap()" onmouseout="swapback()"></a>
    
    
    </BODY>
    </HTML>

IMN logo majestic logo threadwatch logo seochat tools logo