rollovers..

[Frances Del Rio]

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.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,newImage) {
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]

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.src = eval(i + "_roll.src")
} // in which value passed to function is "name" attr in img tag..

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 to refer to the image whose name
is in i. It is much safer and standards compliant to use
document.images.

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.png";
var bar_roll = new Image();
bar_roll.src = "someOtherImg.png";
...
I would do:
var myImages = new Object();
myImages['foo'] = new Image();
myImages['foo'].src="someImage.png";
myImages['bar'] = new Image();
myImages['bar'].src="someOtherImage.png";
...
Then the above could be written as
document.images.src = myImages.src;

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

function doRoll(Img,newImage) {
Img.src = newImage.src;
Img.width = newImage.width; // what's the point
Img.height = newImage.height; // of these two?

Sets the image height and width to the ones of the image you switch
to.

}
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?

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.getElementById(curr_div);
Ditto for
var div_top = eval('document.all.' + curr_div)
which should just be:
var div_top = document.all[curr_div];

How prevelant is use of Opera?

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.

do I need to always script taking Opera into account?

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.

And does Opera behave the same w/mac as w/PCs?)

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

 

[Frances Del Rio]

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

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

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.png";
var bar_roll = new Image();
bar_roll.src = "someOtherImg.png";
...
I would do:
var myImages = new Object();
myImages['foo'] = new Image();
myImages['foo'].src="someImage.png";
myImages['bar'] = new Image();
myImages['bar'].src="someOtherImage.png";
...
Then the above could be written as
document.images.src = myImages.src;

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

function doRoll(Img,newImage) {
Img.src = newImage.src;
Img.width = newImage.width; // what's the point
Img.height = newImage.height; // of these two?

Sets the image height and width to the ones of the image you switch
to.

}
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?

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.getElementById(curr_div);
Ditto for
var div_top = eval('document.all.' + curr_div)
which should just be:
var div_top = document.all[curr_div];

How prevelant is use of Opera?

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.

do I need to always script taking Opera into account?

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.

And does Opera behave the same w/mac as w/PCs?)

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