Safari mouseOver mouseOut?

Joined
Apr 10, 2008
Messages
6
Reaction score
0
Points
1
Hello,

I recently coded some pages on my website that experimented using mouseOver and mouseOut javascript events to trigger opening and closing images. Someone using the Safari browser reported a problem so I am hoping someone here might confirm what doesn't work if so.

What I did was set up thumbnails at the sides of some pages that when a mouse moves over an image, a mouseover event triggers that then opens up a custom sized javascript window at a specific location on a monitor that contains an image anchored in the imagemap at the thumbnail. And when one moves off the thumbnail, the opened window containing the image closes. The reason for doing so is to reduce the need to load excessive memory for images embedded on pages. Thus instead of having full sized images on a page, I just put thumbnails at the sides that require much less space to load. If a visitor wishes to view the image for a thumbnail, they merely need to move their mouse over that thumbnail that opens up a new custom sized and positioned window and likewise to close the image they merely need to move off the thumbnail. This removes the need to double click the link and later bother to close the window manually.

Apparently what someone using one of the Safari versions said was happening, was mouseOver was working fine but mouseOut was not closing those windows and instead they just stacked up on his display until they manually closed them. Of course that would be a big nuisance thus a serious issue. And I do believe someone said on their system a mouseOver brought up a pointing icon that they then had to manually mouse select in order to have the image window open. However there was no info as to what browser they were using.

Note I am not a Mac user but rather am on a Windows PC running the IE browser. I searched around for some information about what may be going on but only got a zillion search hits, none of which enlightened me if there even is any problem. And note I am a photographer and also a old debug test engineer in the San Jose area.

This is my homepage:
http://www.davidsenesac.com/

At top right is this sub-page link:
Spring 2008 Wildflower Trip Chronicles

That brings up this chronicles contents sub-page:
http://www.davidsenesac.com/Spring_2008/spring_2008_p0.html

Select any of the 1 thru 9 pages, all of which have the above implemented.

thanks for any help folks,
David Senesac
 
Joined
Mar 16, 2008
Messages
645
Reaction score
22
Points
18
Location
Twin Cities (Suburbs) Minnesota
Your Mac's Specs
 15" 2.4 MBP  iPod Classic 80 GB, Silver
No images enlarge for me unless I click them. (using Safari on Windows) Nice pics though, I like the winter ones :)
 
Joined
Mar 4, 2008
Messages
1,115
Reaction score
43
Points
48
Your Mac's Specs
Unibody MacBook Pro 2.26, 4gb RAM, 500gb HD
Are you aware that Safari is also available for Windows?

http://www.apple.com/downloads/

I've never specifically compared the two, but I would imagine the Windows and OS X versions would behave similarly...
 

dtravis7


Retired Staff
Joined
Jan 4, 2005
Messages
30,133
Reaction score
703
Points
113
Location
Modesto, Ca.
Your Mac's Specs
MacMini M-1 MacOS Monterey, iMac 2010 27"Quad I7 , MBPLate2011, iPad Pro10.5", iPhoneSE
No images enlarge for me unless I click them. (using Safari on Windows) Nice pics though, I like the winter ones :)

What I am getting here is the windows pop up and immediately close and open and close over and over till I stop pointing at the pics.

You have to enable Pop Ups in Safari for the window to show. It works in Firefox on OSX. Doing farther checking. Will get back to you.

Edit: checked with many different browsers. One problem is you are using Pop Up's to display the pics and most users now a days have Pop Up's blocked.

Both Safari and the latest WebKit build display the opening and closing windows which will not stay open.
 
Joined
Mar 16, 2008
Messages
645
Reaction score
22
Points
18
Location
Twin Cities (Suburbs) Minnesota
Your Mac's Specs
 15" 2.4 MBP  iPod Classic 80 GB, Silver
I don't know how to allow popups with safari :eek: For specific sites atleast... o well. I don't like them anyway.
 

dtravis7


Retired Staff
Joined
Jan 4, 2005
Messages
30,133
Reaction score
703
Points
113
Location
Modesto, Ca.
Your Mac's Specs
MacMini M-1 MacOS Monterey, iMac 2010 27"Quad I7 , MBPLate2011, iPad Pro10.5", iPhoneSE
I don't know how to allow popups with safari :eek: For specific sites atleast... o well. I don't like them anyway.

Agreed totally. Most people do not want Pop Up's turned on.

Update, Windows Safari 3.1 and latest Webkit work fine as long as you turn off Pop Up Blocking from the Edit menu.

It's only on OSX (both Safari 3.1 and Webkit) that the windows continually open and close and will not stay open while pointing at the picture.
 
OP
D
Joined
Apr 10, 2008
Messages
6
Reaction score
0
Points
1
This link explains how to disable or enable popup window blocking:

http://www.upenn.edu/computing/help/doc/email/popup.html#Safari

On the lower left side of my Contents page, I have a READme link that includes that same link plus some additional info.

dtravis7, if I understand your last post, if pop up blocking is temporarily disabled in any of those browsers, then my page functions as I've indicated? Or is there some regular manual activity involved beyond mouseover and mouseout? Although I understand why people have had to resort to the popup blockers due to obnoxious code written by advertisers, if what I am doing is functional, it potentially could be very useful for displaying a lot more image content within pages without the huge bandwidth penalties. ...David
 

dtravis7


Retired Staff
Joined
Jan 4, 2005
Messages
30,133
Reaction score
703
Points
113
Location
Modesto, Ca.
Your Mac's Specs
MacMini M-1 MacOS Monterey, iMac 2010 27"Quad I7 , MBPLate2011, iPad Pro10.5", iPhoneSE
Ok will try to word it differently. Safari 3.1 on OSX 10.5 Leopard with Popup blocking turned off works but the picture opens and closes really fast all on it's own till I move the mouse pointer away from the main picture.

Safari 3.1 under Windows XP SP2 though works perfectly and the window with the Picture opens and stays open till I move the mouse away from the main picture.

Firefox both on OSX and XP Pro works perfectly as long as I allow Popups.

I hope that makes it more clear. It's not working correctly on Safari 3.1 under Leopard. Will not stay open and looks like it's caught in a loop. Tried it on 3 different Macs. Same results.

It's strange to me that the Windows version of Safari does not behave that way at all and works perfectly.

If I can be of any more help testing it out let me know. I have many Windows, Linux and OSX systems here.
 
Joined
Jul 8, 2007
Messages
31
Reaction score
2
Points
8
Location
SLC, UT
Your Mac's Specs
Macbook Pro, 2.2Ghz, 4GB Memory, 120GB HDD, LCD Display, OS X Tiger
what's happening (atleast on Safari 3.1 for Mac) is it's behaving exactly as its supposed to (or as you have told it to), with pop-ups turned off it will pop up a pic when browsed over, BUT it then immediately closes that pic doing this over and over until moved off the pic. The reason for this is when I mouse over the pic it pops up another window and brings the focus to that windows and in doing so it takes the focus off the original image thus "mousingOut" and then doing that action (closing the window). Once that window is closed the focus is put back on the original image, thus activating a "mouseOver" and the process repeats endlessly until you move your mouse off the original image. Hopes that makes sense.


So in reality, it looks like only Safari is handling it correctly ;) Which is not a surprise since most browsers are poorly implemented. Try it in the latest Opera and I bet it does the same thing.
 
OP
D
Joined
Apr 10, 2008
Messages
6
Reaction score
0
Points
1
what's happening (atleast on Safari 3.1 for Mac) is it's behaving exactly as its supposed to (or as you have told it to), with pop-ups turned off it will pop up a pic when browsed over, BUT it then immediately closes that pic doing this over and over until moved off the pic. The reason for this is when I mouse over the pic it pops up another window and brings the focus to that windows and in doing so it takes the focus off the original image thus "mousingOut" and then doing that action (closing the window). Once that window is closed the focus is put back on the original image, thus activating a "mouseOver" and the process repeats endlessly until you move your mouse off the original image. Hopes that makes sense.


So in reality, it looks like only Safari is handling it correctly ;) Which is not a surprise since most browsers are poorly implemented. Try it in the latest Opera and I bet it does the same thing.


What you are describing occurs in other browsers too like the IE that I use. In the READme, I explain one needs to open up a browser window that spreads across most of one's desktop width instead of a small window that is say only a few hundred pixels wide in one corner of one's desktop. The reason is I open the top left corner of image windows in one of two specific desktop locations. Those locations and the rest of such an opening windows ought not be where a thumbnail image was mouseover'd. For thumbnails along the left side of my pages, windows will open at 100 pixels below the top of one's desktop and 400 pixels to the right of the left edge. Thus if one opened a small browser window on the desktop say only 500 pixels wide and placed it with its left window edge 400 pixels to the right of the left desktop edge, an opening image window would occur right atop the thumbnail and cause the exact endless open close action you are relating. Thus as my Readme explains place the browser window across the desktop in a more centered way using most of one's desktop width.

Likewise, the thumbnails on the right side open close to the left desktop edge. Thus if one uses a small VGA sized desktop at 640 pixels, my pages would not work and SVGA at 800 pixels wide would be marginal. So one ought to be using at least an XVGA ie 1024 pixel width desktop since my image sizes themselves are 720 pixles wide. ...David
 

dtravis7


Retired Staff
Joined
Jan 4, 2005
Messages
30,133
Reaction score
703
Points
113
Location
Modesto, Ca.
Your Mac's Specs
MacMini M-1 MacOS Monterey, iMac 2010 27"Quad I7 , MBPLate2011, iPad Pro10.5", iPhoneSE
The Pop Up stays open on the latest version of Opera on OSX till I move away from the original image.

Firefox and Camino open the popup but it never closes on it's own.

Just tried Firefox 3 Beta 4 and the latest Nightly build of Opera and both work perfectly on the Popup pics.
 
Joined
Apr 23, 2007
Messages
377
Reaction score
4
Points
18
Location
Coatesville, PA
Your Mac's Specs
MBP 15", 2.33 GHz, 2Gb
I don't think anyone suggested it, but you can achieve the same effect without popups. It also depends how much you like playing with HTML/Javascript. Instead of making a new popup window with each mouse over, you could put each large image in its own DIV tag at the bottom of the page and hide them (display: none). Then write a little function in javascript that you can pass a picture name to so that when a visitor moves the mouse over the picture (onMouseOver="javascript: showImage('thisPicture');") it sets the CSS style of the DIV holding the appropriate image to be visible, and sets the positioning to be somewhere in the center of the visible browser window (position: absolute; top: 100px; left 100px; etc etc).

There's a few ways to do it, but that's a simple and quick way. I've done that for a few sites where customers wanted similar functionality. It doesn't require the user to do anything with popups, and you don't have to worry about popup blockers.
 
Joined
Jul 8, 2007
Messages
31
Reaction score
2
Points
8
Location
SLC, UT
Your Mac's Specs
Macbook Pro, 2.2Ghz, 4GB Memory, 120GB HDD, LCD Display, OS X Tiger
What you are describing occurs in other browsers too like the IE that I use. In the READme, I explain one needs to open up a browser window that spreads across most of one's desktop width instead of a small window that is say only a few hundred pixels wide in one corner of one's desktop. The reason is I open the top left corner of image windows in one of two specific desktop locations. Those locations and the rest of such an opening windows ought not be where a thumbnail image was mouseover'd. For thumbnails along the left side of my pages, windows will open at 100 pixels below the top of one's desktop and 400 pixels to the right of the left edge. Thus if one opened a small browser window on the desktop say only 500 pixels wide and placed it with its left window edge 400 pixels to the right of the left desktop edge, an opening image window would occur right atop the thumbnail and cause the exact endless open close action you are relating. Thus as my Readme explains place the browser window across the desktop in a more centered way using most of one's desktop width.

Likewise, the thumbnails on the right side open close to the left desktop edge. Thus if one uses a small VGA sized desktop at 640 pixels, my pages would not work and SVGA at 800 pixels wide would be marginal. So one ought to be using at least an XVGA ie 1024 pixel width desktop since my image sizes themselves are 720 pixles wide. ...David

All I'm saying is it's doing what you have programmed it to do. Just because it works how you want it to (not how it's programmed to) in other browsers, doesn't mean it's correct. Sorry, but your site is very poorly designed/programmed. If your potential users have to read a readme in order for your site to work correctly, then you know you have serious issues.
 
OP
D
Joined
Apr 10, 2008
Messages
6
Reaction score
0
Points
1
All ... If your potential users have to read a readme in order for your site to work correctly, then you know you have serious issues.

That assessment is of course correct and something I have been aware of. As I've stated, these chronicle pages are an experiment that I expected would have problems with some browsers and a reason I have asked for some feedback from this community. And the MacForums feedback is already much appreciated, thankyou. With IE that the majority of users have, the main issue is browser window placement and turning off popup blocking. I would expect some visitors especially those surfing for mere amusements into my site will not have the patience to bother and quickly exit elsewhere. Certainly not likely to be interested in reading several pages of text. On the other hand my unually structured site has unique information that those with a more serious interest, especially about natural history science may put up with the minor impediments. ...David
 
OP
D
Joined
Apr 10, 2008
Messages
6
Reaction score
0
Points
1
I don't think anyone suggested it, but you can achieve the same effect without popups. It also depends how much you like playing with HTML/Javascript. Instead of making a new popup window with each mouse over, you could put each large image in its own DIV tag at the bottom of the page and hide them (display: none). Then write a little function in javascript that you can pass a picture name to so that when a visitor moves the mouse over the picture (onMouseOver="javascript: showImage('thisPicture');") it sets the CSS style of the DIV holding the appropriate image to be visible, and sets the positioning to be somewhere in the center of the visible browser window (position: absolute; top: 100px; left 100px; etc etc).

There's a few ways to do it, but that's a simple and quick way. I've done that for a few sites where customers wanted similar functionality. It doesn't require the user to do anything with popups, and you don't have to worry about popup blockers.

Thyamine, that is an excellent suggestion I only have some vague technical understanding of implementation though have read all the terse CSS2 documentation for so understand the basics of what you are relating. Actually for amusement I've implemented a display none function with mouseOver just left of my picture on my homepage. If that takes care of the popup problem while reducing page loading bandwidth for many more images, then someone has already figured out a better solution than the path I've been experimenting with here. ...David
 
Joined
Apr 23, 2007
Messages
377
Reaction score
4
Points
18
Location
Coatesville, PA
Your Mac's Specs
MBP 15", 2.33 GHz, 2Gb
If you are interested, I think here are some examples that may help.

http://javascript.internet.com/miscellaneous/popup-div.html

The idea is straight-forward, so start with something basic, and then slowly add to it until it looks the way you want. Just making it hide/show on command would be the first part.
 
OP
D
Joined
Apr 10, 2008
Messages
6
Reaction score
0
Points
1
At this point I have given up on using mouseOver's over imagemaps to trigger opening the image windows and changed all my code to use the onClick event trigger that I'd already implemented for the 4x5 image links embedded in the text as normal anchor links. Thus the popup blocking will not be an issue. Maybe this is a better implementation in any case because it removes the annoyance of accidentally triggering the opening of windows when moving the mouse about on one's desktop.

I did do a rather thorough investigation of implementing the mouseover function by using a statement that switches between two div id classes. However opening up absolutely positioned images and placing them in the correct location within a long page controlled by scrollbars as mine are, has a number of implementation issues that specific browsers are not consistent with. I almost got this to work except one of the IE layer visibility issues proved intractable.

Thankyou again Mac folks. Although due to practical issues in hardware test engineering in Silicon Valley, I have needed to work mainly with Wintel type pc's, I have always admired Apple products and hoped they would eventually successfully thrive in some niche which today has come to be. By the way this guy is now looking for a 9-5 m-f job in engineering debug and test down here in the South Bay.

Best of luck,
David Senesac
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top