By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,853 Members | 2,144 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,853 IT Pros & Developers. It's quick & easy.

Can't get onMouseOut to work...please help

P: n/a
Can somebody help me get the onMouseOut to work in this script? The
onMouseOver works great opening a new window with an image, but I'd like to
get the popup window to close onMouseOut. Is this possible? I'm guessing
it's not because the parent window loses focus when the popup opens.
Is there a better way to do this? I have thumbnails of my kids that I want
to open in a larger format when hoverer over so the grandparents can see
them better. I'd really like to have the images open as a watermark if
that's possible. I'm currently using:

<img src="/pics/oppsb.jpg" width="56" height="80" name="myImage"
onMouseover="javascript:myImage.height=160;myImage .width=112"
onMouseout="javascript:myImage.width=56;myImage.he ight=80">

But whenever I add an image I have to change "myImage(last)" to
"myImage(+1)". Which, when I organize the photos it takes forever to find
the last one.

Here's what I'm working with. It works great, like I said, to open a
window, but I can't get it to close without clicking the X. Any ideas?
<script type="text/javascript">

// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use

var popbackground="lightskyblue" //specify backcolor or background image for
pop window
var windowtitle="Image Window" //pop window title

function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))?
screenLeft+document.body.clientWidth/1-popwidth/2-popwidth :
detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))?
screenTop+document.body.clientHeight/100-popheight/2 :
detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var
winattributes='width='+popwidth+',height='+popheig ht+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)?
'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be
centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitl e+'</title><body
'+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom:
0.5em"><br>'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}

</script>
<img src="/pics/oppsb.jpg" width="56" height="80"
onMouseover="jkpopimage('pics/oppsb.jpg', 250, 410, 'OPPSb'); return false"
onMouseout="jkpopimage.close();">

--
Gary Beard
Jan 13 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Gary <gbeard12@ said the following on 1/12/2006 11:36 PM:
Can somebody help me get the onMouseOut to work in this script? The
onMouseOver works great opening a new window with an image, but I'd like to
get the popup window to close onMouseOut. Is this possible? I'm guessing
it's not because the parent window loses focus when the popup opens.
Is there a better way to do this? I have thumbnails of my kids that I want
to open in a larger format when hoverer over so the grandparents can see
them better. I'd really like to have the images open as a watermark if
that's possible. I'm currently using:

<img src="/pics/oppsb.jpg" width="56" height="80" name="myImage"
onMouseover="javascript:myImage.height=160;myImage .width=112"
onMouseout="javascript:myImage.width=56;myImage.he ight=80">

But whenever I add an image I have to change "myImage(last)" to
"myImage(+1)". Which, when I organize the photos it takes forever to find
the last one.

Here's what I'm working with. It works great, like I said, to open a
window, but I can't get it to close without clicking the X. Any ideas?
Looks like a whole lot of trouble to simply show a larger image.

<img src="small1.jpg"
onmouseover="document.images['bigImage'].src='big1.jpg'"....>

<img src="someBigImage.jpg" name="bigImage" .....>

You could add an onmouseout that swaps the big image back but I wouldn't
bother if it were me. If they mouseout, leave the current image until
they mouseover another image.
<snip>
<img src="/pics/oppsb.jpg" width="56" height="80"
onMouseover="jkpopimage('pics/oppsb.jpg', 250, 410, 'OPPSb'); return false"
onMouseout="jkpopimage.close();">


onmouseout="jkpopwin.close()"
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

Jan 13 '06 #2

P: n/a
Randy,
Will this create a popup window or just enlarge the image where it's at?
Here's the problem I am having. I am using a script that enlarges the pic
where it's at, but the whole page has to redraw to allow for the larger
image (which doesn't look very good). So, I made a table and made the row
heights large enough to accept the larger version of the pic (I'm only using
one pic and showing a small pic on the web page and when they mouse over it,
it enlarges to the actual picture size). I like how my new script opens a
popup window and closes it onMouseout.
Does this

<img src="small1.jpg"
onmouseover="document.images['bigImage'].src='big1.jpg'"....>

<img src="someBigImage.jpg" name="bigImage" .....>

need 2 pics, one small and one large, or can the "small1.jpg" have to be a
different size than "someBigImage.jpg"? Also, I'm trying to get away from
having to number every occurance of the script. I sometimes need to add
images at the top of the page or in the middle of the page and it can get
rather tedious trying to locate what number I'm on.
With my new script, my server is adding text within the script which
interrupts the script, rendering it useless (the server obviously thinks the
lines

jkpopwin.document.write
('<html><title>'+windowtitle+'</title><body '+bodyattribute+'>
<img src="'+imgpath+'" style="margin-bottom:
0.5em"><br>'+textdescription+'</body></html>')
jkpopwin.document.close()

are referring to the BODY of the page and not realizing it is still in the
HEAD section). Is there a way around any of the problems I have referred to
in this message?
Thanks,
Gary Beard
Jan 16 '06 #3

P: n/a
Gary <gbeard12@ said the following on 1/15/2006 9:33 PM:
Randy,
Will this create a popup window or just enlarge the image where it's at?
Neither. It swaps a different image to show your big image.
Here's the problem I am having. I am using a script that enlarges the pic
where it's at, but the whole page has to redraw to allow for the larger
image (which doesn't look very good).


The code I gave won't do that. You would have one large image on the
page with thumbnails on the page. You mouseover the thumbnail and it
will put the large version of the thumbnail into the large image on the
page.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 16 '06 #4

P: n/a
Thanks for the reply Randy...I'll see what I can do with it.

--
Gary Beard
Jan 16 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.