My javascript works great for every browser but Safari. How can I fix that?

[David]

On every web browser except Safari, this website works great. (Well,
by "every" I mean Mozilla, Netscape, and Internet Explorer, for Mac
and Windows).

The site is: http://www.ruleofthirds.com

(the problem does not exist on the first page... just all the other
pages, so you'll have to click on something to see the problem)

The problem lies with images swapping on rollover. I use a small
black .gif file to swap with images at various places in the site so
that they seem to disappear when you're done mousing over them. I use
the same small black .gif file regardless of the size of the image
it's being swapped with. All the other browsers know to resize the
black .gif to the same size as the file it's being swapped with. But
Safari simply overlays the tiny black .gif on top of the image it's
being swapped with, leaving both images occupying the same space
(making it look like a small bite has been taken out of the image).

Can I fix this for Safari users without creating a big headache for
myself? (the only solution I can think of is to actually use black
..gif files that are the same size as the images they're swapping with
-- which seems unnecessarily complicated).

Anyone able to help? Since my target audience largely uses Macintosh
computers, I don't want to shrug off the Safari users.

[Note: I'm no pro when it comes to coding, so my scripting may be a
little sloppier than some...]

 

[Janwillem Borleffs]

The problem lies with images swapping on rollover. I use a small
black .gif file to swap with images at various places in the site so
that they seem to disappear when you're done mousing over them. I use
the same small black .gif file regardless of the size of the image
it's being swapped with. All the other browsers know to resize the
black .gif to the same size as the file it's being swapped with. But
Safari simply overlays the tiny black .gif on top of the image it's
being swapped with, leaving both images occupying the same space
(making it look like a small bite has been taken out of the image).

I'm not using a mac, so I can't be shure, but what you could try is to pass
the image's dimensions to the Image constructor when you aren't laready
doing this:

// Preload an image of 100 X 200 pixels
var img = new Image(100, 200);


HTH,
JW

 

[Lasse Reichstein Nielsen]

[ http://www.ruleofthirds.com ]

On every web browser except Safari, this website works great. (Well,
by "every" I mean Mozilla, Netscape, and Internet Explorer, for Mac
and Windows).

And nothing else will work.
In the portfolio pages, the doPic function contains two conditions:
if (ns5up || ie4up) {
....
else { if (ns5up == false && netscape == true) {

This pretty much excludes anything non-netscape and non-IE4+. If sure
excludes Opera and I would guess also Safari. Clicking on the image
has no effect when you don't match one of these tests.

You are also calling it with the "javascript:" pseudo protocol. That
is bad for several reasons, and you should use the onclick event handler
instead.

The problem lies with images swapping on rollover.

That code could do with a fixup too. It contains:
document.images[imgLocation].src = eval(imgLocation + now + ".src");
A value for "imgLocation" would be "image1" and "now" is, e.g., 4.

You never need to use the eval function to access an object property
or variable value. It will work, but it is prettier to use
document.images[imgLocation].src = window[imgLocation + now].src;
or, since you know the value of that src property, you can just set
it directly:
document.images[imgLocation].src =
(now==0)?"../images/black.gif""images/"+now+"-thumb.gif");

But Safari simply overlays the tiny black .gif on top of the image
it's being swapped with, leaving both images occupying the same
space (making it look like a small bite has been taken out of the
image).

That is obviously a bug. It fails to refresh the part of the display
that is no longer covered by the image.

Can I fix this for Safari users without creating a big headache for
myself?

You could change the CSS property "visibility" to "hidden" instead of
changing the image to black.

[Note: I'm no pro when it comes to coding, so my scripting may be a
little sloppier than some...]

Not really, you overestimate most of the coders out there

/L