Solved

mouseover image and open window jquery

Posted on 2010-11-22
14
994 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

919 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now