Solved

mouseover image and open window jquery

Posted on 2010-11-22
14
997 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
  • 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

773 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