Solved

mouseover image and open window jquery

Posted on 2010-11-22
14
1,004 Views
Last Modified: 2012-06-21
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
Comment
Question by:meldraper
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 3
  • 2
  • +1
14 Comments
 
LVL 7

Expert Comment

by:meispisces
ID: 34190771
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
 

Author Comment

by:meldraper
ID: 34190805
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
 
LVL 7

Expert Comment

by:meispisces
ID: 34190883
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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 

Author Comment

by:meldraper
ID: 34190935
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
 
LVL 16

Expert Comment

by:jmatix
ID: 34190940
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
 

Author Comment

by:meldraper
ID: 34190976
Ok, I'll try it but Javascript throws popup blockers.  I cannot have that problem.  
0
 

Author Comment

by:meldraper
ID: 34190995
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
 

Author Comment

by:meldraper
ID: 34191064
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
 
LVL 16

Expert Comment

by:jmatix
ID: 34191075
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
 

Author Comment

by:meldraper
ID: 34191138
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
 
LVL 16

Expert Comment

by:jmatix
ID: 34191196
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
 

Author Comment

by:meldraper
ID: 34191221
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
 
LVL 5

Accepted Solution

by:
SimonDard earned 500 total points
ID: 34196869
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
 

Author Comment

by:meldraper
ID: 34196888
thank you.  I made it both onclick and mouseover so hopefully people will figure it out.  Many thanks for your help!!
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

687 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question