Learn VBA & Macros in 1 Week!

JavaScript - Glorified Disjointed Rollovers

Full Excel VBA Course - Beginner to Expert

Glorified Disjointed Rollovers	View Content

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!

Full Excel VBA Course - Beginner to Expert

Caption In Disjointed Rollovers

Similar Tutorials

View Content

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">

</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]

Disjointed Rollover - Text To Appear In Div

Similar Tutorials

View Content

Hey 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!

Disjointed Rollover Issue

Similar Tutorials

View Content

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>';
?>

Image Rollovers

Similar Tutorials

View Content

Say we have an image called imagefile.jpg, which we want to display when the user mouses over an already-displayed image.Now I want to preload more than just one image; for example, in a menu bar containing multiple image rollovers,or if I try to create a smooth animation effect what should i do?
I tried the following code but it doesn't work. Please help
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">
function preloader() 
{
     // counter
     var i = 0;
     // create object
     imageObj = new Image();
     // set image list
     images = new Array();
     images[0]="1.jpg"
     images[1]="2.jpg"
     images[2]="3.jpg"
     images[3]="4.jpg"
     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
} 
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='1.jpg'">
<img name="img01" src="4.jpg"></a>
</body>
</html>

Mainly I want to create the animation effect with the 4 images. Is that possible?

Slide Out Rollovers

Similar Tutorials

View Content

I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this?

<div style="padding-left:45px;width:852px;">
<a href=".html" class="Button">
<div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat">
<span id="homeButtonText">Question 1</span><br />

</div>
</a>

<a href="" class="Button">
<div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat">
<span id="homeButtonText">Question 2</span><br />
</div>
</a>
<a href="" class="Button">
<div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat">
<span id="homeButtonText">Question 3</span><br />
</div>
</a>
</div>

Lightbox2 And Image Rollovers

Similar Tutorials

View Content

Hi there,
New to these forums, and to coding websites so be kind .

My problem is, when using lightbox2 I press the back button and the rollover remains in the mouse-over position. I can "mouse over' it and then the rollover will disappear, it just seems to get stuck on.

I really have no idea what is causing this, and any help would be greatly appreciated.

Thanks alot,
Joel

Rollovers In Multiple Pages

Similar Tutorials

View Content

Good day

Lets say I have a page with 3 thumbnails and one big div. When click in one of the thumbnails the image of it must appear inside the big div.

Of course there are 3 images (little ones for the thumbnails) and 3 big images for the real size ones.

Script this is simple for me but imposible if I have more than 100 pages within 6 images inside them (3 little and 3 real size for 3 thumnail divs and one single big div).

There must be some kind of order to just script the divs of the thumbnail divs and the real size image div in all the pages at ones, otherwise I have to creat ID's to every single div inside every single page! (4 id's to one page and I have more than 100 pages!, this is inpractical because is posible that in the future the pics change, is more than 400 id's)

For example: for FIRST.html

big div (div id="img001bg")
thumb1 div (div id="th_img001"
thumb2 div (div id="th_img002"
thumb3 div (div id="th_img003"

SECOND.html
THIRD.html
... HUNDRED.html ... !

There must be some solution using somehow the functions, please help!

Thank you to all

Onmouseover Image Rollovers

Similar Tutorials

View Content

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

Very Complex Image Rollovers

Similar Tutorials

View Content

First off, I am new here - so, an introduction. My name is David Lubofsky. I am a front-end developer in Chicago, Illinois.

I have done numerous JS rollovers before, as well as image rollovers triggered by text links. However, I am having a problem combining the two.

The best example I have found of what I am trying to achieve is here - http://theworldcovered.ivyfunds.com (top right area).

I have no issue achieving part of this - where the link mouseovers trigger the image swap. My issue is making both the link and the image cause the rollover.

The method I use for image swap on text link hover is seen here - http://www.htmlite.com/faq011.php

This is what I want, except I want the image to also swap if the image is rolled over, as in the first example.

Hope this was clear - I could really use some guidance on this.

Thanks all!
David

Javascript Background-image Rollovers

Similar Tutorials

View Content

Hi guys,

Just wanted to know (seeming im a bit of a jscript beginner).

it is possible to have a background image rollover, and if so how.

Thanks.

How To Create Multiple Corresponding Text Rollovers

Similar Tutorials

View Content

i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this:

link 1a / link 2a / link 3a

the second menu (menu B) is like this:

link 1b
link 2b
link 3b

i would like to use javascript/css to do the following:

when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b)

i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color.

it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated.

Simple Css Rollovers Disappearing & Inconsistent When Combined With Js

Similar Tutorials

View Content

I'm using two simple CSS rollovers for a prev/next arrow nav, combined with a JS script that lets the user manually tab/flip/swap through a few testimonials. You roll over the "next" button, it's highlighted, you click it, a new testimonial appears in place of the old one.

Problem: the prev/next buttons are appearing and disappearing on click, seemingly randomly. I can't make any sense of it.

Image: http://img3.imageshack.us/img3/8924/jsproblem.jpg

I've tried adjusting the CSS container sizes, tried changing the positioning and even adding z-indexes in case the divs are accidentally overlapping. Gave items background colors to try to see the structure more clearly, for flaws. Nothing has worked.

Any help much appreciated.

I'm using this JS script for the tabs:

Code:

last_tab = 'tabTest1';
    function show(layerName) { 
    document.getElementById(layerName).style.display = '';}
    function hide(layerName) { 
    document.getElementById(layerName).style.display = 'none';}
    function show_next(tab_name) {
    document.getElementById(last_tab).className = '';
    var curr = document.getElementById(tab_name);
    curr.className='';
    hide(last_tab+'_data');
    show(tab_name+'_data');
    last_tab=tab_name;}

and this HTML:

Code:


        <!-- start: testimonials -->
        <div id="tabTest1_data">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <p class="spotlightnav-content-title">Testimonials</p>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    	<span class="color1">"</span>Excellent staff very courteous, friendly and professional, excellent stay, excellent meal.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Janice, Georgia</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>
          		</div>
             </div>
		</div>
        
        <div id="tabTest2_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Christine, Taiwan</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" style="height: 24px; width: 24px;" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest3_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Absolutely marvelous. No problems.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Belle, Taiwan</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest2'); return false;" id="tabTest2" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest4_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Vaguely not-terrible. Acceptable in a somewhat amazing way. ffffffffuuuuuuuuu<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Grace, Texas</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest3'); return false;" id="tabTest3" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest5_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Damn fine place, yo.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Slim, Bacon</p>
                </div>
                
                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest4'); return false;" id="tabTest4" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest6'); return false;" id="tabTest6" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>
        
        <div id="tabTest6_data" style="display: none;">
            <div class="silo1">
                <div class="spotlightnav-content-header-container">
                    <a href="#" class="spotlightnav-content-title">Testimonials</a>
                    <a href="#" class="spotlightnav-content-more">View All</a>
                </div>

                <div class="content-container">
                    <p class="spotlightnav-testimonials">
                    <span class="color1">"</span>Blurry. But good.<span class="color1">"</span>
                    </p>
                    <p class="spotlightnav-testimonials-credit">Bob, California</p>
                </div>

                <div class="spolightnav-btns-container">
                    <a href="#" onClick="javascript:show_next('tabTest5'); return false;" id="tabTest5" class="spotlightnav-btn-left"><img src="images/clear.gif" width="24" height="24" /></a>
                    <a href="#" onClick="javascript:show_next('tabTest1'); return false;" id="tabTest1" class="spotlightnav-btn-right"><img src="images/clear.gif" width="24" height="24" /></a>                </div>
        	</div>
		</div>

I'm assuming this is primarily a JS problem, but if taking a look at the CSS is necessary, let me know and I'll post it.

THANKS!!!!!

Menu Rollovers And Slide Show Won't Work At The Same Time?

Similar Tutorials

View Content

Hi there,

I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time.
I looked over you FAQ section but I can't seem to figure it out.
Any help would be hugely appreciated.
Thank you so much.

HTML:
Quote:


<div id="content">
<div style="text-align:center">
<img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
</div>

<script type="text/javascript" src="slideshow.js"></script>
</div>


<div id="navcontainer">
<ul>
<li>
<div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div>
</li>
<li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li>
<li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li>
<li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li>
<li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li>
<li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li>
<li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li>
<li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li>

</ul>

</div>

<script type="text/javascript" src="navigation.js"></script>

<div id="footer">

<div id="navcontainer_footer">
<ul>

<li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li>
<li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li>
<li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li>
</ul>

</div>

<script type="text/javascript" src="navigation_bottom.js"></script>
</div>
</div>


slideshow.js

Quote:
var pause = 3000; // interval, in milliseconds, between transitions
var i = 0; // image counter
var pic = document.getElementById("pic"); // the <img> element in the HTML file

// define an array of images
var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" );

// preload the images
for (var j = 0; j < imgs.length; j++)
{
var obj = new Image();
obj.src = imgs[j];
}

// rotates between the images in the "imgs" array
function rotate()
{
pic.src = imgs[i];
if (i === (imgs.length -1))
{
i = 0;
}
else
{
i++;
}

setTimeout("rotate()", pause);
}

window.onload = rotate;

navigation_bottom.js
Quote:
// define an array of images
var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg");

// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer_footer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;

navigation.js

Quote:
// define an array of images
var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg");

// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;

Trying To Set Up Products Page With Swatch Rollovers And Detailed Views

Similar Tutorials

View Content

Ultimately I'd like a set up resembling http://shop.lululemon.com/Swift_Tank...30/p/1230.html

Where you're able to click a swatch color and get a thumbnail of it on the model and a thumbnail of a fabric detail that you could then enlarge. I'm not sure how to go about this. I'm able to do it with one thumbnail, where when you rollover the various swatch colors, the thumbnail of the model gets replaced. However I'm unable to add in the 2 other thumbnails (on that site they're using 3 but I would only need 2) that would change at the same time, where you could switch back and forth from at detail of the model and the fabric.

I don't necessarily need the zoom function, but if it is possible to do all of those that would be good too.

Otherwise I just need help coding how to at least get the swatches to change 3 images upon mouseover and that 2 of those images would be like the 3 thumbnails on the link above and would replace the larger thumbnail once clicked.