|
JavaScript - Rollover Image To Display Image In New Frame
Hi there,
I found this thread on the forum its from a few years back but the code works, but I can't seem to get the image that appears as you rollover the button to display in the correct place. I'm not sure if its because I'm using tables within tables? Should I recode in divs? Any help is greatly appreciated!! http://www.codingforums.com/archive/...p/t-95847.html Similar TutorialsHi guys, this is my first post so be gentle. The problem I am having is this.. I want to have a link so that when you put your mouse over it, an image will be displayed in another frame. I thought this would not be as hard as it has been other wise i would not be turning to you for help. this is the link right now: <a href="http://www.dickblick.com/zz529/47/" rel="nofollow" target="_blank">Alvin 4-Piece Creative Center</a> its just a standard link. the image is located at /images/alvin_wood.jpg here is what I have tried so far.. I have tried using the window.open command and that seemed to work but i could not get it to open in a size of my determiation.. ie 200 by 300 (random demensions i just threw out). ive tried this: <a href="javascript: onMouseOver="window.open('images/picture.jpg')"> Ive tried using the showtrail and hide trail functions ( i think they are functions), and a slew of others but i got mad and deleted it... i prolly shouldnt have done that.. but ill find it and post it so you can see. http://www.stockxpert.com/browse.phtml?f=s&c=100 that is what i want to do except starting off it would be the link and then the image would pop up... I dont even care if its in another frame.. I can take that frame out its not a bid deal.. ive been screwing with this for two weeks and this is my last bit of effort to find an answer.. SO!! if anyone can help I would be greatful!! THANK YOU! Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! OK, so I created my nav bar in Photoshop. I have a off image and on image. So, now I create a js file that displays the on image when they are hovering over that item, etc. Problem is, the js file does it for all images. For example, if the user hovers over the header banner, it tries to look for a different image. How can I update the following javascript to have it do that only in the nav bar. Code: window.onload=rolloverInit;
function rolloverInit( ) {
for ( var i=0; i<document.images.length; i++) {
if ( document.images[i].parentNode.tagName =="A" ) {
setupRollover( document.images[i]);
}
}
}
function setupRollover(thisImage) {
thisImage.outImage =new Image();
thisImage.outImage.src= thisImage.src;
thisImage.onmouseout=function() {
this.src=this.outImage.src;
}
thisImage.overImage = new Image();
thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg";
thisImage.onmouseover= function( ) {
this.src=this.overImage.src;
}
}
I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please.... (roll over image) In the <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif"; staticImage1 = new Image(); staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif"; ........................................................... (button) <a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;"> <img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a> ........................................................... (two frames at once text) In the <head> <script language="javascript"> function loadTwo(iframe1URL, iframe2URL) { parent.frame1.location.href=iframe1URL parent.frame2.location.href=iframe2URL } </script> ........................................................... (button) <a href="javascript:loadTwo('info.html','home.html')">info</a> Thanks! I want to create something similar to what they achieve with this script: http://www.magictoolbox.com/magiczoom/ I know I could just download their script, but it's for a website that will be commercial in nature, and my cousin doesn't want to pay 29 pounds (which is a lot in AUD!) for it. I can use a rollover to display a larger image next to it, but I'm not sure on how to make the image move like that one does. Any help or suggetions would be greatly appreciated! Originally she just wanted something like the Lightbox script, so it's annoying her changing her mind now! I then used Dreamweaver to created the code and dropped it into Jumi but the image rollover did not work and the main image did not show. This is the code I inserted into Jumi: ################# <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> <body onload="MM_preloadImages('images/stories/Binder1.gif','images/ stories/Binder2.gif','images/stories/Binder3.gif','images/stories/ Binder4.gif','images/stories/Binder5.gif','images/stories/ Binder6.gif','images/stories/Binder7.gif','images/stories/ Binder8.gif','images/stories/Binder9.gif')"> <div id="showbox"><img id="LargeBinderImage" alt="Three Ring Binder Image" src="images/stories/BindersGallery/Binder1.gif" height="300" width="600" /></div> <div id="buttonbox"> <img src="images/stories/BindersGallery/85binder.gif" alt="85binder1" width="85" height="85" id="thumb1" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder1.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder2.gif" alt="85binder2" width="85" height="85" id="thumb2" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder2.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder3.gif" alt="85binder3" width="85" height="85" id="thumb3" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder3.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder4.gif" alt="85binder4" width="85" height="85" id="thumb4" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder4.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder5.gif" alt="85binder5" width="85" height="85" id="thumb5" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder5.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder6.gif" alt="85binder6" width="85" height="85" id="thumb6" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder6.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder7.gif" alt="85binder7" width="85" height="85" id="thumb7" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder7.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder8.gif" alt="85binder8" width="85" height="85" id="thumb8" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder8.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/stories/BindersGallery/85binder9.gif" alt="85binder9" width="85" height="85" id="thumb9" onmouseover="MM_swapImage('LargeBinderImage','','images/stories/ Binder9.gif',1)" onmouseout="MM_swapImgRestore()" /></div> <div id="descText"> ################# This works perfectly in a regular html site. Does anyone have any ideas/thoughts as to what I am doing wrong or how I can get a ROLLOVER image gallery with the thumbs in the right side of the main image. Sorry for the long post, but thanks in advance for your suggestions Archibald I'm having an issue with the main logo in the navigation bar, each time I hover over it, it searches for the rollover image. I only want this javascript function to be activated over the div "navigation_menu" here's the html code for the logo <div id="nav"> <a href="index.php"> <img src="images/logo_05.jpg" alt="Home Page"/></a> </div><!-- nav --> here's the javascript code that's causing the problems window.onload = rolloverInit; function rolloverInit() { var nav = document.getElementById("navigation_menu"); for (var i=0; i<nav.images.length; i++) { if (nav.images[i].parentNode.tagName == "A") { setupRollover(nav.images[i]); } } } any help would be very appreciated OK, I want several of my images on my webpage to change when the user hovers over the graphic. I created the js and it works fine. However, now all of my (linked) images change when I hover over them. I know what's causing this ( the Code: ( document.images[i].parentNode.tagName =="A" ) part), but not sure what the best way to fix it would be. Any advice? window.onload=rolloverInit; function rolloverInit( ) { for ( var i=0; i<document.images.length; i++) { if ( document.images[i].parentNode.tagName =="A" ) { setupRollover( document.images[i]); } } } function setupRollover(thisImage) { thisImage.outImage =new Image(); thisImage.outImage.src= thisImage.src; thisImage.onmouseout=function() { this.src=this.outImage.src; } thisImage.overImage = new Image(); thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg"; thisImage.onmouseover= function( ) { this.src=this.overImage.src; } } [/CODE] I'm trying to add an image rollover effect, but when I put it into play, the first image slowly fades into the second image and stays at the second image before I even hover my mouse over it. I've tried multiple scripts and it still seems to be happening www.alternativeland.com Does anyone have an idea as to why? I am new to this forum and self taught (amateur) programmer. I am making my eBay template for items that I sell (vintage clothing). I use the auction management system Blackthorne. I am trying to make my images swap over like this seller: Image rollover i want to replicate. It is not difficult to this in most listings but because I use Blackthorne, I have to put tags rather than the exact url of the image in my template. for example, [[picture1]], [[picture2]], etc. I do have a script which works so that the user can click on the photo to change it but I would prefer it if they could mouseover. The script I have been given to use is on this link: picture show script Thanks in advance. I am trying to get the images on this page to revert back to the original photo after hover releases. I am assuming this is a simple fix, but I am no programmer and just did this in dreamweaver. http://www.dataflurry.com/joey/ Hi I am trying to stop a preloaded images used in a rollover. The images are linked to a tab navigation system, that open on the same page. if(document.images){ var image_array = new Array(); // path to the directory with images var path = './images/food-drink/food/'; // enumeration of the "active" images image_array[0] = path + "starters_r.png"; image_array[1] = path + "mains_r.png"; image_array[2] = path + "desserts_r.png"; image_array[3] = path + "childrens_r.png"; image_array[4] = path + "sandwiches_r.png"; image_array[5] = path + "meal_r.png"; var preload_image = new Array (); for(var i=0; i<image_array.length; i++){ preload_image[i]= new Image(); preload_image[i].src = image_array[i]; } } function rollover(name, filename){ var fullpath = './images/food-drink/food/' + filename; document.images[name].src = fullpath; } I am trying to change the image with another one, which will change back when a different image is clicked. The problem seems to be that the tab navigation code is disagreeing with other code I have tried. The tab code looks like this and works fine until I add another code with document.getElementById() to the onClick event. function swichtabs(wert) { if (wert=='1'){ /*menu starters tab*/ document.getElementById('tabStarters').className='tab1 tabactive'; document.getElementById('tabMains').className='tab2'; document.getElementById('tabDesserts').className='tab3'; document.getElementById('tabChildrens').className='tab4'; document.getElementById('tabSandwiches').className='tab5'; document.getElementById('tabMeals').className='tab6'; }else if (wert=='2'){ etc... The html code for the image is: <a href="#starters" onmouseout="rollover('btnStarters','starters.png')" onmouseover="rollover('btnStarters','starters_r.png')" onClick="this.onMouseOver=null;this.onMouseOut=null; blendon('starters'); blendoff('mains');etc...; swichtabs('1');" onclick="return false;" title="Starters" id="tabStarters"> <img src="./images/food-drink/food/starters.png" name="btnStarters" width="129" height="30" border="0" /> </a> I would be grateful if you could point me in the right direction. First of all, hi everyone I'm new to the forum and relatively new to javascript. I just completed a course in it at university and I did pretty well but I think we all know "real life" coding is a whole other story. Now, down to business. I'm writing up a script, derived from a sitepoint example (available for download here). I want to bring up a dynamic tool tip, on mousover of a thumbnail, that contains one large picture. The style for the tooltip is handled in the css sheet and therefor not featured here. I am also using the sitepoint Core library, similarly available for download at the aforementioned link. I've been working on this for a while with no success. Here's what I know for certain so far: the showTipListener is running on mouseover the span and the img are being created the img is receiving the correct src the img is being attached to the span the span is being attached to the thumbnail What I don't know is why the tooltip never appears and why the default action is not being canceled. Any thoughts would be greatly appreciated, thanks in advance for your help! I've published the page here so that you all can observe it's behavior. An of course here's the code Code: // JavaScript Document
var Tooltips =
{
//contains the source for each full sized image
fullImages: [
"PhotoPortfolio/AdriSelfPortraits.jpg",
"PhotoPortfolio/AmyUtah.jpg",
"PhotoPortfolio/AveQ.jpg",
"PhotoPortfolio/Bingham.jpg",
"PhotoPortfolio/BinghamD12.jpg",
"PhotoPortfolio/Campus.jpg",
"PhotoPortfolio/Campus2.jpg",
"PhotoPortfolio/Clambake.jpg",
"PhotoPortfolio/Construction.jpg",
"PhotoPortfolio/DadInKobeJapan.jpg",
"PhotoPortfolio/DadInTheGarden.jpg",
"PhotoPortfolio/HesperSongWriter.jpg",
"PhotoPortfolio/IrishCoast.jpg",
"PhotoPortfolio/NathanHale.jpg",
"PhotoPortfolio/NorthConway.jpg",
"PhotoPortfolio/Oreo.jpg",
"PhotoPortfolio/Portsmouth.jpg",
"PhotoPortfolio/Portsmouth2.jpg",
"PhotoPortfolio/Portsmouth3.jpg",
"PhotoPortfolio/RockClimbing.jpg",
"PhotoPortfolio/RockClimbing2.jpg",
"PhotoPortfolio/RockClimbing3.jpg",
"PhotoPortfolio/RockClimbing4.jpg",
"PhotoPortfolio/RockClimbing5.jpg",
"PhotoPortfolio/RockClimbing6.jpg",
"PhotoPortfolio/RockClimbing7.jpg",
"PhotoPortfolio/Seaport.jpg",
"PhotoPortfolio/Seaport2.jpg",
"PhotoPortfolio/Snowbird.jpg",
"PhotoPortfolio/VanderbuiltSkies.jpg",
"PhotoPortfolio/VanderbuiltSkies2.jpg",
],
init: function()
{
//collects all the images on the page with the RollOverMe class and stroes them in image
var image = Core.getElementsByClass("RollOverMe");
//adds the event listener to all images' mouseover and mouseout events
for (i=0; i<image.length; i++)
{
Core.addEventListener(image[i], "mouseover", Tooltips.showTipListener);
Core.addEventListener(image[i], "mouseout", Tooltips.hideTipListener);
}
},
showTip: function(image)
{
//retrieve the class number and strip out the string characters, store the number to a variable
var sourceMatch = /(^| )source(\d+)( |$)/.exec(image.className);
var source = parseInt(sourceMatch[2], 10);
//creates a span element
var tip = document.createElement("span");
//assigns it to the class tooltip
tip.className = "tooltip";
//creates an image
var tipImage = document.createElement('img');
//sets the src attribute to appropriate element in the fullImages property using the variable source
tipImage.src = Tooltips.fullImages[source];
//attaches the image to the span
tip.appendChild(tipImage);
//attaches the span to the thumbnail
image.appendChild(tip);
//sets the tooltip property to display the span
image._tooltip = tip;
// Fix for Safari2/Opera9 repaint issue
document.documentElement.style.position = "relative";
},
hideTip: function(image)
{
if (image._tooltip)
{
image.removeChild(image._tooltip);
image._tooltip = null;
// Fix for Safari2/Opera9 repaint issue
document.documentElement.style.position = "static";
}
},
showTipListener: function(event)
{
Tooltips.showTip(this);
Core.preventDefault(event);
},
hideTipListener: function(event)
{
Tooltips.hideTip(this);
}
};
Core.start(Tooltips)
Hi Im trying to creat a website so when the small image is rolled over a new page opens in the frame ( called main) i will upload it now to http://www.e-z-host.com/GZ/ all help apricated ! at the momment you have to click to open the page in the main frame. Hi there I've created a nav bar for this site - http://web11.3essentials.com/~cp27358/ - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image: menu1buttonup = new Image(); menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ; menu1buttondown = new Image() ; menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ; followed by.... function buttondown( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "down.src" ); } } function buttonup ( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "up.src" ); } } and this is what my list items look like: <a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')" onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a> thank you I've got a <ul> w/ 6 <li> items and CSS to make them 104x228 side blocks, which hold 2 images, one on top of the other. The 6 rows of images look like this: X X X X X X X X X X This is what I want: The top row of images to be opacity:0 (or hidden), and then when you mouseover the bottom images, the top images come to 100 opacity. When you mouseout, the opacity is back to 0. Here's the HTML and CSS: Code: <ul class="carz"> <li><img src="img/impreza2.jpg" class="imgtophidden"/><img src="img/impreza.jpg" /></li> <li><img src="img/wrx.jpg" class="imgtophidden"/><img src="img/wrx.jpg" /></li> <li><img src="img/legacy2.jpg" class="imgtophidden"/><img src="img/legacy.jpg" />/li> <li><img src="img/outback2.jpg" class="imgtophidden"/><img src="img/outback.jpg" /></li> <li><img src="img/forester2.jpg" class="imgtophidden"/><img src="img/forester.jpg" /></li> <li><img src="img/tribeca2.jpg" class="imgtophidden"/><img src="img/tribeca.jpg" /></li> </ul> The classes are like so: Code: .imgtophidden {
opacity: 0;
}
.imgtop {
opacity: 100;
}
I am new to jQuery coding (but loving learning) and I want to figure out: how do I make this in jQuery? Here's what I have so far: Code: $(function() {
$("ul.carz li").hover(function() {
$(this).find('img.imgtophidden').addClass('imgtop')
} , function() {
$(this).find('img.imgtop').addClass('imgtophidden')
});
});
In homePage(1 photo) and in Gallery(9 photos) at http://www.pafos-wedding.com/ I setup mouse rollover functionality > bigger photo...but bigger image appear below smaller...what to do appear next to smaller, so top side of both photos are on same line? 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!!! hi, i am currently doing a program that will display the image continuously. the image name will be like pic1.jpg , pic2.jpg , pig3.jpg untill pic10.jpg this is my code so far : <html> <head> <script type="text/JavaScript"> var fileName; function display() { fileName = new Array(); for( i=0; i<5; i++) { fileName[i] = new Image(); fileName[i].src = "screenshot_" + i + ".jpeg"; } } display(); </script> </head> <body> </body> </html> but when i run it, it give me infinity loop, can anyone tell me what is the problem of that ? thanks in advance for the reply |
|||||||