Results 1 to 8 of 8
  1. #1

    Help with Javascript rollover in Firefox 2.0

    Ive created a portfolio website and my image links I have used some javascipt to made the images fade when the page is loaded and when you put your mouse over them they light up.

    It works fine In IE but not Firefox 2.0

    The site is

    www.gill-designs.co.uk

    and the code im using for each of the images is :

    Code:
    <SCRIPT>
    <!--
    function high(which2){
    theobject=which2
    highlighting=setInterval("highlightit(theobject)",50)
    }
    function low(which2){
    clearInterval(highlighting)
    which2.filters.alpha.opacity=40
    } 
    function highlightit(cur2){
    if (cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (window.highlighting)
    clearInterval(highlighting)
    }
    //-->
    </script>
    
    <a href="http://link.com" target="_blank" title="title"><img src="images/image.png" width="100" height="100" border="0" style="FILTER: alpha(opacity=40)" onmouseover=high(this) onmouseout=low(this)></a>
    Any help on why it doesnt work in FF2 would be greatly appreciated.

  2. #2
    Join Date
    Oct 2004
    Location
    Złocieniec, Poland
    Posts
    190
    cuz that filters work only with IE
    so u need extra code where u need to use
    style.MozOpacity or style.opacity instead (or better both cuz style.opacity may not work with firefox)
    www.goscinnawies.pl - family business, small travel agency in Poland

  3. #3
    Cheers. Will give it a try.

    edit: Ive given it a try and still no luck, is there any chance that you can put the code that you think it should be on here? Thanks alot.
    Last edited by jsgilly20; 11-19-2006 at 12:51 PM.

  4. #4
    Join Date
    Apr 2005
    Posts
    501
    A few notes:
    1) Filters are not standard web code so they only work in IE as stated above.
    2) Firefox does work with the CSS3 attribute 'opacity' but not many other browsers do.
    3) IE6 does not work with .png images well at all while all other browsers do.
    4) Your doctype is incomplete and IE is in quirks mode. All new pages should use this one:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    5) The 'lang=" attribute has been deprecated for years. Remove it.
    6) In CSS you must specify units for all attributes, such as px.
    7) Validate your html and your css to see your other errors that need fixing.
    IE7 is nine years behind the standards or wrong.
    But it works in IE!
    "IE is a cancer on the web" -- Paul Thurott
    "Avoid hacker-bait apps like Internet Explorer" -- Kevin Mitnick

  5. #5
    Quote Originally Posted by drhowarddrfine
    A few notes:
    3) IE6 does not work with .png images well at all while all other browsers do.
    4) Your doctype is incomplete and IE is in quirks mode. All new pages should use this one:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    3 - There better quality than other image types and never had any problems

    4 - It does.

    Ive also only realy started using CSS and starting of just using div and css inside the actualy webpages rather than creating other sheets until im 100%.

  6. #6
    Join Date
    Apr 2005
    Posts
    501
    Yes, PNGs are better quality but I meant IE6 cannot do opacity with PNGs. IE7 now does.

    No, you may think you are serving that doctype but you're not. This is what I'm getting:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    IE7 is nine years behind the standards or wrong.
    But it works in IE!
    "IE is a cancer on the web" -- Paul Thurott
    "Avoid hacker-bait apps like Internet Explorer" -- Kevin Mitnick

  7. #7
    Did you read my original post?

    It WORKs with IE6, but not the latest Firefox.

  8. #8
    Join Date
    Oct 2004
    Location
    Złocieniec, Poland
    Posts
    190
    Quote Originally Posted by jsgilly20
    Did you read my original post?

    It WORKs with IE6, but not the latest Firefox.
    yeah but u r talkin about CSS opacity and drhowarddrfine about PNG format which has also such "feature" but IE does not support native alpha channel transparency in PNG images

    as for now ur script does not work with any other browser than IE and not only FF2

    btw why u declared exactly the same js functions several times in ur code?

    anyway ur code could look like this:

    function high(which2){
    theobject=which2
    highlighting=setInterval("highlightit(theobject)",50)
    }
    function low(which2){
    clearInterval(highlighting)
    if(document.all) {
    which2.filters.alpha.opacity=40;
    }
    else {
    which2.style.opacity=0.4;
    }
    }
    function highlightit(cur2){
    if(document.all) {
    if (cur2.filters.alpha.opacity<100) {
    cur2.filters.alpha.opacity+=10;
    }
    else if (window.highlighting) {
    clearInterval(highlighting)
    }
    }
    else {
    cur3=parseFloat(cur2.style.opacity);
    if (cur3 < parseFloat(1.0)) {
    cur2.style.opacity=cur3+parseFloat(0.1);
    }
    else if (window.highlighting) {
    clearInterval(highlighting)
    }
    }
    }
    but remember this is quick and dirty code

    1. browser recognition using just document.all is silly
    2. im unsure if all that parseFloat() are neccessary
    3. please note that opacity values for IE are from 0 to 100 and for FF from 0.0 to 1.0
    4. remember to set initial styles for that 3 images to style="filter:alpha(opacity=40);opacity:0.4"

    hope this will help u
    Last edited by tiamak; 11-19-2006 at 08:58 PM.
    www.goscinnawies.pl - family business, small travel agency in Poland

Posting Permissions

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