Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

mouseover image and open window jquery

Posted on 2010-11-22
14
Medium Priority
?
1,023 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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:Justin Mathews
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:Justin Mathews
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:Justin Mathews
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 2000 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

650 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