JavaScript - Image Onmouseover Function
I have six small images. Depending on which image a user hovers over, I would like a seventh image (a simple box) to change as well.
For example, if a user hovers over image1, I want the seventh image to be a red box. If a user hovers over image2, the seventh image should be a blue box. Simple huh? So the seventh image changes color based on which of the six smaller images the user hovers over. ------------- So far, my current code only allows me to hover over any of the six images, and the seventh image always changes to the same image color. Code is below. Any help would be appreciated. Code: <script type="text/javascript"> function hoverBox() { var boxNumber; document.getElementById("info").src = "Images/infoRedColor.png"; } function hoverBoxOut() { document.getElementById('info').src = "Images/info.png;" } </script> </head> <body> <div id="wrapper"> <a href=""> <img class="box1" src="Images/box1.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()" onmouseout="this.src='Images/box1.png'; hoverBoxOut()" ></a> <a href=""> <img class="box2" src="Images/box2.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()" onmouseout="this.src='Images/box2.png'; hoverBoxOut()"></a> <a href=""> <img class="box3" src="Images/box3.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()" onmouseout="this.src='Images/box3.png'; hoverBoxOut()"></a> <a href=""> <img class="box4" src="Images/box4.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()" onmouseout="this.src='Images/box4.png'; hoverBoxOut()"></a> <a href=""> <img class="box5" src="Images/box5.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()" onmouseout="this.src='Images/box5.png'; hoverBoxOut()"></a> <a href=""> <img class="box6" src="Images/box6.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()" onmouseout="this.src='Images/box6.png'; hoverBoxOut()"></a> <!-- Seventh Image --> <img id="info" src="Images/info.png" border="0"> </div> </body> Similar Tutorialshi. how can i get the value of title of<td> on onmouseover function. something like that. Code: <td title="mytitle" onMouseOver="func(this.title);"></td> can i do this. plzzzz help me Hey all, I have a little function that performs when a form item is selected. I would like to give the form items all at once and have the function perform when the user mouses over an item in the displayed list. Here is the form code: Code: <form> <select onchange="showRSS(this.value)"> <option value="">Select an RSS-feed:</option> <option value="Google">Google News</option> <option value="MSNBC">MSNBC News</option> </select> </form> thanks a bunch, Brian p.s. I tried this but it didn't work Code: <?php echo("<a href=\"http://www.msn.com\" onMouseover=\"showRSS(this.MSNBC)\">MSNBC News</a>");?> <br /> <?php echo("<a href=\"http://www.google.com\" onMouseover=\"showRSS(this.Google)\">Google News</a>");?> <br /> Is it possible to set onmouseover only in js file without running the function on html code? P.S. I found a coding thread here but I don't understand it and it's too old (2005 archive). Thank you very much JavaScript Code: window.addEvent('domready',function(){ //SAMPLE 8 var handles8_more = $$('#handles8_more span'); var nS8 = new noobSlide({ box: $('box8'), interval: 5000, autoPlay: true, items: $$('#box8 h3'), size: 900, handles: $$('#handles8 span'), handle_event: 'mouseenter', addButtons: { previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') }, onWalk: function(currentItem,currentHandle){ //style for handles $$(this.handles,handles8_more).removeClass('active'); $$(currentHandle,handles8_more[this.currentIndex]).addClass('active'); //text for "previous" and "next" default buttons $('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML); $('next8').set('html',this.items[this.nextIndex].innerHTML+' >>'); } }); //walk to item 0 witouth fx nS8.walk(0,false,true); }); html Code: <div class="slider sample8"> <p class="buttons" id="handles8"> <span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span> </p> <div class="mask1"> <div id="box8"> <div onMouseOver="nS8.Stop();" onMouseOut="nS8.Play();"> </div> </div> </div> <p class="buttons"> <span id="prev8"><< Previous</span> | <span id="next8">Next >></span> </p> <p class="buttons"> <span id="playback8">< Playback</span> <span id="stop8">Stop</span> <span id="play8">Play ></span> </p> </div> All I need to do is when they hover ocer the div statement stop the program from looping. and then when they stop hovering over it let it start looping again. Hi, I hope someone can help me figure this out - it's been bugging me for a whole day now, and I can't seem to figure it out, and so far no Google research found this exact problem for me... Situation: I have a simple HTML page with one DIV element with the id "rotator". Inside that, JavaScript is supposed to create boxes that react to mouseovers. The weird thing is: The whole script works, but ONLY on the LAST box I create, no matter what I do. I can manually add the mouseover code to any one of these boxes, but it will only take on the last one. I can have JavaScript tell me the mouseover status of each box, and they all tell me they have code assigned correctly - but again only the last one works... Here's the relevant code (yes, highly abbreviated, but it's the part that fails on me): Code: var maxBoxes = 10; function initSite() { var rotator = document.getElementById("rotator"); rotator.innerHTML = ""; for (x = 0; x < maxBoxes; x++) { rotator.innerHTML +='<div id="myBox' + x + '"></div><div id="myDark' + x + '"></div>'; // various other stuff about myBoxes[x] also in here, but not relevant to the issue I think applyMouseActions(document.getElementById("myDark" + x); debugOutput(document.getElementById("myDark" + x).id+"=" + document.getElementById("myDark" + x).onmouseover + "<br>", 1); } } function applyMouseActions(item) { if (!item) return; item.onmouseover = function(ev) { alert("does this work?"); var thisNum = this.id; thisNum = thisNum.charAt(this.id.length-1); var tempBox = myBoxes[thisNum].boxOb; tempBox.style.background = "#fff"; } item.onmouseout = function(ev) { var thisNum = this.id; thisNum = thisNum.charAt(thisNum.length-1); var tempBox = myBoxes[thisNum].boxOb; tempBox.style.background = "#aaa"; } } initSite is called in the body onload. All kinds of other animation parts are implemented that work fine, just this mouseover won't work. I have tried re-writing it in multiple different ways, including "xyz.onmouseover = myMouseCode" and then defining the function separately later - still no dice. So, the code creates 10 boxes (0-9) and 10 boxes that are on top of them to create a form of shadow effect depending on the position of the original boxes. Since the "myDark" boxes are on top of the "myBox" boxes, I apply the onmouseover onto the "myDark" boxes, but it only works on "myDark9" and no other box. They are all created the same way, the mouseover assigned the same way... All I can do is shake my head at it, but that doesn't fix the issue, obviously ;-) Any idea what else I can try? Thanks! this is my script Quote: <a href="javascript:void(0);" onmouseOver="hahaha()"> <img border="0" src="pink.gif" name="Mainpic" id="image"></a> and this is the function Quote: function hahaha() { document.getElementById('image').src="blue.gif"; } the problem is when i mouseover the image look like this why is that? help please! thanks i am trying to use the most simple code i can to onmouseover of some text change 1 image. it will have multiple texts with different images for each one all displayed in one place. it seems to work well for me in IE, but on firefox the mouseover doesn't work. and on a mac it doesn't work in safari or firefox. any input is appreciated... here is the shortest version of the code i could put together. Code: <head> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- function roll(img_name1, img_src1) { document[img_name1].src = img_src1; } //--> </SCRIPT> </head> <body> <a href="2_17_10/index.html" onmouseover="roll('poster','2_17_10/IMG_7075b.jpg')">2-17-10</a> <img src="2_16_10/IMG_7072.jpg" name="poster" width=500></img> </body> </html> Hi everyone. Can anyone help me , i need to make a onmouseover function , when u go with mouse on the left small image it automatically opens the large image in the right, can anyone help me with this ??? Hi Guys. First off i'd like to say Hi as i'm new to the forums. But am looking forward to spending a lot of time here. I am currently studying Javascript to help create a bit more user interaction with my websites which I use CSS/XHTML and PHP5 to design. Ok with that said I was hoping someone might be able to lend a slight hand. I am trying to create an Image menu for a site I'm working on that is rather simple in essence. When the user hovers over a button I have the menu will move left or right depending. I have not got a great deal into it yet as I have become stuck, as I'm new I figured it would be easier to troubleshoot if I build up the program bit by bit. ----> menupic variable is being passed by php into javascript Code: function moveImagesLeft() { for (i=0; i<=100; i++) { setPixels = (i + 2); for (L=1; L<=menuPic; L++){ /* this loop makes sure that all the pictures move together */ indexpic = "menupic"+L; document.getElementById(indexpic).style.left="-"+setPixels+"px"; } } } Ok, very simple. I have a DIV container that holds my images and the overflow is hidden, php works out how many images there are and feeds that into javascript. This all works fantastically however it seems that once I reach the bottom of my second for loop Code: document.getElementById(indexpic).style.left="-"+setPixels+"px"; Nothing else happens, the pictures all shift left 2pixels as they should but nothing else. The top loop is not going again (excuse the poor use of terminology) I dont know if it makes a different but where the images are they are declared as so. Code: <a href="#"><img class="menupic" id="menupic1,2,3,4,5 (etc)" src="_image" border="0" height="50" width="60"></a> Code: .menupic {position:relative; display:block; width:60px, height:40px} and the Id class is there so that my javascript can control it. I hope that I have worded this in a way that is easily understandable. Any help would be greatly appreciated. I try not to ask for too much help because working things out is part of the learning curve but in this instance I have spent a lot of time and not found a solution. Kindest Regards Oli Is it possible to atchually make a javascript that onMouseOver an image expands a seperate image and also works multiple times? say from 1 px wide to 25px wide? It would be a great help if someone could help me with this one. 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 Hello all, I'm new to this forum so please forgive me if I make mistakes and feel free to point them out. I'm a beginner when it comes to javascript, but would like to learn. I have been building a website that I would like to put an interactive feature on. This is the code that I currently have: Code: <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_pink.jpg')" onmouseover="scroll_up();"><img class="pinkico" hspace="3" onMouseover="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_pink_icon.jpg"> <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_yellow.jpg')"><img class="yellowico" hspace="4" onMouseOver="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_yellow_icon.jpg"> <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_white.jpg')"><img class="whiteico" onMouseover="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_white_icon.jpg" ></a> I would like to have these images scroll together at the same time in accordance with the mouse movement. So when the mouse is just hovering over one of these images or elsewhere on my page they will stay still, but when the mouse is hovered over the left or the right hand side the images move in that direction? So if the mouse is hovering over to the left side the images will start to slide left and if the mouse is hovering over the right side the images will start to slide right. I have tried to do some research on this for myself but have only been able to locate this web page to explain what I am looking for: Link 1 - The type of effect I'm looking for is demonstrated by their first example, underneath the horizontal scrolling demo header. I have no idea how to achieve this code though and have failed to find any answers that I understand on the website. Adding two little arrow images for the mouseover and mouseout effect to happen would not be a problem, but I do not understand how to go about this. Hope this is ok, Thank you for reading , Nightshade14 So I need to make a circular image map with a rollover state. I have circular buttons that I'm trying to put on my website, which I would like to not only look circular bu to BE circular. Because it just looks lame to hover over a square area and activate a button that's still 30 pixels away. I was digging through the Internets and found this: http://jsfiddle.net/7JJUk/ My idea was to tweak the rollover overlay into being as large as my original image and use the rollover image as the content of the overlay div. After loads of messing around, I finally have come to this: http://jsfiddle.net/7JJUk/248/ I just know i'm on to something, but I don't know anything, really, about Javascript. I've been messing with the tidbits to figure out what controls what, but the issue I can't get past is how the image will flicker like mad (every other pixel in Chrome, sporadically in Firefox 4 whether you move the mouse or not, and only as you pass through it at certain speeds in IE 9) as you hover over it. I have no idea if this is even possible, but if it is, please help me out. If there's a better way to be doing this altogether (without flash), I would absolutely love that. Especially if there's a way to use an image map with the position command in CSS.. Thanks!!! I have an image map with 6 areas. Code: <p class="center"><img src="images/car_feature.png" alt="" usemap="#car"/></p> <map id="car" name="car"> <area shape="rect" coords="172,198,195,222" href="#" alt=""/> <area shape="rect" coords="242,79,266,104" href="#" alt=""/> <area shape="rect" coords="293,124,317,149" href="#" alt=""/> <area shape="rect" coords="407,212,431,227" href="#" alt=""/> <area shape="rect" coords="430,300,453,325" href="#" alt=""/> <area shape="rect" coords="565,346,588,370" href="#" alt=""/> </map> I also have 6 DIVs that are hidden and only a single one will appear visible on mouseover of its corresponding image map area. Code: <div id="hidden"> <div class="feature"> Feature 1 </div> <div class="feature"> Feature 2 </div> <div class="feature"> Feature 3 </div> <div class="feature"> Feature 4 </div> <div class="feature"> Feature 5 </div> <div class="feature"> Feature 6 </div> </div> The roadblock I'm running into is the show function in the JavaScript. Code: window.onload = init; function init() { var area = document.getElementById("car").getElementsByTagName("area"); var features = document.getElementById("hidden").getElementsByTagName("div"); hide(); function show() { for(a=0; a < area.length; a++) { if(area[a].onmouseover) { document.getElementById("hidden").getElementsByTagName("div")[a].style.display="block"; } } } function hide() { for(b=0; b < features.length; b++) { document.getElementById("hidden").getElementsByTagName("div")[b].style.display="none"; } } for(i=0; i < area.length; i++) { area[i].onmouseover = show; area[i].onmouseout = hide; } } I'm trying to get it so that if I hover over the first area on the image map, the first hidden DIV will appear, but none of the others. And if I hover over the fourth area, the fourth DIV will appear. I hope this makes sense, and I'd appreciate any and all help towards solving this issue and ending my headache lol Hi guys, I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category. So lets say I have a menu that looks like this: Code: <img src="notactiveimagemenu1.jpg" alt=""> <ul id="menu1"> <li>link</li> <li>link</li> <li>link</li> </ul> <img src="notactiveimagemenu2.jpg" alt=""> <ul id="menu2"> <li>link</li> <li>link</li> <li>link</li> </ul> Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active. I was hoping to do this with some javascript. Code: // i was thinking about something like this: // first put menu items in a array // then use document.getElementById(id).onmouseover = function() // and make some sort of check to see which src should be changed. Now I really have no clue how to do it. So if anyone knows a cool solution please let me know. I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution. And I think I should be able to use document.getElementById(id).onmouseover = function() for that. Anyway thanks for any tips. Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink1 } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages(my images here) </script> For the Links: <a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br> For the Image: <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. How do I get a function in the head to turn on or show an image in the body area? I am a struggling noob, but tutorials will not teach me. If I wanted to document.write, or in this case use an alert box, I would not have a question. I feel I understand the functions below, but these are not real world examples of anything, at least that I would ever use. I don't know how to help myself. But I do know, I need to get the part of alert("Hello") changed into something somehow the image will act on, see and display after the 3 second delay. This is the website I got this code from. http://www.w3schools.com/js/js_timing.asp If I can see how to get a function to really do something, would be a big help for me in understanding JS. This is not a school project, my school doesn't offer any programming. I have been at this all day trying to find a tutorial that would help me. Thanks so much for your help. Code: <html> <head> <script type="text/javascript"> function timeMsg() { var t=setTimeout("alertMsg()",3000); } function alertMsg() { alert("Hello"); Somehow this has to show my image. } </script> </head> <body"> <form> <input type="button" value="show my Image" onClick="timeMsg()" /> </form> <img /> </body> </html> 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 Guys, I am trying to make a change to my website so when someone clicks on the chinese flag image, for example, a function which put the clock forward a few hours. This is what the code I have got at the moment: <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=en'; ?>"><img src="images/uk.gif" title="english" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=zh'; ?>"><img src="images/ch.gif" title="chinese" onclick="chinatime()" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=ja'; ?>"><img src="images/jap.gif" title="japanese" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=kk'; ?>"><img src="images/kaz.gif" title="kazakh" border=0></a></td> <td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang='.$most_preferred; ?>">Browser Set</a></td> </tr> <tr> <td colspan="5"> <p class="meta"><span class="date"><script type="text/javascript"> var currentTime = new Date() var minutes = currentTime.getMinutes() var hours = currentTime.getHours() var month = currentTime.getMonth() + 1 var day = currentTime.getDate() var year = currentTime.getFullYear() function chinatime() { hours = hours + 5 } if (minutes < 10) minutes = "0" + minutes document.write(day + "/" + month + "/" + year + " " + hours +":"+minutes) </script> Many Thanks |