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 5 of 5
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts

    image replacer for firefox?

    Hi, I have a fairly ordinary image rollover script that (guess?) doesn't work in Firefox.

    Can someone tell me why and suggest a good cross-browser replacement?

    Many thanks,

    Terry

    *********************
    <!--
    var base= images/mo_"
    var nrm = new Array();
    var omo = new Array();
    var stuff = new Array('image1','image2','image3');

    // Pre-load part.

    if (document.images)
    {
    for (i=0;i<stuff.length;i++)
    {
    nrm[i] = new Image;
    nrm[i].src = base + stuff[i] + ".gif"
    omo[i] = new Image;
    omo[i].src = base + stuff[i] + "_omo.gif";
    }
    }


    // The functions: first mouseover, then mouseout

    function over(no)
    {
    if (document.images)
    {
    document.images[stuff[no]].src = omo[no].src
    }
    }

    function out(no)
    {
    if (document.images)
    {
    document.images[stuff[no]].src = nrm[no].src
    }
    }
    // End -->

    **********************************

    In the page I use:

    <a onmouseover="over(0)" onmouseout="out(0)" href="http://www.whatever.com">
    <img src="images/mo_image1.gif" name="image1" border="0" alt="" width="50" height="50" align="right"></a>

    Image names are 'mo_image1.gif' and 'mo_image1_omo.gif'

    mo = mouse over and omo = on mouse out.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    PHP Code:
    <script type="text/javascript">
    var 
    ini ='images/';
    var 
    mid ='_omo'
    var fin ='.gif';
    function 
    roll(obj){
    var 
    oSrc obj.getAttribute('src').split('/')[obj.getAttribute('src').split('/').length-1].split('.')[0]
    obj.setAttribute('src',ini+oSrc+mid+fin);
    obj.onmouseout=function(){
    obj.setAttribute('src',ini+oSrc+fin)
    }
    }
    </script>
    ...
    ...
    <a href="http://www.whatever.com">
    <img src="images/mo_image1.gif" border="0" alt="" width="50" height="50" align="right" onmouseover=roll(this)></a>

    <a href="http://www.whatever.com">
    <img src="images/mo_image2.gif" border="0" alt="" width="50" height="50" align="right" onmouseover=roll(this)></a>

    <a href="http://www.whatever.com">
    <img src="images/mo_image3.gif" border="0" alt="" width="50" height="50" align="right" onmouseover=roll(this)></a> 
    Last edited by Kor; 10-24-2005 at 11:55 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Thanks KOR. It's funky and neat BUT...

    I applied your script and it works perfectly in IE, but not in Firefox.

    I have uploaded a demo page at:

    http://aapress.com.au/mouseoverdemo.html

    ...in case I have made an obvious error.

    Is it really a crossover script?

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    it works in Firefox... Check whether you have javascript disabled or not
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Yup! It's all true. Javasacript was disabled! Oh dear...

    Actually, my original works too, but yours is much better.

    Thanks,

    Terry


  •  

    Posting Permissions

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