|
JavaScript - Image Popup
Hi,
Im new with java script. I have a doubt. Im building an html web site. How to create a image pop up while opening a page, with a close button. Pls anyone share the code. thanks Similar TutorialsHi Friends, I am setting focus in popup window .in IE it is working properly but in mozilla the same code is not able to set focus on image.please tell me the solution if u knows. My code is follows...myJsp.jsp========== <div class="smallDottedBlueLink" > <a title="" class="smallDottedBlueLinkAnchor" href="#" onkeypress="setFocusOnKeyPressPopUp(event);" onclick="setFocusOnClickPopUp();" id="Hotels_TnC_popUp">View Terms and Conditions</a> //focusNew1 is the id of the image in popup page. function setFocusOnKeyPressPopUp(event){ setTimeout('document.getElementById("focusNew1").focus();',1000); // setTimeout('dummy();',3000); } function setFocusOnClickPopUp() { setTimeout('document.getElementById("focusNew1").focus();',1000); } </div> =============html page===============popup code ==== <div> <div class="popup-top-corner-left-img"></div> <div class="popup-top-image"></div> <div class="popup-top-corner-right-img"></div> </div> <div> <div class="popup-left-image"></div> <div class="popup-div1"> <div> <div class="XX-Large-Dark-Gold-popUpText">ffffff</div> //id="focusNew1" for this id i need to set focus <div class="sprite-btn-close" id="focusNew1" onkeydown="javascript:return keyCheck(event)" onkeypress="javascript:closePopUpLayer1(event)" onclick="javascript:closePopUpLayer(),document.getElementById('Hotels_TnC_popUp').focus();" ></div> </div> <div class="popup-dark-gray-text">fff</div> </div> <div class="popup-right-image"></div> </div> <div class="popup-bottom"> <div class="popup-bottom-corner-left-img"></div> <div class="popup-bottom-image"></div> <div class="popup-bottom-corner-right-img"></div> </div> please let me know in case any mistake i made ...its very urgent. ThanksIn advance. I have searched high and low to find this script. Not having much luck at all. What i want to do is, when someone clicks a link the image pops up on screen in its own nice window smack down in the middle of the screen over top of the website. I want it to look neat tho, best example i can find is @ curse.com http://wow.curse.com/downloads/wow-a...st-helper.aspx If you click that link and scroll down to the screen shot section and click on one of the images you can see how nice and professional it looks. How can i accomplish this? Thanks so much in advance~ folks., i need to popup image on image hover?the image should be placed just above mouse pointer? i tried to implement event.x,event.y.. but it is not positoning well in all browsers..?is css need to be used here or please give me javascript code... this is the code function Large(obj,id,e) { // this is div tag,inside div i am placing imagebutton.. var imgbox=document.getElementById("imgbox"); var imgbtn=document.getElementById('<%=ImageButton3.ClientID%>'); imgbox.style.visibility='visible'; imgbtn.src=obj; imgbox.style.left=event.x; imgbox.style.top= event.y; } thank you Hello everyone. I am trying to add the functionality of having a mouseover popup image with multiple different popup images. I have found the code seen below and altered it for my uses and was hoping to find out if someone can tell me why I am seeing the same image with each mouseover. Thanks. <script type="text/javascript"> function ShowPopup(hoveritem) { hp = document.getElementById("hoverpopup"); // Set position of hover-over popup hp.style.top = hoveritem.offsetTop + 18; hp.style.left = hoveritem.offsetLeft + 20; // Set popup to visible hp.style.visibility = "Visible"; } function HidePopup() { hp = document.getElementById("hoverpopup"); hp.style.visibility = "Hidden"; } </script> <table> <tbody> <tr> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867796.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851557.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867803.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851637.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867802.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851627.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867799.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851597.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867797.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851567.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867798.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851577.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867800.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851607.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867801.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851617.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867804.jpg" /></a></td> </tr> </tbody> </table> <table width="270" cellspacing="1" cellpadding="1" border="0"> <tbody> <tr> <td><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856598.jpg');"><img width="96" height="100" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856097.jpg" /></a></td> <td style="text-align: center;"><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856227.jpg');"><img width="65" height="100" border="0" align="middle" src="http://entrixsports.com//ir/oi/1000954/1856098.jpg" alt="" /></a></td> <td style="text-align: right;"><a href="http://entrixsports.com/linkTo/1304219/1000954" rel="nofollow" target="_blank"><img width="60" height="102" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856099.JPG" /></a></td> </tr> </tbody> </table> I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window. Pathetic sitelock.com will offer no support in getting this in a popup window. I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else. My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want. Here is the code that sitelock.com gave me: <a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a> Any help is appreciated Here is an extract of my coding Code: function displayTitle(name) {
return name + " <a href='#' ><img src='direction.png' alt='Get driving directions'/></a>";
I have a map inserted into my aspx page. When I click on one icon, the name and the direction.png picture will appear as a pop up box within the map I want to make the direction.png picture into a link, whereby when I click on it, a pop up box will appear. How? Hi , Pls solve it Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading. what might be the problem ..pls solve it .......its too urgent thanks in advance nagaraja kharvi I'm an online web design student and i'm currently taking a javascript class Ive used java in the past but that was ten years ago so ive been spending time refamiliarizing myself with it I've ran into a problem with the popup coding I was given to use I have to take this image gallery and make the image thumbnails pop up into the larger view of the image using just the java pop up window, but somehow for some reason my coding is opening up the image in both windows, the window that the thumbnails are on and the separate window, its frustrating me to death! i have to keep hitting the back button on the main page whenever i click on an image link because it opens it in both windows simultaenously. i have to submit the project because it's due but i want to work on getting this problem resolved for the future. I've attached a plain text notepad document to my post so you can see the coding Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts. Thanks xx Hey guys, I'm trying to accomplish something similar to what the develop on this site did: http://backlinkwatch.com/ When you click on the text area, a clickable image, with a 50% black opacity background overlay, and an exit either through a link or clicking outside of the box, shows up. I want to accomplish the same thing, but have the image popup show up on the page load instead of requiring a click of the text area. In addition, I would like this popup only once to each IP address; ie, if you visit a page on my site, this will show up, but if you close it and refresh the page or visit another page on the site a cookie will be stored that knows its already been opened once and it won't try to do it again. Thanks to anyone who can help me with this! Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.
Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) I found this popup window, and it works for my project, now i would like to include a close option to the popup window. Either "close", a button, or click aywhere. Here is the coding I am currently using: <script type="text/javascript"> function openWin(image, w, h){ var wh='width='+w+',height='+h var tmpPage=window.open('','',wh) tmpPage.document.write('<body style="margin:0;padding:0;"><img src="'+image+'" width="'+w+'" height="'+h+'">') tmpPage.document.close() } </script> <a href="1379_files/image296.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image296.jpg" width="348" height="261" border="0"></a> <a href="1379_files/image298.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image298.jpg" width="348" height="261" border="0"></a> <p> <a href="1379_files/image300.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image300.jpg" width="348" height="261" border="0"></a> This opens 3 pictures, that when clicked opens the popup of the same picture, only full screen. hi currently i am using this to goto new page: Code: <div onClick="document.location='nextpage.html';" class="active">sometext</div> how can i make it a popup to that page if i click anywhere in the div, thanks for any help. Hello everyone, I need help to show popup only once a day per user! The Problem is that the users of my blog gets mad when the popup displays, so i only want to show it once a day. please add the codes to it fully and send it back over thanks! [CODE]<link href='http://pwnagesource.netii.net/java/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/> <!--[if lte IE 6]><link href="java/jquery.fancybox_ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]--> <script src='http://pwnagesource.netii.net/java/jquery-1.4.3.min.js' type='text/javascript'/> <script src='http://pwnagesource.netii.net/java/jquery.fancybox-1.3.4.js' type='text/javascript'/> <script type="text/javascript"> $j = jQuery.noConflict(); $j.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '14px', endFontSize: '14px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings); return this.each(function() { //where do we start? if(!to && to != settings.endNumber) { to = settings.startNumber; } //set the countdown to the starting number $j(this).text(to).css('fontSize',settings.startFontSize); //loopage $j(this).animate({ 'fontSize': settings.endFontSize },settings.duration,'',function() { if(to > settings.endNumber + 1) { $j(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1); } else { settings.callBack(this); } }); }); }; </script> <script type="text/javascript"> $j(function() { $j.fancybox( "<div style='margin-left: 20px;'></br><h3 style='background-color: #000; padding: 8px; color: white; text-shadow: white 1px 2px 2px;-moz-text-shadow: black 1px 2px 2px;-webkit-text-shadow: black 1px 2px 2px;font-weight: bold;font-family: \"Trebuchet MS\", Helvetica, Geneva, san-serif; font-size: 20px; '>TheEmoLab" | Subscribe To Our Newsletter!</h3><center></br><td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p></td><form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=theemolab/feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'><input name='uri' type='hidden' value='theemolab/feed'/><input name='loc' type='hidden' value='en_US'/><input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/><input alt='' class='mbtbutton' title='' type='submit' value='Submit'/></form></tr></tbody></table></center></br><hr style='padding-bottom: 0; margin: 0 0 7px 0;' /><p style='padding-bottom:0;text-align: center; font-weight: bold;margin-top: 0; padding-top:0;'>This dialog box will close in <span id='dialog_close_countdown'>30</span> seconds.</p></div>", { 'autoDimensions' : false, 'width' : 500, 'height' : 215, 'overlayOpacity' : '0.8', 'overlayColor' : '#000', 'onComplete' : function() { $j('#dialog_close_countdown').countDown({ startNumber: 30, callBack: function(me) { $j.fancybox.close(); } }); } }); }); </script>[ICODE] Ok, I'm not a javascript expert, but I'm using a Drupal module called Calendar which uses some javascript to popup links in a DIV instead of going to a new page. This appears to work by adding class="popup" to links on the calendar. I want to use the same functionality to link to calendar events from other areas on the site, not just on the calendar. It looks like the javascript file is loaded on every page of the site, but adding class="popup" only results in an empty DIV with a close button, without actually loading the content. Can anyone please help me solve this? A link to what I'm working on is he http://67.220.206.170/~jazzbone/?q=home. The upcoming events section is a block from the Calendar view (created by the Calendar module), however it does not do popups by default like the calendar page, so I've tried adding class="popup" to these links to make it work. You can see in the main body of the page is a test link with class="popup" as a test as well. I want them to behave like the popups on the event calendar page. I think this is the javascript file in question: http://67.220.206.170/~jazzbone/site...r/jcalendar.js I know this is a lot, and I'm a newbie here, but I appreciate any help, thanks. Hi All How popup windows are made using Javascript? I am not talking about the popups cretaed using window.open. I am talking about the window which appears to display some advertisements in most of the sites. Charles Is there a way to make a popup appear behind the current window?
Hello, Take a look at this page and this just what I want: http://yensdesign.com/tutorials/popupjquery/ But I have two issues concerning this: 1)I am able to insert a youtube image into the popup BUT when I click on the 'X' the popup disappears but the audio remains.What I would like to do is somehow alter the code so the popup is "destroyed" and the clip is stopped completely including the audio. 2) I also want to able to adapt the code so that I can click on any one of multiple youtube links and get the same effect. My javascript capabilities aren't that strong so any help or links to other pages or suggestions are welcome. I am having a heck of a time closing this popup window when i logoff the site. i open it by Code:
shoutwindow = window.open("<?=$MY_LINK_ROOT?>/shoutbox/minichat.php", "shoutwindow", "location=0,status=0,scrollbars=0,menubar=0,resizable=0 width=300,height=310");
when i click logoff the site i want the popup to close also here is the logoff php Code:
session_start();
//only for testing will remove this
if(!shoutwindow.closed)
{
echo "window open";
self.close();
//shoutwindow.close (); // also tried both these didnt work
// window.close();
}
else
{
echo "Window already closed";
}
mysql_close($link);
unset($_SESSION['Sess_UserId']);
// Unset all of the session variables.
session_unset();
// Finally, destroy the session.
session_destroy();
echo "<script> location.href='$MY_LINK_ROOT'</script>";
exit;
?>
what am i missing here lol ? thanks UPDATE: i just had an idea, can i mix a href and an onClick together so that both are executed like this (i never tried it before) Code: the reason i use self.close is because i heard that it always closes the child not the parent. <a href="logoff.php" onClick="self.close()" return:true;>Log Off</a> the return true will make it execute the href as well right? |
|||||||