Mac Forums

Mac Forums (http://www.mac-forums.com/forums/)
-   Web Design and Hosting (http://www.mac-forums.com/forums/web-design-hosting/)
-   -   Safari mouseOver mouseOut? (http://www.mac-forums.com/forums/web-design-hosting/104264-safari-mouseover-mouseout.html)

DavidS 04-10-2008 06:22 PM

Safari mouseOver mouseOut?
 
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_2...g_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

ogacon 04-10-2008 06:26 PM

No images enlarge for me unless I click them. (using Safari on Windows) Nice pics though, I like the winter ones :)

Jaygray 04-10-2008 06:31 PM

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 04-10-2008 06:55 PM

Quote:

Originally Posted by ogacon (Post 632745)
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.

ogacon 04-10-2008 07:00 PM

I don't know how to allow popups with safari :o For specific sites atleast... o well. I don't like them anyway.

dtravis7 04-10-2008 07:11 PM

Quote:

Originally Posted by ogacon (Post 632769)
I don't know how to allow popups with safari :o 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.

DavidS 04-10-2008 09:55 PM

This link explains how to disable or enable popup window blocking:

http://www.upenn.edu/computing/help/...up.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 04-10-2008 10:04 PM

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.

supergper 04-13-2008 03:08 PM

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.

DavidS 04-14-2008 07:45 PM

Quote:

Originally Posted by supergper (Post 634493)
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 04-14-2008 08:36 PM

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.

Thyamine 04-15-2008 08:03 AM

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.

supergper 04-15-2008 10:51 AM

Quote:

Originally Posted by DavidS (Post 635390)
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.

DavidS 04-15-2008 02:29 PM

Quote:

Originally Posted by supergper (Post 635721)
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

DavidS 04-15-2008 02:38 PM

Quote:

Originally Posted by Thyamine (Post 635663)
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


All times are GMT -4. The time now is 01:59 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.