Tearing my hair out for two days!

ContagiousIdeal · Dec 26, 2008

I'm using some javascript for rollovers, I've also got my gif.s to fade in for my links.

The links should fade in after main logo and window brackets as a white color, then if you mouseover them it should fade into orange and when you mouse out it should fade back to white.

What it IS doing instead is staying hidden till mousedover and then it fades in the orange but only if you run your mouseover it right below the viewer window on the bottom right.

WHAT am I doing wrong!? It's been driving me bonkers for days and no amount of searching have I been able to find an answer!

http://www.coltfreeman.com/test/

Source in index:

Code:

<html>
<head>
<title>Colt Freeman - Contagious Ideal Productions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

<SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_FadingRollovers.js">
</SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">

     JSFX.Rollover("about", "http://www.webdesignforum.com/images/about_over.gif");
	 JSFX.Rollover("portfolio", "http://www.webdesignforum.com/images/portfolio_over.gif");
	 JSFX.Rollover("print", "http://www.webdesignforum.com/images/print_over.gif");
	 JSFX.Rollover("details", "http://www.webdesignforum.com/images/details_over.gif");
	 
</SCRIPT>

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

<style type="text/css">

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1000px;
	height:725px;
	clear:both;
}

#logo {
	position:absolute;
	left:0px;
	top:0px;
	width:352px;
	height:95px;
	clear:both;
}

#black-top {
	position:absolute;
	left:352px;
	top:0px;
	width:648px;
	height:95px;
	clear:both;
}

#tl-bottom {
	position:absolute;
	left:0px;
	top:95px;
	width:33px;
	height:42px;
	clear:both;
}

#flashcontent {
	position:absolute;
	left:33px;
	top:95px;
	width:933px;
	height:588px;
	clear:both;
}

#black-right {
	position:absolute;
	left:966px;
	top:95px;
	width:34px;
	height:542px;
	clear:both;
}

#Black-left {
	position:absolute;
	left:0px;
	top:137px;
	width:33px;
	height:588px;
	clear:both;
}

#br-right {
	position:absolute;
	left:966px;
	top:637px;
	width:34px;
	height:88px;
	clear:both;
}

#black-bottom {
	position:absolute;
	left:33px;
	top:683px;
	width:500px;
	height:42px;
	clear:both;
}

#index-09 {
	position:absolute;
	left:533px;
	top:683px;
	width:382px;
	height:3px;
	clear:both;
}

#br-left {
	position:absolute;
	left:915px;
	top:683px;
	width:51px;
	height:42px;
	clear:both;
}

#index-11 {
	position:absolute;
	left:533px;
	top:686px;
	width:14px;
	height:26px;
	clear:both;
}

#about {
	position:absolute;
	left:547px;
	top:686px;
	width:56px;
	height:16px;
	overflow : hidden;
	background-image: url('/image/about.gif'); 
}

#index-13 {
	position:absolute;
	left:603px;
	top:686px;
	width:32px;
	height:26px;
	clear:both;
}

#portfolio {
	position:absolute;
	left:635px;
	top:686px;
	width:84px;
	height:20px;
	overflow : hidden;
	background-image: url('/image/portfolio.gif'); 
}

#index-15 {
	position:absolute;
	left:719px;
	top:686px;
	width:39px;
	height:26px;
	clear:both;
}

#print {
	position:absolute;
	left:758px;
	top:686px;
	width:45px;
	height:20px;
	overflow : hidden;
	background-image: url('/image/print.gif'); 
	
}

#index-17 {
	position:absolute;
	left:803px;
	top:686px;
	width:35px;
	height:26px;
	clear:both;
}

#details {
	position:absolute;
	left:838px;
	top:686px;
	width:62px;
	height:16px;
    overflow : hidden;
	background-image: url('/image/details.gif'); 
}

#index-19 {
	position:absolute;
	left:900px;
	top:686px;
	width:15px;
	height:26px;
	clear:both;
}

#index-20 {
	position:absolute;
	left:547px;
	top:702px;
	width:56px;
	height:10px;
	clear:both;
}

#index-21 {
	position:absolute;
	left:838px;
	top:702px;
	width:62px;
	height:10px;
	clear:both;
}

#index-22 {
	position:absolute;
	left:635px;
	top:706px;
	width:84px;
	height:6px;
	clear:both;
}

#index-23 {
	position:absolute;
	left:758px;
	top:706px;
	width:45px;
	height:6px;
	clear:both;
}

#black-bottom2 {
	position:absolute;
	left:533px;
	top:712px;
	width:382px;
	height:13px;
	clear:both;
}
</style>
</head>

<body style="background-color:#000000; margin-left: 50%; margin-bottom: 50%; margin-left: 0px; margin-right: 0px;">

<div id="Table_01"style="position: relative; width:100%; left: 15%;">
	<div id="logo">
		<img src="http://www.webdesignforum.com/images/logo.gif" width="352" height="95" alt="">
	</div>

<div id="black-top">
	</div>

<div id="tl-bottom">
		<img src="http://www.webdesignforum.com/images/tl_bottom.gif" width="33" height="42" alt="">
	</div>
	
	 <div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>	
	<script type="text/javascript">
		var fo = new SWFObject("autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");		
				
		//Optional Configuration
		//fo.addVariable("langOpenImage", "Open Image in New Window");
		//fo.addVariable("langAbout", "About");	
		//fo.addVariable("xmlURL", "gallery.xml");					
		
		fo.write("flashcontent");	
		
	</script>	
	
	
<div id="black-right">

	</div>
	
<div id="Black-left">
	</div>
	
<div id="br-right">
		<img src="http://www.webdesignforum.com/images/br_right.gif" width="34" height="88" alt="">
	</div>
	
<div id="black-bottom">
	</div>
	
<div id="index-09">
	</div>
	
<div id="br-left">
		<img src="http://www.webdesignforum.com/images/br_left.gif" width="51" height="42" alt="">
	</div>
	
<div id="index-11">	
	</div>
	
<div id="about">
		<dt style="background-image: url('/images/about.gif');">
		<a href="http://www.webdesignforum.com/images/about.jpg" rel="lytebox" title="Who is Colt Freeman anyway..."
	    onMouseOver="JSFX.fadeIn('about');return true;"
		onMouseOut="JSFX.fadeOut('about');return true;"	>
	<img name="about" src="http://www.webdesignforum.com/images/about.gif" width="56" height="16" border="0" class="imgFader alt="">
	</a>
	</div>
	
<div id="index-13">		
	</div>
	
<div id="portfolio">
	<dt style="background-image: url('/images/portfolio.gif');">
	<a href="http://www.webdesignforum.com/images/portfolio1.jpg" rel="lytebox[portfolio]" title="Portfolio Page 1"</a>
    <a href="http://www.webdesignforum.com/images/portfolio2.jpg" rel="lytebox[portfolio]" title="Portfolio Page 2"
	  onMouseOver="JSFX.fadeIn('portfolio');return true;"
	  onMouseOut="JSFX.fadeOut('portfolio');return true;">
			<img name="portfolio" src="http://www.webdesignforum.com/images/portfolio.gif" width="84" height="20" class="imgFader" border="0" alt=""></a>
	        
	</div>
	
<div id="index-15">
	</div>
	
<div id="print">
		<dt style="background-image: url('/images/print.gif');">
		<a href="http://www.printroom.com"
		 onMouseOver="JSFX.fadeIn('print');return true;"
		 onMouseOut="JSFX.fadeOut('print');return true;">
			<img name="print" src="http://www.webdesignforum.com/images/print.gif" width="45" height="20" border="0" class="imgFader"  alt=""></a>
	</div>
	
<div id="index-17">
	</div>
	
<div id="details">
	 	<dt style="background-image: url('/images/details.gif');">
		<a href="http://www.webdesignforum.com/images/details.jpg" rel="lytebox" title="How one would hire Colt"
		  onMouseOver="JSFX.fadeIn('details');return true;"
		  onMouseOut="JSFX.fadeOut('details');return true;">
			<img name="details" src="http://www.webdesignforum.com/images/details.gif" width="62" height="16" border="0" class="imgFader"  alt=""></a>
	</div>
	
<div id="index-19">	
	</div>
	
<div id="index-20">
	</div>
	
<div id="index-21">	
	</div>
	
<div id="index-22">	
	</div>
	
<div id="index-23">	
	</div>
	
<div id="black-bottom2">
	</div>
</div>
</body>
</html>

horrorshow75 · Dec 26, 2008

Your background url is incorrect

'/image/about.gif'

Should be "images"

ContagiousIdeal · Dec 26, 2008

horrorshow75 said:
Your background url is incorrect

'/image/about.gif'

Should be "images"

Crap corrected still no luck though...

I've been staring at the code for too long.

horrorshow75 · Dec 26, 2008

According to my web developer firefox addon your CSS is still incorrect.
I am assuming these are your menu divs.
Should be images

Code:

#about {
	position:absolute;
	left:547px;
	top:686px;
	width:56px;
	height:16px;
	overflow : hidden;
	background-image: url('/image/about.gif'); 
}

#portfolio {
	position:absolute;
	left:635px;
	top:686px;
	width:84px;
	height:20px;
	overflow : hidden;
	background-image: url('/image/portfolio.gif');
}

#print {
	position:absolute;
	left:758px;
	top:686px;
	width:45px;
	height:20px;
	overflow : hidden;
	background-image: url('/image/print.gif'); 
}

#details {
	position:absolute;
	left:838px;
	top:686px;
	width:62px;
	height:16px;
        overflow : hidden;
	background-image: url('/image/details.gif');
}

ContagiousIdeal · Dec 26, 2008

horrorshow75 said:
According to my web developer firefox addon your CSS is still incorrect.
I am assuming these are your menu divs.
Should be images

Sorry I was looking at it on my local domain it's been updated now.

ContagiousIdeal · Dec 26, 2008

By the way thanks so much for taking a look at it for me!

horrorshow75 · Dec 27, 2008

No problem! Hopefully we can get this straightened out.

Try removing the initial forward slash. If your html and your images folder are in the same level I believe you don't need the beginning forward slash.

ContagiousIdeal · Dec 27, 2008

horrorshow75 said:
No problem! Hopefully we can get this straightened out.

Try removing the initial forward slash. If your html and your images folder are in the same level I believe you don't need the beginning forward slash.

HOLY FRICK! That did it!

Thanks now I can finish up and go live.

horrorshow75 · Dec 27, 2008

Awesome.

Just a quick suggestion. If your live print link is going to go to printroom you should make it open in a new window. That way users aren't navigated away from your site entirely.

I dig the lightbox pages, very cool. Not sure how handicapped accessible they are but they look cool.

Good luck with your site!

ContagiousIdeal · Dec 27, 2008

horrorshow75 said:
Awesome.

Just a quick suggestion. If your live print link is going to go to printroom you should make it open in a new window. That way users aren't navigated away from your site entirely.

I dig the lightbox pages, very cool. Not sure how handicapped accessible they are but they look cool.

Good luck with your site!

I'm thinking of designing another outside frame specifically to contain printroom, but I'm not sure yet, i just dropped in the main website it will go to my user-page for printing wedding albums when I get the printroom client side stuff the way I want.

Your right on the handicap access but eh, I like it looking like flash and flash isn't handicap accessible either. Mabey I should design a micro-site for the handicapped...

Tearing my hair out for two days!

ContagiousIdeal

New Member

horrorshow75

New Member

ContagiousIdeal

New Member

horrorshow75

New Member

ContagiousIdeal

New Member

ContagiousIdeal

New Member

horrorshow75

New Member

ContagiousIdeal

New Member

horrorshow75

New Member

ContagiousIdeal

New Member