JavaScript - Lightbox2 And Image Rollovers
Hi there,
New to these forums, and to coding websites so be kind . My problem is, when using lightbox2 I press the back button and the rollover remains in the mouse-over position. I can "mouse over' it and then the rollover will disappear, it just seems to get stuck on. I really have no idea what is causing this, and any help would be greatly appreciated. Thanks alot, Joel Similar TutorialsHello there, I am trying to incorporate Lightbox2's image gallery script into my site but I'm having difficulty. Here's where I'm accessing the script from: http://www.huddletogether.com/projects/lightbox2/ Here is my skeleton website: http://www.labellepetraie.com/photos The image thumbs are showing up but the larger images are not. I changed the 'body onload' html tag to window.onload as I'm using two different javascripts on this page and I don't want them to conflict. I've also added initLightbox() so I don't know what's wrong! Is there just an issue with the images or is there something wrong with the script. Please help! Let me know if you need additional info. A million thanks! <script type="text/javascript"> window.onload = function(){ // use this instead of <body onload …> MM_preloadImages(MM_preloadImages('../3websites/home4.jpg','../3websites/amenities1.jpg','../3websites/inquiry1.jpg','../3websites/rates1.jpg','../3websites/photos1.jpg'); initLightbox()") } </script> Say we have an image called imagefile.jpg, which we want to display when the user mouses over an already-displayed image.Now I want to preload more than just one image; for example, in a menu bar containing multiple image rollovers,or if I try to create a smooth animation effect what should i do? I tried the following code but it doesn't work. Please help Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script language="JavaScript"> function preloader() { // counter var i = 0; // create object imageObj = new Image(); // set image list images = new Array(); images[0]="1.jpg" images[1]="2.jpg" images[2]="3.jpg" images[3]="4.jpg" // start preloading for(i=0; i<=3; i++) { imageObj.src=images[i]; } } </script> </head> <body onLoad="javascript:preloader()"> <a href="#" onMouseOver="javascript:document.img01.src='1.jpg'"> <img name="img01" src="4.jpg"></a> </body> </html> Mainly I want to create the animation effect with the 4 images. Is that possible? First off, I am new here - so, an introduction. My name is David Lubofsky. I am a front-end developer in Chicago, Illinois. I have done numerous JS rollovers before, as well as image rollovers triggered by text links. However, I am having a problem combining the two. The best example I have found of what I am trying to achieve is here - http://theworldcovered.ivyfunds.com (top right area). I have no issue achieving part of this - where the link mouseovers trigger the image swap. My issue is making both the link and the image cause the rollover. The method I use for image swap on text link hover is seen here - http://www.htmlite.com/faq011.php This is what I want, except I want the image to also swap if the image is rolled over, as in the first example. Hope this was clear - I could really use some guidance on this. Thanks all! David HI, I am not very experienced with javascript and got stuck doing the following. I have placed some image rollovers on one of my pages..where when a user rolls over some text links..and image appropriate to that text is showen...when the mouse moves away from the links then a blank image is displayed as a place holder. this is all simple...here is where i am stuck. The place holder has a specific size...but the rest of the images that are displayed when the text is rolled over have different sizes, some are vertical some are hortizontal. i do not want to have to resize every image so that it properly fits the place holder...add the white borders and so on...so that the image is dispalyed properly. Is there a way to have the size be changed for each image...so that the size doesnt get inherited from the place holder, but so that the script applies the size associated with each individual image. example place holder is 20 x 20 image 1 is 100 x 200 image 2 is 200 x 100 the place holder is loaded...when the mouse moves over the first link...image 1 replaces the place holder...but instead of taking on the size of 20x20 it has to be displayed at its own size of 100 x 200... how can i do this? thank you for all of your help Hi guys, Just wanted to know (seeming im a bit of a jscript beginner). it is possible to have a background image rollover, and if so how. Thanks. Not sure if the root problem is a js load issue or rather css. Problem page is he http://arcangelmetalworks.com/pictures.php I've had success using the Lightbox2 module on several Drupal-based sites, but this is the first time I've handled the straight code and tried to drop it into a hand-coded site. Internet Explorer fails to draw the overlay div to the full page height. Firefox 3 performs as expected. The web site suggests setting the body margin and padding to zero, but those were set anyway and tweaking didn't help. Another suggestion was to stick initLighbox() into the body onload, but that function doesn't exist. Also tried initialize() and Lightbox.initialize(), but again it's claimed those functions don't exist. Looking into the code, however, initialize() is where the div height is calculated, I think. It should be noted that the lightbox still works on IE even when using one of these failed onload attempts. And I don't actually get IE to report any js error with the onloads - I have to rely on Firebug for that. Anyone have an idea of what I'm overlooking? I've spent too much time staring at code and coming up blank. Hi there, So I've been working on my portfolio site, and like many, uses lightbox with an innerfade, or a coda slider of some sort and it leads to jquery conflicts, and although I've narrowed the problem, I am still a designer first, programmer second. So it's taking me a bit longer to digest the problem. with that said, let me point you to the problem. threedash.com/webdesign.html the page have a few problems. plugin conflicts. i read this: http://docs.jquery.com/Using_jQuery_...ther_Libraries but im still confused. _threedash I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this? <div style="padding-left:45px;width:852px;"> <a href=".html" class="Button"> <div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 1</span><br /> </div> </a> <a href="" class="Button"> <div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 2</span><br /> </div> </a> <a href="" class="Button"> <div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat"> <span id="homeButtonText">Question 3</span><br /> </div> </a> </div> Good day Lets say I have a page with 3 thumbnails and one big div. When click in one of the thumbnails the image of it must appear inside the big div. Of course there are 3 images (little ones for the thumbnails) and 3 big images for the real size ones. Script this is simple for me but imposible if I have more than 100 pages within 6 images inside them (3 little and 3 real size for 3 thumnail divs and one single big div). There must be some kind of order to just script the divs of the thumbnail divs and the real size image div in all the pages at ones, otherwise I have to creat ID's to every single div inside every single page! (4 id's to one page and I have more than 100 pages!, this is inpractical because is posible that in the future the pics change, is more than 400 id's) For example: for FIRST.html big div (div id="img001bg") thumb1 div (div id="th_img001" thumb2 div (div id="th_img002" thumb3 div (div id="th_img003" SECOND.html THIRD.html ... HUNDRED.html ... ! There must be some solution using somehow the functions, please help! Thank you to all Hi everyone, this is my first post on this forum and is also my first attempt to use javascript. When it comes to javascript I am a complete noob, but before you push the back button I just thought I'd let you know I just spent a few hours in some javascript tuts so I could *at least* have some idea of what you and I are talking about. Ok, here's my question: How can I make a disjointed div become and remain visible when I hover over it's parent div? The Only time I want that div to go back to being invisible is when I hover over another parent div causing it's child div to become visible. Here's the example (only tested in FF 3.5.2) : http://www.e-uphoria.com/demo_two.html I used :hover in css to show the disjointed div (the red box) that I want to become visible via javascript. I managed to achieve this effect with css, but when the user moves the mouse out of the browser window the div disappears because the hover is no longer activated. This is why I need javascript, so the user can do anything he or she wants outside of the browser window and the "hover" will still be activated revealing the content of the div. Here's the example of the css only version (again, only tested in FF 3.5.2) : http://www.e-uphoria.com/demo.html I messed around with some onmouseover and onmouseoff within the html and realized I could achieve the desired effect with some really messy and inefficient code. I would prefer to have the javascript in an external file and not looking like it was written by an idiot. If anybody could help me out with this that would be awesomely awesome. Thanks! Using Dreamweaver CS3 (WinXP), is there a simple way to add captions to disjointed rollovers? (The disjointed rollovers are created using image swap behavior) My aim is to click on a thumbnail, and when the image is projected on the poster, I want a caption appearing underneath. Can you please help me with this, here is my complete code Thanks [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/fullscreen/1z.jpg','images/fullscreen/2z.jpg')"> <p><img src="images/fullscreen/1z.jpg" alt="HL" name="pic1" width="114" height="102" id="pic1" onmouseover="MM_swapImage('poster','','images/fullscreen/1z.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/fullscreen/2z.jpg" alt="HL" name="pic2" width="114" height="102" id="pic2" onmouseover="MM_swapImage('poster','','images/fullscreen/2z.jpg',1)" onmouseout="MM_swapImgRestore()" /></p> <p> </p> <p><img src="images/fullscreen/3z.jpg" alt="HL" name="poster" width="500" height="375" id="poster" /></p> </body> </html> [code] i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this: link 1a / link 2a / link 3a the second menu (menu B) is like this: link 1b link 2b link 3b i would like to use javascript/css to do the following: when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b) i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color. it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated. I'm using two simple CSS rollovers for a prev/next arrow nav, combined with a JS script that lets the user manually tab/flip/swap through a few testimonials. You roll over the "next" button, it's highlighted, you click it, a new testimonial appears in place of the old one. Problem: the prev/next buttons are appearing and disappearing on click, seemingly randomly. I can't make any sense of it. Image: http://img3.imageshack.us/img3/8924/jsproblem.jpg I've tried adjusting the CSS container sizes, tried changing the positioning and even adding z-indexes in case the divs are accidentally overlapping. Gave items background colors to try to see the structure more clearly, for flaws. Nothing has worked. Any help much appreciated. I'm using this JS script for the tabs: Code: last_tab = 'tabTest1'; function show(layerName) { document.getElementById(layerName).style.display = '';} function hide(layerName) { document.getElementById(layerName).style.display = 'none';} function show_next(tab_name) { document.getElementById(last_tab).className = ''; var curr = document.getElementById(tab_name); curr.className=''; hide(last_tab+'_data'); show(tab_name+'_data'); last_tab=tab_name;} and this HTML: Code: <!-- start: testimonials --> <div id="tabTest1_data"> <div class="silo1"> <div class="spotlightnav-content-header-container"> <p class="spotlightnav-content-title">Testimonials</p> <a href="#" class="spotlightnav-content-more">View All</a> </div> <div class="content-container"> <p class="spotlightnav-testimonials"> <span class="color1">"</span>Excellent staff very courteous, friendly and professional, excellent stay, excellent meal.<span class="color1">"</span> </p> <p class="spotlightnav-testimonials-credit">Janice, Georgia</p> </div> <div class="spolightnav-btns-container"> <a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a> <a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div> </div> </div> <div id="tabTest2_data" style="display: none;"> <div class="silo1"> <div class="spotlightnav-content-header-container"> <a href="#" class="spotlightnav-content-title">Testimonials</a> <a href="#" class="spotlightnav-content-more">View All</a> </div> <div class="content-container"> <p class="spotlightnav-testimonials"> <span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span> </p> <p class="spotlightnav-testimonials-credit">Christine, Taiwan</p> </div> <div class="spolightnav-btns-container"> <a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a> <a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a> </div> </div> </div> <div id="tabTest3_data" style="display: none;"> <div class="silo1"> <div class="spotlightnav-content-header-container"> <a href="#" class="spotlightnav-content-title">Testimonials</a> <a href="#" class="spotlightnav-content-more">View All</a> </div> <div class="content-container"> <p class="spotlightnav-testimonials"> <span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span> </p> <p class="spotlightnav-testimonials-credit">Belle, Taiwan</p> </div> <div class="spolightnav-btns-container"> <a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a> <a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div> </div> </div> <div id="tabTest4_data" style="display: none;"> <div class="silo1"> <div class="spotlightnav-content-header-container"> <a href="#" class="spotlightnav-content-title">Testimonials</a> <a href="#" class="spotlightnav-content-more">View All</a> </div> <div class="content-container"> <p class="spotlightnav-testimonials"> <span class="color1">"</span>Vaguely not-terrible. Acceptable in a somewhat amazing way. ffffffffuuuuuuuuu<span class="color1">"</span> </p> <p class="spotlightnav-testimonials-credit">Grace, Texas</p> </div> <div class="spolightnav-btns-container"> <a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a> <a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div> </div> </div> <div id="tabTest5_data" style="display: none;"> <div class="silo1"> <div class="spotlightnav-content-header-container"> <a href="#" class="spotlightnav-content-title">Testimonials</a> <a href="#" class="spotlightnav-content-more">View All</a> </div> <div class="content-container"> <p class="spotlightnav-testimonials"> <span class="color1">"</span>Damn fine place, yo.<span class="color1">"</span> </p> <p class="spotlightnav-testimonials-credit">Slim, Bacon</p> </div> <div class="spolightnav-btns-container"> <a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a> <a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div> </div> </div> <div id="tabTest6_data" style="display: none;"> <div class="silo1"> <div class="spotlightnav-content-header-container"> <a href="#" class="spotlightnav-content-title">Testimonials</a> <a href="#" class="spotlightnav-content-more">View All</a> </div> <div class="content-container"> <p class="spotlightnav-testimonials"> <span class="color1">"</span>Blurry. But good.<span class="color1">"</span> </p> <p class="spotlightnav-testimonials-credit">Bob, California</p> </div> <div class="spolightnav-btns-container"> <a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a> <a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a> </div> </div> </div> I'm assuming this is primarily a JS problem, but if taking a look at the CSS is necessary, let me know and I'll post it. THANKS!!!!! Hi there, I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time. I looked over you FAQ section but I can't seem to figure it out. Any help would be hugely appreciated. Thank you so much. HTML: Quote: <!-- Main content --> <div id="content"> <div style="text-align:center"> <img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" /> </div> <script type="text/javascript" src="slideshow.js"></script> </div> <!-- Site navigation menu --> <div id="navcontainer"> <ul> <li> <div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div> </li> <li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li> <li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li> <li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li> <li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li> <li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li> <li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li> <li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li> </ul> </div> <script type="text/javascript" src="navigation.js"></script> <div id="footer"> <!-- Site navigation menu - footer --> <div id="navcontainer_footer"> <ul> <li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li> <li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li> <li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li> </ul> </div> <script type="text/javascript" src="navigation_bottom.js"></script> </div> </div> <!-- End Wrapper --> slideshow.js Quote: var pause = 3000; // interval, in milliseconds, between transitions var i = 0; // image counter var pic = document.getElementById("pic"); // the <img> element in the HTML file // define an array of images var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" ); // preload the images for (var j = 0; j < imgs.length; j++) { var obj = new Image(); obj.src = imgs[j]; } // rotates between the images in the "imgs" array function rotate() { pic.src = imgs[i]; if (i === (imgs.length -1)) { i = 0; } else { i++; } setTimeout("rotate()", pause); } window.onload = rotate; navigation_bottom.js Quote: // define an array of images var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg"); // preload the images by iterating the array for (var i = 0; i < navImgs.length; i++) { var obj = new Image(); obj.src = navImgs[i]; } // initialize the onmouseover and onmouseout events function init() { // get all the <img> tags in the HTML document as an array var navContainer = document.getElementById("navcontainer_footer"); var imgArray = navContainer.getElementsByTagName("img"); // var imgArray = document.getElementsByTagName("img"); // loop through the array and bind the onmouseout and onmouseover events for (var i = 0; i < imgArray.length; i++) { var img = imgArray[i]; img.onmouseover = doMouseOver; img.onmouseout = doMouseOut; } } // define the function for the onmouseover event function doMouseOver(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } // extract the digit only from the "id" attribute value and concatenate it // to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg" var id = img.id; img.src = "images/buttons/" + id + ".jpg"; //img.src = "images/pic" + id.substring("pic".length) + ".jpg"; } // define the function for the onmouseout event function doMouseOut(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } //img.src = "images/button_home1.jpg"; var id = img.id; img.src = "images/buttons/" + id + "1.jpg"; } // call the "init" function to initialize the event binding //window.onload = init; navigation.js Quote: // define an array of images var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg"); // preload the images by iterating the array for (var i = 0; i < navImgs.length; i++) { var obj = new Image(); obj.src = navImgs[i]; } // initialize the onmouseover and onmouseout events function init() { // get all the <img> tags in the HTML document as an array var navContainer = document.getElementById("navcontainer"); var imgArray = navContainer.getElementsByTagName("img"); // var imgArray = document.getElementsByTagName("img"); // loop through the array and bind the onmouseout and onmouseover events for (var i = 0; i < imgArray.length; i++) { var img = imgArray[i]; img.onmouseover = doMouseOver; img.onmouseout = doMouseOut; } } // define the function for the onmouseover event function doMouseOver(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } // extract the digit only from the "id" attribute value and concatenate it // to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg" var id = img.id; img.src = "images/buttons/" + id + ".jpg"; //img.src = "images/pic" + id.substring("pic".length) + ".jpg"; } // define the function for the onmouseout event function doMouseOut(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } //img.src = "images/button_home1.jpg"; var id = img.id; img.src = "images/buttons/" + id + "1.jpg"; } // call the "init" function to initialize the event binding //window.onload = init; Ultimately I'd like a set up resembling http://shop.lululemon.com/Swift_Tank...30/p/1230.html Where you're able to click a swatch color and get a thumbnail of it on the model and a thumbnail of a fabric detail that you could then enlarge. I'm not sure how to go about this. I'm able to do it with one thumbnail, where when you rollover the various swatch colors, the thumbnail of the model gets replaced. However I'm unable to add in the 2 other thumbnails (on that site they're using 3 but I would only need 2) that would change at the same time, where you could switch back and forth from at detail of the model and the fabric. I don't necessarily need the zoom function, but if it is possible to do all of those that would be good too. Otherwise I just need help coding how to at least get the swatches to change 3 images upon mouseover and that 2 of those images would be like the 3 thumbnails on the link above and would replace the larger thumbnail once clicked. i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript"> function Change_Big_One(thumb){ document.getElementById('BigOne').src=thumb.src.replace("_th","") } </script> HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> Hello, I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document). Links: http://www.courtneyhunt.com.au/press_bg.html http://www.courtneyhunt.com.au/press_gallery.html I am a complete novice with JavaScript so if anyone could help that would be great. Thank you in advance. QUESTION 1: Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction. Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings. I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image. So, let's say this is the URL: www.adomainname.com/image.jpg and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k. So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px. For an image that's 300 px x 500 px, it should remain as such. For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px. I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited. Note: The part that I am most interested in is in being able to detect the size / dimensions of the image. QUESTION 2: On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.) Hi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! |