|
JavaScript - Disjointed Rollover Issue
Hey,
Recently I've been looking into disjointed rollovers but for the life of me I can't seem to find a way to implement what I want to do. What I want to do is when I hover a link, It shows the image associated with the link in a div or element that I've pulled via mysql and php. Also when the page is loaded the first results image should populate the div before any interaction with the webpage whatsoever. My current code the first image doesn't show a default image from the database because it uses css and from what I've read so far It looks like I need to use javascript too so any help welcomed and appreciated in getting me going in the right direction. My current testing code is below: Code: <style type="text/css">
#linksDiv{border:1px #000 solid; width:300px;}
ul#links a {display: block; width:100px;}
ul#links a:hover {color:#fff; background:#AAA;border-right:5px double white;}
ul#links a img {height: 0; width: 0; border-width: 0;}
ul#links a:hover img {position: absolute; top: 37px; left: 180px; height: 100px; width: 100px; border:1px #000 solid;}
#default
</style>
<?php
$dbhost = 'localhost';
$dbuser = '***';
$dbpass = '***';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');
$dbname = 'testimg';
mysql_select_db($dbname);
echo '<div id="linksDiv"><ul id="links">';
$sql = mysql_query("SELECT * FROM tbimages") or die ('Error: '.mysql_error ());
while($row = mysql_fetch_array($sql)) {
$name = $row['name'];
$img = $row['image'];
echo '<a href="#">'.$name.'<img src="'.$img.'" title="'.$name.'" /></a>';
}
echo'</ul></div>';
?>
Similar TutorialsHey guys, I'm having a complete nightmare with this... If you see http://bit.ly/i5TwmL you can see what I am working on. In the services section with the 8 images you can see how I am TRYING to make the site work. The idea is that when scrolling over an image the related text will appear in the right column. This is to happen for each image with different text for each. The problem (as I'm sure is quite clear from using the site) is that there is a lot of jumping. When an image is not selected the images should stay in 2 columns with text to the right. "Scroll over the images for a brief description of the services we provide." I doubt I'm describing this well but this is all new to me... I have used javascript to control these rollovers. Quote: <script type="text/javascript"> //<![CDATA[ function toolTip(txt,top,left) { var el=document.getElementById('foo'); var text=new Array(); text[1]="<h2>Diamond Core Drilling</h2><p>For vertical or horizontal drilling where a precise circular opening is required. This method is used to create openings for mechanical, electrical, heating and ventilation installations and is also ideal for creating holes for routing cables, placing anchor bolts, installing load carrying devices or for concrete sample analysis. The circumference of a diamond drilled opening can be from 10mm to 1 metre or more. Drilling depths are virtually unlimited using barrel extensions. Stitch drilling is a technique which involves drilling a series of 107mm diameter holes to form openings of any size.</p>"; text[2]="<p>Scroll over the images for a brief description of the services we provide.<br><br /></p><h2>WALL SAWING</h2><p>By making a series of passes along the length being cut, wall saws are used to cut through walls for door or window openings. These can also be used to form openings on floors for stairways, lifts, etc. and can be used inverted. Cutting depths are up to 700mm</p><h2>FLOOR SAWING</h2><p>The floor saw is a very rapid cutting machine and is ideal for ground floors, warehouses, roads and runways. It enables efficient repairs, alterations and groundworks to be carried out. Cutting depths can reach 400mm and the machine can be powered by diesel, petrol, three phase electricity or gas.</p><br /><h2>CHAIN SAWING</h2><p>A concrete chain saw allows for deep plunge-cutting and corners with no over-cuts. This is useful for windows, door openings and small mechanical openings. There a various applications associated with chain sawing and it can be utilised for a variety of materials including brick, stone and reinforced concrete.</p><br /><br /><h2>WIRE SAWING</h2><p>Similar to the method of wall sawing although in place of a blade are a series of pulley wheels which guide the diamond wire 6mm in diameter. This method is ideal for removing large concrete or masonry sections with virtually no noise or vibration to the structure.</p>"; text[3]="<h2>Chasing</h2><p>Neat parallel channels are cut for housing of electrical cables within a wall or floor. All our chasing plant comes supplied with dust extraction as standard.</p>"; text[4]="<h2>Controlled Demolition</h2><p>Removal of structures or individual walls and removal of waste from site as required.<br><br><h2>Robotic Demolition</h2><p>A fast, safe and efficient method of controlled demolition using three phase driven machines remotely controlled by an operator eliminating any HAVS issues associated with traditional methods of demolition.<br><br><h2>Concrete Bursting</p></h2><p>A system in which a series of holes are drilled and bursting heads inserted which use hydraulic pressure to split the concrete. This method is used to remove large areas of concrete quietly and where there is limited space to work.</p>"; text[5]="<h2>Concrete Busting</h2><p>A system in which a series of holes are drilled and bursting heads inserted which use hydraulic pressure to split the concrete. This method is used to remove large areas of concrete quietly and where there is limited space to work.</p>"; text[6]="<h2>Concrete Crunching</h2><p>Used for walls, concrete slabs or masonry crunching is a fast, controlled method of demolition and relatively dust, vibration and noise free.</p>"; text[7]="<h2>Anchor Installation & Pull Testing</h2><p>The drilling and installation of mechanical or resin anchors and the subsequent pull off testing in a wide range of applications such as starter bars, holding down bolts, crane bases, hand rails and a myriad of other applications.</p>"; text[8]="<h2>Lintel Installation & Steel Erection</h2><p>The installation of steel or concrete lintels over any size of new door or window opening after we have diamond drilled (temporarily securing the structure above) then diamond cut to form the openings.<br><br>Steel erection is a practice which involves the cutting and removal of large sections of reinforced concrete walls or floors. Acudrill can fabricate, supply and install the steelwork to the requirements of the structural engineer.</p>"; el.innerHTML=text[txt]; el.style.top=top+"px"; el.style.left=left+"px"; el.style.display="block"; document.onmouseout=function() { el.style.display="none"; } } //]]> 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];}} } </script> <div id="foo"> <p>Scroll over the images for a brief description of the services we provide.</p> </div> <div class="g292" onmouseover="toolTip(1)"> <div> <img src="images/drilling.png" border="0" id="Image55" /></a></li></ul> </div> <h2>DIAMOND core drilling</h2> </div> <div class="g292" onmouseover="toolTip(2)"> <img src="images/sawing.png" border="0" id="Image50" /></a> </li></ul> <h2>DIAMOND sawing</h2> </div> <div class="g292" onmouseover="toolTip(3)"> <img src="images/chasing.png" border="0" id="Image50" /></a> <h2>chasing</h2></div> <div class="g292" onmouseover="toolTip(4)"> <img src="images/demolition.png" border="0" id="Image50" /></a> <h2>controlled demolition</h2></div> <div class="g292" onmouseover="toolTip(5)"> <img src="images/busting.png" alt="" /> <h2>concrete busting</h2></div> <div class="g292"onmouseover="toolTip(6)"> <img src="images/crunching.png" border="0" id="Image57" /></a> <h2>concrete crunching</h2></div> <div class="g292" onmouseover="toolTip(7,50,185)"> <img src="images/anchor.png" alt="" /> <h2>anchor installation & pull testing</h2></div> <div class="g292" onmouseover="toolTip(8)"> <img src="images/lintel.png" border="0" id="Image57" /></a> <h2>lintel installation & Steel erection</h2></div> I am slightly worried about what will happen if the user has javascript disabled. Is there a way around this? I have tried using css to control this a completely scrap the javascript http://code.hyperspatial.com/all-cod...rollover-text/ but I cannot work out how to position the text in the div. Please help or advise. Many many thanks! 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] Hey guys, I am having a bit of a hassle getting IE8 and 9 to deal with a rollover properly. On this page: http://www.robleydesign.com/works/ If you rollover any of the projects a View Project button comes up. In Firefox, Safari, Chrome ect.. the area for the hit box on that link is large and easy to click. For some reason in Internet Explorer it becomes a huge frustration clicking the button. I can't figure out why its not treating the whole button as a block element. 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! Hello, my first post here; and i am new to javascript i actually am just starting to learn the concept of javascript; and I am wondering.... if certain aspects of a website are made by using javascript such as the part on facebook "My Account"; where on click it opens a "window" with options. OR, on amazon where the menu items pop out on rollover;; can someone please tell me if they are acomplishing that by using javascript? thank you and i appreciate who ever is reading this. I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page. Here's a working example of what I have. The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think. HTML-side my button images get class="rollover" and a unique id. Code: window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
var rollOvers = document.getElementsByClassName("rollover");
for(var i=0; i<rollOvers.length; i++){
setupRollover(rollOvers[i]);
}
}
function setupRollover(thisImage){
//UP
thisImage.outImage = new Image();
thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
thisImage.onerror = thisImage;
thisImage.onmouseout = rollOut;
//OVER
thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
thisImage.onerror = rollOut;
thisImage.onmousedown = rollClick;
//DOWN
thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
thisImage.onerror = rollOut;
thisImage.onmouseover = rollOver;
thisImage.onmouseup = rollOver;
}
function rollOver() {
this.src = this.overImage.src;
}
function rollOut() {
this.src = this.outImage.src;
}
function rollClick() {
if(lastClick){
lastClick.onmouseout = rollOut;
lastClick.src = this.outImage.src;
}
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;
What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible? Thanks for any help you can provide! Okay so I am fairly new to Javascript and am having some difficulties getting this rollover to work. I've gotten this rollover code to work in multiple other pages and for some reason it just wont work for this page. The code is below, basically I have three buttons on the page that need to have a rollover effect to display an alternate image for each button, I started small to try and get just the first one to work and have not had any luck. Tried three different browsers, nothing. Any advice will be greatly appreciated. Code:
<html>
<head>
<title>Ski Montana</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
if (document.images) {
photosUp = new Image
photosDown = new Image
photosUp.src = 'photosup.gif'
photosDown.src = 'photosdown.gif'
}
var images = new Array(3);
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[0].src ="bannerad1.jpg"
images[1].src ="bannerad2.jpg"
images[2].src ="bannerad3.jpg"
var outElm;
var currentImageIndex = 0;
var maxImageIndex = images.length-1;
function cycle(){
if (outElm) {
outElm.src = images[currentImageIndex].src;
++currentImageIndex;
if (currentImageIndex > maxImageIndex) {
currentImageIndex = 0;
}
}
}
function initImageCycler(elmID){
outElm = document.getElementById(elmID);
if (outElm) {
setInterval("cycle()", 2000);
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" onload="initImageCycler('adBanner');">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="15" height="6" valign="top"></td>
<td width="103" height="6" valign="top"></td>
<td width="10" height="6" valign="top"></td>
<td width="9" height="6" valign="top"></td>
<td width="176" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="96" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="209" height="6" valign="top"></td>
<td width="11" height="6" valign="top"></td>
<td width="6" height="6" valign="top"></td>
<td width="133" height="6" valign="top"></td>
</tr>
<tr>
<td width="15" height="89" valign="top"></td>
<td width="103" height="89" valign="top"></td>
<td width="10" height="89" valign="top"></td>
<td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68" id="adBanner" alt="Ad Banners" /></td>
<td width="6" height="89" valign="top"></td>
<td width="133" height="89" valign="top"></td>
</tr>
<tr>
<td width="15" height="108" valign="top"></td>
<td width="103" height="108" valign="top"></td>
<td width="10" height="108" valign="top"></td>
<td width="9" height="108" valign="top"></td>
<td width="483" height="222" colspan="5" rowspan="3" valign="top">
<h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
<h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West
and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
<td width="11" height="108" valign="top"></td>
<td width="6" height="108" valign="top"></td>
<td width="133" height="108" valign="top"></td>
</tr>
<tr>
<td width="15" height="2" valign="top"></td>
<td width="103" height="2" valign="top"></td>
<td width="10" height="2" valign="top"></td>
<td width="9" height="2" valign="top"></td>
<td width="11" height="2" valign="top"></td>
<td width="6" height="2" valign="top"></td>
<td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
</tr>
<tr>
<td width="15" height="112" valign="top"></td>
<td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
<td width="10" height="112" valign="top"></td>
<td width="9" height="112" valign="top"></td>
<td width="11" height="112" valign="top"></td>
<td width="6" height="112" valign="top"></td>
</tr>
<tr>
<td width="15" height="46" valign="top"></td>
<td width="10" height="46" valign="top"></td>
<td width="9" height="46" valign="top"></td>
<td width="176" height="46" valign="top"></td>
<td width="97" height="46" colspan="2" valign="top"><a href="photos.htm" onMouseover="document.rollover.src=photosDown.src" onMouseout="document.rollover.src=photosUp.src"><img name="rollover" src="photosup.gif" border=0></a></td>
<td width="1" height="46" valign="top"></td>
<td width="209" height="46" valign="top"></td>
<td width="11" height="46" valign="top"></td>
<td width="6" height="46" valign="top"></td>
<td width="133" height="46" valign="top"></td>
</tr>
<tr>
<td width="15" height="44" valign="top"></td>
<td width="103" height="44" valign="top"></td>
<td width="10" height="44" valign="top"></td>
<td width="9" height="44" valign="top"></td>
<td width="176" height="44" valign="top"></td>
<td width="1" height="44" valign="top"></td>
<td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm" onMouseover="document.rollover.src=resortsdown.src" onmouseout="document.rollover.src=resortsup.src"><img src="resortsup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="209" height="44" valign="top"></td>
<td width="11" height="44" valign="top"></td>
<td width="6" height="44" valign="top"></td>
<td width="133" height="44" valign="top"></td>
</tr>
<tr>
<td width="15" height="49" valign="top"></td>
<td width="103" height="49" valign="top"></td>
<td width="10" height="49" valign="top"></td>
<td width="9" height="49" valign="top"></td>
<td width="176" height="49" valign="top"></td>
<td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm" onmouseover="document.rollover.src=contactusdown.src" onmouseout="document.rollover.src=contactusup.src"><img src="contactusup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="1" height="49" valign="top"></td>
<td width="209" height="49" valign="top"></td>
<td width="11" height="49" valign="top"></td>
<td width="6" height="49" valign="top"></td>
<td width="133" height="49" valign="top"></td>
</tr>
<tr>
<td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
<td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
<td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
<td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
<td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
<td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
<td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
<td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
</tr>
</table>
</body>
</html>
I have a div in my HTML that that when rolled over reveals an image. I can't figure out how to place a random image from a set of 5 images to appear in the background of that div when it is rolled over again. Please help me! I have a small .png on my site. I want to view at 250% when I rollover it. Is there a way to have the 250% .png be centered vertically and horizontally where the 100% without making the 100% .png 250% bigger (ex. extra white space). Any recommendations for other ways? Hello all - I am new to JS and figure this is probably an easy fix. I have a wordpress self-hosted site. I am doing a nav bar with rollovers. I have the script saved as a js file and in the right directory. I have the Code: <script src="<?php bloginfo('template_directory'); ?>/js/menu.js" type="text/javascript"></script>
in the header.php file just after the body tag. I have the styles where I want them in the CSS file. And lastly I have the html and the appropriate wordpress php call in the right spot. The css is working fine, which leads me to believe my css and html are spot on. But there is no rollover working. Do I need to put anything besides styling into my css file? Any help is much appreciated. Thanks. Hi Guys, I'm creating what is hoped to be a fun and slightly different page for Christmas. I am looking to have about 6 'dangling' objects, each that bounce on rollover (currently working) and that play a different note/tune. At the moment you will see in the code that I am using HTML5 to do this - whilst I am ok with this (I will create a flash fall back) I am unable to work out how to play a different sound for each rollover. Of course if there is a more cross browser friendly solution I'm all ears... Any help much appreciated! Please see below code... Quote: <!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> // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com) // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc) //** Call: uniquevar.playclip() to play sound var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } //Initialize two sound clips with 1 fallback file each: var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3") </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <style type="text/css"> body { background-color: #FFF; } div { padding:0px; width:116px; height:211px; text-align:center; float:left; display:block; } </style> </head> <body> <div id="bouncy1"> <a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div> <div id="bouncy2"> <a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div> <SCRIPT> $(function(){ //Add bounce effect on Click of the DIV $('#bouncy1').mouseenter(function () { $(this).effect("bounce", { times:3 }, 500); }); $('#bouncy2').mouseenter(function () { $(this).effect("bounce", { times:3 }, 300); }); }); </SCRIPT> </body> </html> 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;
}
}
This JavaScript is linked externally and was written to add a hover action to navigation links. It downloads quick and works great, however, the code is written to apply to all image links on the page. I need a declaration that will make the action apply Only to the navigation links. Not sure the best approach here. getElementById, or another var? Any insight is greatly appreciated. JavaScript: 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 = rollOut; thisImage.overImage = new Image(); thisImage.overImage.src = "images/navbar/" + thisImage.id + "_ro.jpg"; thisImage.onmouseover = rollOver; } function rollOut() { this.src = this.outImage.src; } function rollOver() { this.src = this.overImage.src; } HTML(intended for this application): <div id="navigation"> <ul> <li><a href="index.html" target="_self" class="nav_home"><img src="images/navbar/home_tab.jpg" alt="home_tab" id="home_tab" /></a></li> <li><a href="aboutus.html" target="_self" class="nav_about"><img src="images/navbar/about_tab.jpg" alt="about_tab" id="about_tab" /></a></li> <li><a href="quartets.html" target="_self" class="nav_quartet"><img src="images/navbar/quartets_tab.jpg" alt="quartets_tab" id="quartets_tab" /></a></li> <li><a href="events_calender.html" target="_self" class="nav_event"><img src="images/navbar/events_tab.jpg" alt="events_tab" id="events_tab" /></a></li> <li><a href="members.html" target="_self" class="nav_members"><img src="images/navbar/members_tab.jpg" alt="members_tab" id="members_tab" /></a></li> </ul> </div> I am using a script from Dynamic Drive and have posted this on their forum as well, with no luck. The script looks great in every browser but IE. When you hover over the parent page and the child pages show up, they go away when you start to scroll down. Any idea of a fix? The script is below. I have it sitting in its own js file within my Wordpress theme. Code:
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
My site is he http://www.computerdepot-online.net/ 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 have some rollover images on my website, and they don't switch until the page is finished loading. Is this standard? Is there a way to have the rollovers work when the page is still in the process of loading all the images? 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! Hi, I am needing some help with the mootools script. I have uploaded a test page at http://74.52.32.68/~tempcom/slider/ Here is what I am attempting to do. When I click on one of the items (say Landscapes), I want some corresponding text to appear in the green box above. Is this possible? Would it be a javascript? Any sample codes or assistance would be greatly appreciated. Thanks in advance! |
|||||||