rollovers..

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Frances Del Rio

    #1

    rollovers..




    Hi, I while back I was having a problem with rollovers, even though I do
    them in a very conventional way:

    function roll(i) {
    document[i].src = eval(i + "_roll.src" )
    } // in which value passed to function is "name" attr in img tag..

    but on my home page, www.francesdelrio.com, I have rollovers like this:

    function doRoll(Img,newI mage) {
    Img.src = newImage.src;
    Img.width = newImage.width; // what's the point
    Img.height = newImage.height ; // of these two?
    }
    function roll_web() {
    doRoll(document .web, web_roll);
    } // etc.

    I'm just trying to remember why I did it like this, it was a solution
    given to me by someone in this ng, I believe the problem might have been
    that rollovers were not working in Opera (don't have Opera installed
    anymore, can't check it out); does this mean all my other rollovers are
    not working in Opera? (if you have Opera, can u pls go to
    www.francesdelrio.com/resume in Opera and roll over images near top of
    page and see if rollovers work? How prevelant is use of Opera? do I
    need to always script taking Opera into account? And does Opera behave
    the same w/mac as w/PCs?) thank you..

    Frances Del Rio

  • Lasse Reichstein Nielsen

    #2
    Re: rollovers..

    Frances Del Rio <fdr58@yahoo.co m> writes:
    [color=blue]
    > Hi, I while back I was having a problem with rollovers, even though I
    > do them in a very conventional way:
    >
    > function roll(i) {
    > document[i].src = eval(i + "_roll.src" )
    > } // in which value passed to function is "name" attr in img tag..[/color]

    That might be conventional, but it sure isn't good. You should never
    use eval to access elements. It easily leads to problems, and there are
    always better ways.

    Also, it seems you write document[i] to refer to the image whose name
    is in i. It is much safer and standards compliant to use
    document.images[i].

    I assume i+"_roll" refers to a global variable referring to an Image
    element (used for preloading the image file). Apart from polluting the
    global namescape, global variables are harder to refer to
    programatically , so I would have preferred to keep them in an
    object. That is, instead of:
    var foo_roll = new Image();
    foo_roll.src = "someImg.pn g";
    var bar_roll = new Image();
    bar_roll.src = "someOtherImg.p ng";
    ...
    I would do:
    var myImages = new Object();
    myImages['foo'] = new Image();
    myImages['foo'].src="someImage .png";
    myImages['bar'] = new Image();
    myImages['bar'].src="someOther Image.png";
    ...
    Then the above could be written as
    document.images[i].src = myImages[i].src;
    [color=blue]
    > but on my home page, www.francesdelrio.com, I have rollovers like this:
    >
    > function doRoll(Img,newI mage) {
    > Img.src = newImage.src;
    > Img.width = newImage.width; // what's the point
    > Img.height = newImage.height ; // of these two?[/color]

    Sets the image height and width to the ones of the image you switch
    to.
    [color=blue]
    > }
    > function roll_web() {
    > doRoll(document .web, web_roll);
    > } // etc.
    >
    > I'm just trying to remember why I did it like this, it was a
    > solution given to me by someone in this ng, I believe the problem
    > might have been that rollovers were not working in Opera (don't have
    > Opera installed anymore, can't check it out); does this mean all my
    > other rollovers are not working in Opera? (if you have Opera, can u
    > pls go to www.francesdelrio.com/resume in Opera and roll over images
    > near top of page and see if rollovers work?[/color]

    Using Opera 7.5 preview 4. It doesn't work.
    The page contains this gem:
    var div_top = eval('document. getElementById( ' + "curr_div" + ')')
    As always, eval is not needed. In this particular case it is
    completely unnecessary. Just write:
    var div_top = document.getEle mentById(curr_d iv);
    Ditto for
    var div_top = eval('document. all.' + curr_div)
    which should just be:
    var div_top = document.all[curr_div];

    [color=blue]
    > How prevelant is use of Opera?[/color]

    Who knows. I use it all the time. Opera Software can apparently earn a
    profit selling it, so there has to be some users. I see statistics between
    0 and 2 procent most of the time, but as ususal, you can't trust these.
    Out of the box, Opera identifies itself as IE to people who don't know
    where to look.
    [color=blue]
    > do I need to always script taking Opera into account?[/color]

    Shouldn't be necessary, *if* you code to the standards. Opera has very
    good standards support, as do most modern browsers (which excludes IE
    :). Writing to standards will allow you to support Mozilla, Opera,
    Safari, Konqueror, IceBrowser, etc., including browsers you have never
    heard about and browsers that have not been written yet.
    [color=blue]
    > And does Opera behave the same w/mac as w/PCs?)[/color]

    Opera 7 uses the same code base for all platforms, so it should act
    the same (although installed fonts might differ between platforms).
    Opera 6 had more differences, but nothing that would affect a
    roll-over script. They have worked almost the same since the first
    browser to support them.

    /L
    --
    Lasse Reichstein Nielsen - lrn@hotpop.com
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
    'Faith without judgement merely degrades the spirit divine.'

    Comment

    • Frances Del Rio

      #3
      Re: rollovers..

      Lasse Reichstein Nielsen wrote:
      [color=blue]
      > Also, it seems you write document[i] to refer to the image whose name
      > is in i. It is much safer and standards compliant to use
      > document.images[i].[/color]

      ooooppsss.. right about that.... thanks..

      pt well taken re eval(yada yada)
      I took that script verbatim from a DHTML book -- (by Jason Teague, from
      QuickStart series.. concise little books, at times very useful ;)....)
      but I also went thru JS Bible practically cover-to-cover.. and if I
      remember well, I believe I author (Danny sthg) says there that when you
      have a long string to be tapped it's better to do like this
      ( eval(yoyo) ) go figure.. so many people have so many diff. ways of
      doing things... many thanks for yr useful response... Frances

      [color=blue]
      > I assume i+"_roll" refers to a global variable referring to an Image
      > element (used for preloading the image file). Apart from polluting the
      > global namescape, global variables are harder to refer to
      > programatically , so I would have preferred to keep them in an
      > object. That is, instead of:
      > var foo_roll = new Image();
      > foo_roll.src = "someImg.pn g";
      > var bar_roll = new Image();
      > bar_roll.src = "someOtherImg.p ng";
      > ...
      > I would do:
      > var myImages = new Object();
      > myImages['foo'] = new Image();
      > myImages['foo'].src="someImage .png";
      > myImages['bar'] = new Image();
      > myImages['bar'].src="someOther Image.png";
      > ...
      > Then the above could be written as
      > document.images[i].src = myImages[i].src;
      >
      >[color=green]
      >>but on my home page, www.francesdelrio.com, I have rollovers like this:
      >>
      >> function doRoll(Img,newI mage) {
      >> Img.src = newImage.src;
      >> Img.width = newImage.width; // what's the point
      >> Img.height = newImage.height ; // of these two?[/color]
      >
      >
      > Sets the image height and width to the ones of the image you switch
      > to.
      >
      >[color=green]
      >>}
      >> function roll_web() {
      >> doRoll(document .web, web_roll);
      >>} // etc.
      >>
      >> I'm just trying to remember why I did it like this, it was a
      >> solution given to me by someone in this ng, I believe the problem
      >> might have been that rollovers were not working in Opera (don't have
      >> Opera installed anymore, can't check it out); does this mean all my
      >> other rollovers are not working in Opera? (if you have Opera, can u
      >> pls go to www.francesdelrio.com/resume in Opera and roll over images
      >> near top of page and see if rollovers work?[/color]
      >
      >
      > Using Opera 7.5 preview 4. It doesn't work.
      > The page contains this gem:
      > var div_top = eval('document. getElementById( ' + "curr_div" + ')')
      > As always, eval is not needed. In this particular case it is
      > completely unnecessary. Just write:
      > var div_top = document.getEle mentById(curr_d iv);
      > Ditto for
      > var div_top = eval('document. all.' + curr_div)
      > which should just be:
      > var div_top = document.all[curr_div];
      >
      >
      >[color=green]
      >>How prevelant is use of Opera?[/color]
      >
      >
      > Who knows. I use it all the time. Opera Software can apparently earn a
      > profit selling it, so there has to be some users. I see statistics between
      > 0 and 2 procent most of the time, but as ususal, you can't trust these.
      > Out of the box, Opera identifies itself as IE to people who don't know
      > where to look.
      >
      >[color=green]
      >>do I need to always script taking Opera into account?[/color]
      >
      >
      > Shouldn't be necessary, *if* you code to the standards. Opera has very
      > good standards support, as do most modern browsers (which excludes IE
      > :). Writing to standards will allow you to support Mozilla, Opera,
      > Safari, Konqueror, IceBrowser, etc., including browsers you have never
      > heard about and browsers that have not been written yet.
      >
      >[color=green]
      >>And does Opera behave the same w/mac as w/PCs?)[/color]
      >
      >
      > Opera 7 uses the same code base for all platforms, so it should act
      > the same (although installed fonts might differ between platforms).
      > Opera 6 had more differences, but nothing that would affect a
      > roll-over script. They have worked almost the same since the first
      > browser to support them.
      >
      > /L[/color]

      Comment

      Working...