[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1029
  • Last Modified:

mouseover image and open window jquery

I need to mouseover an image and have a window popup AND STAY THERE, not hide on mouseout, and I prefer jquery not javascript, couldn't find the right zone :(  Thank you in advance.
0
meldraper
Asked:
meldraper
  • 8
  • 3
  • 2
  • +1
1 Solution
 
meispiscesCommented:
Try this : http://api.jquery.com/mouseover/

If you dont wish to hide on mouseout, comment the MouseLeave line from the code.

Do let me know if stuck anywhere.

Thanks
0
 
meldraperAuthor Commented:
I'm not proficient to figure this out myself.  Let's say my image is image.gif and my page is page.html.  How do I do this?
0
 
meispiscesCommented:
that might be little complicated.

You could refer this too: http://www.bloggertemp.com/2010/06/how-to-add-jquery-mouse-hover-image.html
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
meldraperAuthor Commented:
Ok.  That link threw my avast into a tizzy, said it was a bad site.  But I looked at it anyway.

I have one image, I need to hover over it, the html page to poupup and stay there.  The html page that pops up is already in JQuery so I don't need a resizer or anything like that.  Plus I'm under duress.  I know how to do somethings just not very proficient.  I do NOT need mouseout.  I need the window to stay open.  I can't find any examples online.
0
 
Justin MathewsCommented:
If your image element is:

<img id='img1' src='image.gif'>

Then add this JS code (replace with your URL and other options):

$(document).ready(function (){
$('#img1').mouseover(function(){
    var win = window.open('http://yoururl', 'mywin' 'location=no,menubar=no,status=yes,toolbar=no')
});
});

0
 
meldraperAuthor Commented:
Ok, I'll try it but Javascript throws popup blockers.  I cannot have that problem.  
0
 
meldraperAuthor Commented:
where do I put this code???  Do I put script tags above it and close the script?  Do i put this on top of the page?  I really need some real spelled out help with this.  Thanks.
0
 
meldraperAuthor Commented:
Got the follo9wing error.  Can't figure out thwere the stupid closed parens is supposed to go.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MDDS; InfoPath.2; Tablet PC 2.0; .NET4.0C; AskTbF-ET/5.9.1.14019)
Timestamp: Mon, 22 Nov 2010 19:26:35 UTC


Message: Expected ')'
Line: 9
Char: 103
Code: 0
URI: http://www.pmimd.com/no2011/mouseover.asp

0
 
Justin MathewsCommented:
Put this at the top of the code (replace with your jquery.js location):

<script src="../JS/jquery.js"></script>
<script>
$(document).ready(function (){
$('#img1').mouseover(function(){
    var win = window.open('http://yoururl', 'mywin' 'location=no,menubar=no,status=yes,toolbar=no')
});
});
</script>
0
 
meldraperAuthor Commented:
Still getting the same error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MDDS; InfoPath.2; Tablet PC 2.0; .NET4.0C; AskTbF-ET/5.9.1.14019)
Timestamp: Mon, 22 Nov 2010 19:34:10 UTC


Message: Syntax error
Line: 1
Char: 1
Code: 0
URI: http://www.pmimd.com/no2011/includes/jquery.js


Message: Expected ')'
Line: 9
Char: 105
Code: 0
URI: http://www.pmimd.com/no2011/mouseover.asp

0
 
Justin MathewsCommented:
My bad. Missed a comma. But pop-blocker warning will show in IE.

<img id='img1' src='http://www.pmimd.com/no2011/images/sample_lv.jpg'>

<script src="includes/jquery.js"></script>
<script>
$(document).ready(function (){
$('#img1').mouseover(function(){
    var win = window.open('http://www.pmimd.com/no2011/jquery.featureCarousel-v1.0/index.html', 'mywin', 'location=no,menubar=no,status=yes,toolbar=no');
});
});
</script>

Open in new window

0
 
meldraperAuthor Commented:
thanks but you are right, pop up blocker kicks in, just can't have that.  jquery doesn't do that.  why is this hard?
there are galleries galore, i don't need a gallery, just a stupid simple mouseover that opens another window.  ugh.
0
 
SimonDardCommented:
That's what popup blockers do: they block popups. Most of them will not block popups if they are directly associated with clicking on a link (target="_blank" or window.open on click-event), but mouseovers are no clicks.

A compromise is the tooltip: a div that pops up and can be dressed to look as window, but is actually part of the current page. In jQuery there are many tooltip plugins, for instance: http://wayfarerweb.com/wtooltip.php
0
 
meldraperAuthor Commented:
thank you.  I made it both onclick and mouseover so hopefully people will figure it out.  Many thanks for your help!!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 8
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now