JavaScript - Javascript Hover Add Image Layer?
Ok. Basically, I will have images, about 150x100 that are all different.
They will be displayed on a page in groups of 4. I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha. To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered. I know this part of the code, but I don't know what to put inside it: Code: $(document).ready(function(){ $("img").mouseenter(function(){ //add image on top of this image }) $("img").mouseleave(function(){ //remove covering image }) }) What should I replace the comments with? Thanks Similar TutorialsHI, I am looking to enlarge an image when its hovered over, can anyone give me the code for this? Thanks Hi guys. How would I implement this css: Code: .story-wrap:hover .dates This obviously allows the .dates div to react when I hover over the .story-wrap div. How would I select the same in javascript with this code: Code: $(".story-wrap .dates").hover(function () { Because currently it just reacts when .dates is hovered over. Cheers! Hi all I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded. Is there a way to either: * Use javascript to make it so the image only loads when the link is hovered over? or * Allow the rest of the javascript on the page to run before the images are finished loading? I think i'd prefer the first solution if possible but i'm open to all ideas. Thanks in advance! Hi everyone - im trying to make the left Product Categories background position "rollover" menu work on this page: http://www.jaybrand.co.uk/p1.html at the moment the page loads and CSS hover works to set the background position so that the graphic behind makes a roll over effect. i put some javascript to set the background position permantly to the roll over on click (so the user can see which one they are on) but then this knocks out the roll over effect on all other categories - it knocks out the CSS hover: onclick="setStyle('c1','backgroundPosition','0px 0px'); it means that c1:hover no longer works.. i tried putting !important in the CSS c1:hover background position and this fixed it in Firefox but not IE. So how can i write something in Javascript to also say: onclick="setStyle('c1:hover','backgroundPosition','-276px 0px'); ......... i know Javascript does not do hyphens and the way to get for example "background-position" in CSS is to ditch the hyphen and make "P"osition capitol. perhaps something can be done also to get to the CSS hover attribute? I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/. I have found some javascript which looks like it will do the trick. But being a graphic designer and not a web developer or anything it just doesn't work. lol Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve. This is my very first attempt at Javascript here is the html: Code: <link href="style.css" rel="stylesheet" type="text/css" /> <script src="javascript.js" type="text/javascript"></script> </head> <body> <div style="margin:20px;" class="modules"> <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> </div> </body> And the CSS: Code: .modules { margin:0px -20px 20px; background-color:#9999CC; min-height:100%; width:100%; } .single_module { border:solid 1px #000000; background-color:#000000; height:160px; padding:0; margin:-1px 0px 0px -1px; width:240px; float:left; } .toggleopacity img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity:0.5; } .toggleopacity:hover img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity:1; } And the Javascript: Code: $("#single_module").css({ opacity: "0.0", display: "block" }); $("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} ); $("#single_module").hide(); }); I'm working on a sliding panel menu in Javascript, there are just text items that have a different background when hovered over that is controlled in CSS, When the menu item is selected the background is changed to a blue button in Javascript and turned off when clicked again. The first problem I encountered was the :hover pseudoclass not working, I managed to fix that with the !important attribute, but now whenever I hover back over the now selected button the :hover effect kicks back in and replaces the background for the button. I've tried something along the lines of ul li:selectd :hover {backg...} with no luck, so far I haven't found a way to do it inside javascript. I hope that explains it well enough, any advice is much appreciated. Right i need some help with some code, i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP $piclocation1 $piclocation2 $piclocation3 What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". and so on if you could help me figure out a way around to get this to work i would be ever so greatfull, as i dont know if i got this in the right area as it would contain javascript, php and poss Css! and even if you could point me in the right direction would be helpful! this is the website page i am testing it on if you would like to look at if visually http://www.wolverhampton-wanderers.co.uk/text.php and here is the code: Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="Stylesheet" type="text/css" href="./wolves.css"/> <title>Untitled Document</title> <?php $getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3"; $news = mysql_query($getnews) or die(mysql_error()); $counter = 1; while($row1 = mysql_fetch_array($news)){ if($counter == 1) { $picture1 = $row1['imageID']; $getimage1 = "SELECT * FROM news_images WHERE imageID = $picture1"; $image1 = mysql_query($getimage1) or die(mysql_error()); $pic1 = mysql_fetch_array($image1); $piclocation1 = $pic1['imageFile']; } if($counter == 2) { $picture2 = $row1['imageID']; $getimage2 = "SELECT * FROM news_images WHERE imageID = $picture2"; $image2 = mysql_query($getimage2) or die(mysql_error()); $pic2 = mysql_fetch_array($image2); $piclocation2 = $pic2['imageFile']; } if($counter == 3) { $picture3 = $row1['imageID']; $getimage3 = "SELECT * FROM news_images WHERE imageID = $picture3"; $image3 = mysql_query($getimage3) or die(mysql_error()); $pic3 = mysql_fetch_array($image3); $piclocation3 = $pic3['imageFile']; } $counter = $counter + 1; } ?> </head> <body> <div class="shaddow"><!-- This is the shaddow behind the content --> <div class="content"> <!-- This is the content and main background --> <div class="header"><img src="../images/header.jpg"/></div> <div class="menu"> <div id="nav"> <?php $cat = "SELECT * FROM `top-menu` ORDER BY 'category' ASC"; $category = mysql_query($cat) or die(mysql_error()); $start = 1; while($row = mysql_fetch_array($category)){ $submenu = $row['sub-menu']; if($submenu == '1'){ echo "</li><li><a id='{$row['Active-ID']}' " . "href='{$row['Address']}'>" . "{$row['Text']}</a>"; } elseif($submenu == '2'){ if($start == 1){ echo "<ul>"; } echo "<li><a id='{$row['Active-ID']}' " . "href='{$row['Address']}'>" . "{$row['Text']}</a></li>"; $start = $start + 1; if($submenu !='2'){ echo "</ul></li>"; $start = 1; } } } echo "</ul></li><a class='nav-end'></a>"; ?> </div> </div> <div id="latest-news"> <?php $getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3"; $news = mysql_query($getnews) or die(mysql_error()); $counter = 0; echo "<div id='latest-news-image'></div>" . "<div id='latest-news-header'>Breaking News</div>"; while($row1 = mysql_fetch_array($news)){ echo "<div class='breaking-news'><div class='breaking-news-header'><a href='#'>{$row1['title']}</a></div>" . "<div class='breaking-news-info'>Posted on {$row1['date']}, by {$row1['author']}</div>" . "<div class='breaking-news-desc'>{$row1['desc']}</div>" . "<div class='breaking-news-readmore'><a href='#'>Read More</a></div></div>"; $counter = $counter + 1; } ?> </div> </div> </div> </body> </html> Dear all, I have been trying to replicate a cool javascript effect that appears here. See the funky images fading in when hovering with mouse? I want that ;-) By using Firebug I think I have narrowed down the code needed to: Code: <div id="main" class="clearafter"> <div class="inner clearafter"> <div class="columns clearafter"> <div class="project hovers column" style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);"> <a href="http://mountfolly.co.uk" class="image"> <img width="274" height="137" alt="project" src="/images/41_project.jpg" class="screenshot"> <img width="274" height="137" alt="project" src="/images/7_project.jpg" class="text" style="opacity: 0; display: inline;"> </a> <h3>Text and titles etc...</h3> <p>etc etc etc...</p> </div> <div style="border-color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(255, 255, 255);" class="project hovers column"></div> </div> </div> </div> <script type="text/javascript" src="/javascript/global.js"></script> and this (which I put into a javascript file called global.js): Code: /* project listings */ // to deal with IEs opacity idiocy $(function() { $('.project.hovers .text').css({opacity: 0}).show(); $('.project.hovers').css({cursor: 'pointer'}).click(function() { location.href = $('h3 > a', this).attr('href'); }); }); $('.project.hovers').hover( function () { $('.text',this).stop().fadeTo('100',1); $(this).stop().animate({borderTopColor: '#E9E9E9', borderRightColor: '#E9E9E9', borderBottomColor: '#E9E9E9', borderLeftColor: '#E9E9E9', backgroundColor: '#EEE' }, 100) }, function () { $('.text',this).stop().fadeTo(1000,0); $(this).stop().animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF', backgroundColor: '#FFF' }, 1000) } ); But when I re-create the files (index.html, global.js, and replacement images) all I get is this. No hover effect... Any ideas what is missing? Would appreciate some help. Thanks, Wysiwyger PS: If you fancy a laugh, check these out ok I have this image and i want the image to change upon the mouse hovering over it. Which in it self is simple to do and I Google numerous different ways on how to do it. But each one i would be forced to use a <a href... in it. The thing is I don't want to use it cause i am already using HTML image map. I really need help on finding the code that would work... This is what I have Code: <html> <head> </head> <body> <p align="center"><img src="room.bmp" border="1" usemap="#maps" alt="Green room" /></p> <map name="maps"> <area shape="rect" coords="25,210,100,300" href="greenroom.html#energy" > <area shape="rect" coords="130,215,185,277" href="greenroom.html#water"> <area shape="rect" coords="80,11,263,149" href="greenroom.html#tv"> </map> ............. Hey, I want javascript to change the background image on hover. This is my javascript: Code: function navOver(obj){ var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat'; obj.style.background='imgUrl'; } function navOut(obj){ var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat'; obj.style.background='imgUrl'; } and this is the HTML: Code: <li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li> This doesn't work, can anyone help me and say me what to do? Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this: http://piscesmike.com/Pages/recipes/onions.html The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob! On my website http://smstext.jigowatt.co.uk i have a menu which when you hover over certain parts popups with information. I have designed a Mooflow document that I want to popup instead (i will design a different one for each section). I cant get it to show up when you hover? I am trying to add a php link in the javascript file that links the hover images. This is my code at the moment Code: var ddimgtooltip={ tiparray:function(){ var tooltips=[] //define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object] //For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world" //For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc} tooltips[0]=["http://i1189.photobucket.com/albums/z423/creativeedge1/Golf-Popup1.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}] tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}] tooltips[2]=["../dynamicindex14/winter.jpg"] tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}] return tooltips //do not remove/change this line }(), tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips When I am trying to link the php I use this code Code: var ddimgtooltip={ tiparray:function(){ var tooltips=[] //define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object] //For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world" //For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc} tooltips[0]=[<link href="<?php bloginfo('template_directory'); ?>/index2.php", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}] tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}] tooltips[2]=["../dynamicindex14/winter.jpg"] tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}] return tooltips //do not remove/change this line }(), tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips Obviously I am doing something wrong but I'm not sure what!?? Help Please Hello, I was wondering if anyone could help me with a personal website I am modifying for a friend. He basically has a list of links such as: Home Blog Pictures Links What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place. I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over? Is it possible/recommended to use the follow JQuery? http://ajax.googleapis.com/ajax/libs.../jquery.min.js Thank you for your time So, I'm new to Javascript but really just need the one code. I've tried the tutorials but I have never worked well with those -- I've always found it easier to actually be working with someone. But anyway. Basically, I need something sort of like this -- you click the thumbnail and the image appears in that predetermined spot. One thing, though: the images have to layer over each other. Like, you click image A, and it appears in the spot. You click image B, and it appears on top of image A. It'd be even better if when you clicked Image A it appeared and then you clicked image A again and it disappeared, but I'm going to try to start small. I've gone through the tutorials and have a sort of ish understanding about what some of the parts of the codes do, and I've been told I'm a fast-ish learner, so I think I'll catch the hang of this quick. Thank you! <3 Hi there, I am looking to make a javascript hover menu. Like the main hover menus at websites like... http://www.godaddy.com and http://www.mediatemple.com How can i do this? Are there any tutorials? And is javascript the best language to do this in, or ajax or web2.0 ? I have searched for information on this but so far no luck. site: http://www.brentpurton.com/TrueSteez go to the product page The problem: I have a set of images that have hover scrolling. The idea is that when you click on the thumbnail image at the bottom in the hover scroll area, a swap image behaviour will change the picture on the shirt. The real problem is that when I implement the swap image on the thumbnails and preveiw it. They no longer Hover Scroll, they just stay in 1 spot. They do however swap the image. here is what happens: http://www.brentpurton.com/TrueSteezSwap Any Help is apreciated. Thanks in advance hi, i want to write a js function which will change images (i have an array of images) on mouse over till the time i have my mouse over the image. i have written function: Code: function changeImage(testImage,source) { var my_array=testImage.split("||"); var actualLen = my_array.length - 2; for (i=0;i<my_array.length;i++) { document.getElementById("lrgPic" + source).setAttribute("src",my_array[i]); setTimeout('',1000); if(i == ( my_array.length - 1 )) { // i = (( my_array.length - 1 ) - i) - 1; // alert(i); } } } but the action i want is: on hovering over the image (location: "lrgPic" in above code) images should keep on changing grabbing the location from array ("my_array" above) and the image change should happen after every sec. i have tried "setTimeout" function; but it's not working as desired. with the code which is commented above.. i want to reset the loop so that images are continuously changed till "onmouseOut" is performed... any clues guys.. how can i improve on this code? with this code.. my script goes in infinite loop.. please help thanks in advance How can I add fadeIn and fadeOut with a duration that I can set/adjust to this javascript? The site is using Zencart and the the Image Hover effect comes from the Image Handler 2 Add-on. Thank you in advance for your help. Your time and attention in helping me with this is greatly appreciated. Here is a link to the site residing on a subdomain I use to build sites on http://test3.fullspecweb.com I read the "Read Before Posting" and it said to only post the code you are having trouble with, but I have no idea which section that would be so I apologize for being such a noob Here is the script from the jscript_imagehover.js file... Code: var offsetfrommouse=[20,20]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset var displayduration=0; //duration in seconds image should remain visible. 0 for always. var currentimageheight = 400; // maximum image size. var padding=10; // padding must by larger than specified div padding in stylessheet // Global variables for sizes of hoverimg // Defined in "showtrail()", used in "followmouse()" var zoomimg_w=0; var zoomimg_h=0; var vpos; //Detect IE var stIsIE = /*@cc_on!@*/false; //detect opera var isOpera = window.opera?1:0; // Detect Webkit browsers var isWebKit = navigator.userAgent.indexOf("AppleWebKit") > -1; if (document.getElementById || document.all){ document.write('<div id="trailimageid">'); document.write('</div>'); } function getObj(name) { if (document.getElementById) { this.obj = document.getElementById(name); this.style = document.getElementById(name).style; } else if (document.all) { this.obj = document.all[name]; this.style = document.all[name].style; } else if (document.layers) { this.obj = document.layers[name]; this.style = document.layers[name]; } } function gettrail(){ return new getObj("trailimageid"); } function truebody(){ if (isWebKit){ return document.body; }else if (isOpera) { return document.documentElement; }else{ return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } } function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){ zoomimg_w=zoomimgwidth; zoomimg_h=zoomimgheight; if (zoomimgheight > 0){ currentimageheight = zoomimgheight; } trailobj = gettrail().obj; trailobj.style.width=(zoomimgwidth+(2*padding))+"px"; trailobj.style.height=(zoomimgheight+(2*padding))+"px"; trailobj.setAttribute("startx", startx); trailobj.setAttribute("starty", starty); trailobj.setAttribute("startw", startw); trailobj.setAttribute("starth", starth); trailobj.setAttribute("imagename", imagename); trailobj.setAttribute("imgtitle", title); document.onmousemove=followmouse; } function hidetrail(){ trailstyle = gettrail().style; trailstyle.visibility = "hidden"; document.onmousemove = ""; trailstyle.left = "-2000px"; trailstyle.top = "-2000px"; } function followmouse(e){ var xcoord=offsetfrommouse[0]; var ycoord=offsetfrommouse[1]; if (stIsIE){ var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15; var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight); } else { var docwidth=pageXOffset+window.innerWidth-15; var docheight=Math.min(window.innerHeight); } var relativeX = null; var relativeY = null; if (typeof e != "undefined"){ if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) { relativeX = e.layerX; relativeY = e.layerY; } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) { // relativeX = e.x; // original code replaced to work with Opera // relativeY = e.y; // original code replaced to work with Opera relativeX = event.offsetX; relativeY = event.offsetX; } if (docwidth - e.pageX < zoomimg_w + (3 * padding)) { xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]); } else { xcoord += e.pageX; } if (docheight - e.pageY < zoomimg_h + (2 * padding)){ ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop)); // returning different values for ff and (opera and webkit) - fixed 12th june 2010 } else { ycoord += e.pageY; } } else if (typeof window.event != "undefined"){ // Seems to be IE if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) { relativeX = event.x; relativeY = event.y; } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) { relativeX = event.offsetX; relativeY = event.offsetY; } if (docwidth - event.clientX < zoomimg_w + (3 * padding)) { xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]); } else { xcoord += truebody().scrollLeft+event.clientX; } /* event.clientY is not valid in firefox netscape or opera, but ie has to use it */ var ie_offset = -20; if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){ /* ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) ); */ ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) ); } else { ycoord += ie_offset + truebody().scrollTop + event.clientY; } } trail = gettrail(); startx = trail.obj.getAttribute("startx"); starty = trail.obj.getAttribute("starty"); startw = trail.obj.getAttribute("startw"); starth = trail.obj.getAttribute("starth"); imagename = trail.obj.getAttribute("imagename"); title = trail.obj.getAttribute("imgtitle"); // calculate and set position BEFORE switching to visible if (stIsIE){ var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15; var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight); }else{ var docwidth=pageXOffset+window.innerWidth-15; var docheight=Math.max(document.body.offsetHeight, window.innerHeight); } if(ycoord < 0) { ycoord = ycoord*-1; } if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; } if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; } trail.style.left=xcoord+"px"; trail.style.top=ycoord+"px"; if (trail.style.visibility != "visible") { if (((relativeX == null) || (relativeY == null)) || ((relativeX >= startx) && (relativeX <= (startx + startw)) && (relativeY >= starty) && (relativeY <= (starty + starth)))){ newHTML = '<div><h1>' + title + '</h1>'; newHTML = newHTML + '<img src="' + imagename + '"></div>'; trail.obj.innerHTML = newHTML; trail.style.visibility="visible"; } } } trying to find a example of when you hover over a image, text appears on the bottom so it could be a picture of a dog, whne you put your mouse over it, text will show in the picture (ie* transparent background for text so it's readable) anywhre where I can find a example of this???? Hi guys, I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is .... I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead. Here is my code: Javascript Code: <script type="text/javascript"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]></script> HTML Code: <div id="menuPadding"> <div id="menu"> <ul id="nav"> <li id="m1"><a href="">HOME</a></li> <li id="m2">ABOUT US <ul> <li><a href="">Our Values</a></li> <li><a href="">Facilities</a></li> <li><a href="">Arena</a></li> <li><a href="">Jobs</a></li> </ul> </li> <li id="m3">SUCCESS <ul> <li><a href="">Jobs</a></li> <li><a href="">Results</a></li> <li><a href="">Awards</a></li> <li><a href="">Testimonials</a></li> </ul> </li> </div> </div> CSS Code: #menu { margin-top: 16px; width: 879px; height: 30px; z-index: 1000; font-family: Verdana, Geneva, sans-serif; font-size:11px; font-weight:bold; } #menuPadding { margin: 0px 0px 0px 0px; padding: 10px 0px 10px 0px; text-align:center; z-index: 1000; } #menuPadding ul { height: 29px; margin: 0px 0px 0px 0px; padding: 5px 0px 5px 0px; z-index: 1000; } #menuPadding ul li { /* display: inline;*/ line-height: 29px; padding:0px; margin-left:1px; display:block; float:left; font-weight:bold; color:#fff; z-index: 1000; } #menuPadding ul li a { text-align:center; z-index: 1000; } #menuPadding ul li li { padding:0px; margin:0px; z-index: 1000; } #menuPadding ul li li a { text-align:left; padding-left:14px; text-transform:uppercase; z-index: 1000; font-size:90%; } #menuPadding ul li li a.notupper { text-transform:none; z-index: 1000; } /* coloured menus */ #menuPadding ul li#m1 { background:#FF0000; width:96px; z-index: 1000; } #menuPadding ul li#m1 li { background:#FF0000; width:146px; z-index: 1000; } #menuPadding ul li#m2 { background:#0099CC; width:96px; z-index: 1000; } #menuPadding ul li#m2 li { background:#0099CC; width:166px; z-index: 1000; } #menuPadding ul li#m2 li a { width:166px; z-index: 1000; } #menuPadding ul li#m3 { background:#999999; width:97px; z-index: 1000; } #menuPadding ul li#m3 li { background:#999999; width:176px; z-index: 1000; } #menuPadding ul li#m3 li a { width:176px; z-index: 1000; } #menuPadding ul li#m4 { background:#9966CC; width:96px; z-index: 1000; } #menuPadding ul li#m4 li { background:#9966CC; width:156px; z-index: 1000; } #menuPadding ul li#m4 li a { width:156px; z-index: 1000; } #menuPadding ul li#m5 { background:#AAC619; width:96px; z-index: 1000; } #menuPadding ul li#m5 li { background:#AAC619; width:230px; padding-right:20px; z-index: 1000; } #menuPadding ul li#m5 li a { width:230px; z-index: 1000; } #menuPadding ul li#m6 { background:#FF9900; width:97px; z-index: 1000; } #menuPadding ul li#m6 li { background:#FF9900; width:146px; z-index: 1000; } #menuPadding ul li#m7 { background:#FF0099; width:97px; z-index: 1000; } #menuPadding ul li#m7 li { background:#FF0099; width:216px; color:#fff; z-index: 1000; } #menuPadding ul li#m7 li a { width:216px; color:#fff; z-index: 1000; } #menuPadding ul li#m7 li li { font-size:87%; z-index: 1000; } #menu li ul ul { /* third-and-above-level lists */ margin: -30px 0 0 216px; z-index: 1000; } #menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em; z-index: 1000; } #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */ left: auto; z-index: 1000; } #menuPadding ul li#m8 { background:#660099; width:97px; z-index: 1000; } #menuPadding ul li#m8 li { background:#660099; width:146px; z-index: 1000; } #menuPadding ul li#m9 { background:#A80017; width:97px; z-index: 1000; } #menuPadding ul li#m9 li { background:#A80017; width:146px; z-index: 1000; } #menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited { color:#fff; z-index: 1000; } #menuPadding ul li a:hover { color:#000; z-index: 1000; } /* suckerfish */ #menu, #menu ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1;color:#fff; } #menu a { display: block; width: 96px; } #menu li { /* all list items */ float: left; width: 96px; /* width needed or else Opera goes nuts */ border-top:1px solid #fff; } #menu li ul { /* second-level lists */ position: absolute; background: orange; width: 106px; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ font-size:90%; } #menu li ul ul { /* third-and-above-level lists */ /* margin: -1em 0 0 96px;*/ font-size:110%; } #menu li li { font-size:100%; color:#fff; } #menu li:hover ul ul, #menu li.sfhover ul ul { left: -999em; } #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated! Thanks in advance! |