severe problem

[businessman332211@hotmail.com]

SOLVED- Thanks for all the help I really appreciate it.I could really use some help with this, I know how to do image rollovers, I can make one image switch out for another, fine and easy. But what I don't understand is how to get this to work.Ok In the standard picture, all of those 3 cabinets are back further, this is a cut of them closer, also in the originally draft, the pictures towards the bottom aren't there.What is suppose to happen, is I rollover the normal cabinet picture on the left, it pops out, and the image below the text appears as well. I need to do this for each section, I have done javascript on and off for 4 years, but I steered clear of 2 things, javascript rollovers, and pre-caching images, because I didn't understand, but it's about time I learn, standard tutorials and stuff taught me how to just change one drawer out for another, no big deal, but how do I get the whole thing, I need the bottom picture to appear no matter what, even if the person doesn't have javascript I need that picture to appear, if they have javascript, i need it to be invisible until someone mouses over the link, I just need someone to point me in the right direction it would be greatly appreciated.

Edited June 7, 2006 by businessman332211@hotmail.com

[businessman332211@hotmail.com]

No, what I am having trouble doing is this. I know all about rollovers fine, but he wants that picture below the text to come up on mouse over, BUT there is no picture there already. This is what he wants1. On mouse over he wants that drawer to change like it pops out.2. and the picture below the text to appear when it normally would not have been there.3. He wants it set up to where if someone doesn't have javascript atleast taht picture appears there anyway, I think I can do that with <noscript><img src="whatever.jpg"></noscript>I think that will handle that but I am not sure any help would be greatly appreciated.

[businessman332211@hotmail.com]

Ok I know how to set it up, so I am setting up to switch out the cabinets, I was given advice to work in the other image, into a blank div tag onmouse over using innerhtml, I will learn this and do this, no problem, but I ran into a few difficulties.1. I tried the following as a test and it doesn't work, I need that picture to show there if the person doesn't have javascript.First I ahve all my functions in an external file, what I wanted to do here, was set this up, first I have the div(which is where the image will appear if it mouses over), but I was trying to set up a noscript tag, to have it there automatically but it didn't work for instance.

<script type="text/javascript"></script><noscript><img src="example.gif" alt="example" /></noscript>

However this didn't work, I am testing it on the local host, but it still has the same functionality with javascript as a live server, I disabled javascript, and it didn't work out, it didn't show up, I need to learn how to fix this, any advice will be greatly appreciated, thanks for the help.

[businessman332211@hotmail.com]

ok also I set this up but got errors, I am trying to debug them but I am confused as to why this is happening, is there a better way to do this, or am I doing this wrong, I have never done rollovers before, so this is a good learning experience. Ok first I created my external file.

if (document.images) {  var pic1 = new Image(164,111);     pic1.src = '/indexPgImagesEtc/DrawerInLeft.jpg';  var pic1on = new Image(164,111);  pic1on.src = '/indexPgImagesEtc/DrawerOutLeft.jpg';  var pic2 = new Image(164,111);  pic2.src = '/indexPgImagesEtc/DrawerInMid.jpg';  var pic2on = new Image(164,111);  pic2on.src = '/indexPgImagesEtc/DrawerOutMid.jpg';  var pic3 = new Image(164,111);  pic3.src = '/indexPgImagesEtc/DrawerInRight.jpg';  var pic3on = new Image(164,111);  pic3on.src = '/indexPgImagesEtc/DrawerOutRight.jpg';function lefttoporiginal () {	if (document.images) {  document.leftoriginal.src = pic1.src; return true;}};function lefttopon () {	if (document.images) {  document.lefton.src = pic1on.src; return true;}};

The first if statement aside from functions preloads all the images I am currently working with. Those 2 functions set the images to do what they are supposed to do.Here is what I used to connect the js file to the html file

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

and here is the full xhtml page.

<!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" /><link rel="stylesheet" type="text/css" href="huttonio.css" /><script type="text/javascript" src="huttoniojava.js"></script><title>Huttonio Brooks: Furniture, Photographic Works, Sculpture and Fine Art Works, etc</title></head><body><div id="BackTransparentFoundation"><div id="header"><div id="LogoLayer"><img src="indexPgImagesEtc/HuttBrooksLogo.jpg" alt="Huttonio Brooks" /></div></div><div id="left"><a href="furniture.html" onmouseover="lefttopon()" onmouseout="lefttoporiginal()"><img name="leftoriginal" src="indexPgImagesEtc/DrawerInLeft.jpg" alt="Drawer In" /></a><br /><p class="lefttext1">"Some Really Cool Stuff"</p><br /><p class="lefttext2">---Amir Efrati, Writer for</p><p class="lefttext3">THE WALL STREET JOURNAL</p></div><div id="middle"><a href="PhotographicWorks.html"><img src="indexPgImagesEtc/DrawerInMid.jpg" alt="Drawer In" /></a><br /><br /><br /><br /><br /><p class="midtext1">"Gold Award, Photography"</p><br /><p class="midtext2">---Art Stars of California:</p><p class="midtext3">Discovery Awards" 1994</p><br /></div><div id="right"><a href="Sculpture&FineArtsEtc.html"><img src="indexPgImagesEtc/DrawerInRight.jpg" alt="Drawer In" /></a><p class="righttext1">"One of the neat things is<br />Discovering something new,'<br />said Peterson, who, along<br />with Bruce Katsiff, the<br />[Michener Art] Museum's<br />director, discovered<br />Brooks... 'We felt his work<br />had an evocative quality...<br />a poetic, dream-like quality"</p><p class="righttext2">---The Intelligencer Record,</p><p class="righttext3">Bucks County, PA</p></div></div></body></html>

Now what I am trying to do is get it to work properly, but I need that default image to be the off state incase if the person doesn't have javascript, I think this is the proper way, after pouring through multiple tutorials, and with the js bible at my hands, I took this on, myself, and that was what I created, I decided preloading the images first makes it easier to work with them in the functions for 1, and for another it makes it to where they are preloaded so it doesn't require load time on mouse over. Now any advice on why this isn't working would be appreciated.Oh and the error message I am getting is

Line: 17Char: 1Error:Object Expected

It points to an error on the HTML page itself not the external js file, it's also telling me the exactly location of the error is

<a href="furniture.html" onmouseover="lefttopon()" onmouseout="lefttoporiginal()"><img name="leftoriginal" src="indexPgImagesEtc/DrawerInLeft.jpg" alt="Drawer In" /></a><br />

The error code points to the < in that tag, that is the character, but it's probably telling me something is wrong in my external file, any advice would be appreciated, this is coming along, I am trying to take it slow so I can absorb all of this and memorize it and learn it for future projects, but I am still busting a severe time limit at the same time, and it's becoming difficult for me to have fun because of my other projects, any help to clear up some of my confusion or a better way to do this, or anything would be greatly, greatly appreciated, thanks for all the help I appreciate it.

[businessman332211@hotmail.com]

I fixed all the problems and all the drawers are working perfectly, I need now to get the bottom 3 pictures, to appear onmouseover, but I also need them to be there, when the time comes incase if someone doesn't have javascript.

[scott100]

I fixed all the problems and all the drawers are working perfectly, I need now to get the bottom 3 pictures, to appear onmouseover, but I also need them to be there, when the time comes incase if someone doesn't have javascript.

<{POST_SNAPBACK}>

Dude, if you continue talking to yourself you'll get locked up So why don't you code the image onto you page as normal this way if they dont have javascript enabled they will see it.Then put a function onload that hides the image when the page is loaded, then your onmouseover shows the images again.

[businessman332211@hotmail.com]

perfect, that was what I was looking for, now I have something to work with, and sorry about talking to myself, I guess I was just trying to work this out on my own, and ended up talking to myself, how would I tell the onload to clear it, do I put like I don't know, to make it disappear. Pointing me a little in that direction and I will be able to code the rest of this pretty easily.

[scott100]

Try something like this, changing mypic to the id of the pic you want to hide.<body onload="document.getElementById('mypic').style.display='none';">then when you want it to show again use display="block";

[businessman332211@hotmail.com]

Works perfectly, I set all that up, but now in ie it's fine but in the other browsers, it's not centered inside the div when I mouse over it's not centered. So basically how do I center something using javascript.

[businessman332211@hotmail.com]

How do I get it to center, it works in ie, I got the thing working in all browsers, but when I mouse over it's not centered here is my html, then below is my javascript, then my css, I tried document.getElementById('idhere').style.textAlign='center';but that is now working, no matter how or where I put it.

<!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" /><link rel="stylesheet" type="text/css" href="huttonio.css" /><script type="text/javascript" src="huttoniojava.js"></script><title>Huttonio Brooks: Furniture, Photographic Works, Sculpture and Fine Art Works, etc</title></head><body onload="removepics();"><div id="BackTransparentFoundation"><div id="header"><div id="LogoLayer"><img src="indexPgImagesEtc/HuttBrooksLogo.jpg" alt="Huttonio Brooks" /></div></div><div id="left"><a href="furniture.html" onmouseover="lefttopon();leftpicmouseon(); return true;" onmouseout="lefttoporiginal();leftpicmouseoff(); return true;"><img name="leftoriginal" src="indexPgImagesEtc/DrawerInLeft.jpg" alt="Drawer In" /></a><br /><p class="lefttext1">"Some Really Cool Stuff"</p><br /><p class="lefttext2">---Amir Efrati, Writer for</p><p class="lefttext3">THE WALL STREET JOURNAL</p><img name="leftpic" id="leftpic" src="indexPgImagesEtc/ThumbLeftBuckEaselSide5b.jpg" alt="Left Picture" /></div><div id="middle"><a href="PhotographicWorks.html" onmouseover="midtopon();midpicmouseon(); return true;" onmouseout="midtoporiginal();midpicmouseoff(); return true;"><img name="midoriginal" src="indexPgImagesEtc/DrawerInMid.jpg" alt="Drawer In" /></a><br /><br /><br /><br /><br /><p class="midtext1">"Gold Award, Photography"</p><br /><p class="midtext2">---Art Stars of California:</p><p class="midtext3">Discovery Awards" 1994</p><br /><img name="midpic" id="midpic" src="indexPgImagesEtc/ThumbMidBriones4up.jpg" alt="Middle Picture" /></div><div id="right"><a href="Sculpture&FineArtsEtc.html" onmouseover="righttopon();rightpicmouseon(); return true;" onmouseout="righttoporiginal();rightpicmouseoff(); return true;"><img name="rightoriginal" src="indexPgImagesEtc/DrawerInRight.jpg" alt="Drawer In" /></a><p class="righttext1">"One of the neat things is<br />Discovering something new,'<br />said Peterson, who, along<br />with Bruce Katsiff, the<br />[Michener Art] Museum's<br />director, discovered<br />Brooks... 'We felt his work<br />had an evocative quality...<br />a poetic, dream-like quality"</p><p class="righttext2">---The Intelligencer Record,</p><p class="righttext3">Bucks County, PA</p><img name="rightpic" id="rightpic" src="indexPgImagesEtc/ThumbRightLearningToListenpostcardSm.jpg" alt="Right Picture" /></div></div></body></html>

if (document.images) { //this precache's images, allowing them to be ready when the time   	 //comes for you to want to call the functions  var pic1 = new Image(164,111); //sets a new image with width and height     pic1.src = 'indexPgImagesEtc/DrawerInLeft.jpg'; //sets the source of the image  var pic1on = new Image(164,111); //sets image  pic1on.src = 'indexPgImagesEtc/DrawerOutLeft.jpg'; //sets source  var pic2 = new Image(164,111); //sets image  pic2.src = 'indexPgImagesEtc/DrawerInMid.jpg'; //sets source  var pic2on = new Image(164,111); //sets image  pic2on.src = 'indexPgImagesEtc/DrawerOutMid.jpg';  //sets source  var pic3 = new Image(164,111);  //sets image  pic3.src = 'indexPgImagesEtc/DrawerInRight.jpg';  //sets source  var pic3on = new Image(164,111);  //sets image  pic3on.src = 'indexPgImagesEtc/DrawerOutRight.jpg';  //sets source};//The source is the location of the image, the sets image is setting a completely new area//in memory for javascript to be able to save space for that photo, preloading it before the//browser window even opens.function lefttoporiginal () {  //This is the original state of the left drawer	if (document.images) {  document.leftoriginal.src = pic1.src;	}};function lefttopon () {  //This is the mouse over state, this is what it changes too	if (document.images) {  document.leftoriginal.src = pic1on.src;	}};function midtoporiginal () { //This is the original state of the middle drawer	if (document.images) {  document.midoriginal.src = pic2.src;	}};function midtopon () { //This is the mouse over state, this is what it changes too	if (document.images) {  document.midoriginal.src = pic2on.src;	}};function righttoporiginal () {  //This is the original state of the right drawer	if (document.images) {  document.rightoriginal.src = pic3.src;	}};function righttopon () { //This is the mouse over state, this is what it changes too	if (document.images) {  document.rightoriginal.src = pic3on.src;	}};function removepics () {  //This is a special function, what this is going to do here// Is completely remove all the pictures when the page loads.  It uses a javascript// onload function.  This function can be found in the body section of the html page// within the body tag like body onload="" with my function name// This is good for people without javascript if they do not have javascript enabled or // something the picture is already loaded into the page, so it just ignored this and the //pictures will be there upon page load, if they have javascript, this eliminates// the pictures allowing for the appropriate functions to put those pictures into place// with mouse over events.	document.getElementById('leftpic').style.display='none';	document.getElementById('midpic').style.display='none';	document.getElementById('rightpic').style.display='none';};function leftpicmouseon () { //This makes hte left picture appear, with on mouse over	document.getElementById('leftpic').style.display='block';};function leftpicmouseoff () { // This makes it disappear when the mouse is removed	document.getElementById('leftpic').style.display='none';};function midpicmouseon () { // This makes hte middle picture appear on mouse over	document.getElementById('midpic').style.display='block';};function midpicmouseoff () { // This makes the middle pic disappear when the mouse is removed	document.getElementById('midpic').style.display='none';};function rightpicmouseon () { //This makes the right pic appear on mouse over	document.getElementById('rightpic').style.display='block';};function rightpicmouseoff () { //This makes the pic disappear when mouse is removed	document.getElementById('rightpic').style.display='none';};

body /*This sets the body set, and removes margins */{ background-color:#000000; margin:0; padding:0; }img /* Removes borders from images */{border:none;}/*The following 3 style the text for the left hand side, I styled each one individually to give them the desired look as in the picture */.lefttext1{color:#FFFFFF;}.lefttext2{color:#FFFFFF;margin-bottom:0px;padding-bottom:0px;}.lefttext3{color:#FFFFFF;margin-top:0px;padding-top:0px;text-decoration:underline;}/* End of the left text *//* Begin middle text, same setup as with the left text */.midtext1{color:#FFFFFF;}.midtext2{color:#FFFFFF;margin-bottom:0px;}.midtext3{color:#FFFFFF;margin-top:0px;}/* end middle text *//* Begin right text */.righttext1{color:#000000;font-weight:bold;}.righttext2{color:#000000;margin-bottom:0px;font-weight:bold;text-decoration:underline;}.righttext3{color:#000000;margin-top:0px;font-weight:bold;}/* End right text */#header{ background-color:#000000; background-image:url(indexPgImagesEtc/ShelfMoldingA.jpg); background-repeat:no-repeat; background-position:18px bottom; width: 804px; height: 120px; clear: both; }#left{height:auto;background-color:#000000;margin-top:0px;margin-left:0px;height:900px;background-image:url(indexPgImagesEtc/BkgrndDrawingLeft1.gif);float:left;width:268px;text-align:center;}#middle{height:auto;margin-top:0px;height:inherit;float:left;width:268px;height:900px;background-image:url(indexPgImagesEtc/BkgrndDrawingMid1.gif);background-color:#7B7B7B;text-align:center;}#right{height:auto;margin-top:0px;background-image:url(indexPgImagesEtc/BkgrndDrawingRight1.gif);float:left;height:900px;width:268px;background-color:#FFFFFF;text-align:center;}#BackTransparentFoundation  {visibility:visible; position:absolute; top:0; left:0; width:804px; height:900px }#LogoLayer   { visibility:visible; position:absolute; top:49px; left:204px; width:384px; height:34px }/*This is all for the rollovers below here, on the index page.  The first few set the basic pictures, the other's style the rollover pictures. */

Any help would be greatly appreciated.

[scott100]

How do I get it to center, it works in ie, I got the thing working in all browsers, but when I mouse over it's not centered here is my html, then below is my javascript, then my css, I tried document.getElementById('idhere').style.textAlign='center';but that is now working, no matter how or where I put it.

You shouldn't need to center it using javascript, you should use css to center it.Javascript should only be used to show/hide the image.Before you go hiding the image make sure it is centered in all broswers, putting css text-aling:center on the parent div should do it.

[businessman332211@hotmail.com]

That's the thing, I have 1 function removing all the pics, as I showed up there I have the on mouse over and off commands taking care of all the details after that, ok here is what happenedwhen onload is taken off there, all the stuff is centered, in all browser,when I cut it back on, well it works, it hides them all but when I mouse over, boom they all appear and hit the left hand of each div. even when I take the onload off, and leave just the mouseovers, as soon as I mouse over, it goes from being centered, to the left hand side, I don't understand why this is happening my entire code was pasted above, but I don't see what's causing this problem

[snowboard01]

please use the codebox tag to make those codes scrollable

[businessman332211@hotmail.com]

I hate that, I don't like it when other people do it, I thought i was more readable as is, but from now on, I will go ahead and set codebox, on longer code instead.

[scott100]

I don't know why you are having such problems, i cannot use you code to see as the link to the pictures will not work, do you have the site online?Here is a quick piece of code i rustled up just to be sure, when you mouse over/out the image always remains centered in the div, no matter if you hide either the div or the pic.

<input type="button" value="hide pic" onmouseover="mypic.style.visibility='hidden'" onmouseout="mypic.style.visibility='visible'" /><input type="button" value="hide div" onmouseover="mydiv.style.display='none'" onmouseout="mydiv.style.display='block'" /><div id="mydiv" style="width:100%;border:1px solid black;text-align:center"><img id="mypic" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" /></div>

Sometimes i also find it helps to add a border just to help see whats going on, maybe it will give you some clues...

[businessman332211@hotmail.com]

YOU fixed it, I don't know how. I have to ask this question for learning purposesI changed the whole setup to these

function removepics () {  //This is a special function, what this is going to do here// Is completely remove all the pictures when the page loads.  It uses a javascript// onload function.  This function can be found in the body section of the html page// within the body tag like body onload="" with my function name// This is good for people without javascript if they do not have javascript enabled or // something the picture is already loaded into the page, so it just ignored this and the //pictures will be there upon page load, if they have javascript, this eliminates// the pictures allowing for the appropriate functions to put those pictures into place// with mouse over events.	document.getElementById('leftpic').style.visibility='hidden';	document.getElementById('midpic').style.visibility='hidden';	document.getElementById('rightpic').style.visibility='hidden';};function leftpicmouseon () { //This makes hte left picture appear, with on mouse over	document.getElementById('leftpic').style.visibility='visible';};function leftpicmouseoff () { // This makes it disappear when the mouse is removed	document.getElementById('leftpic').style.visibility='hidden';};function midpicmouseon () { // This makes hte middle picture appear on mouse over	document.getElementById('midpic').style.visibility='visible';};function midpicmouseoff () { // This makes the middle pic disappear when the mouse is removed	document.getElementById('midpic').style.visibility='hidden';};function rightpicmouseon () { //This makes the right pic appear on mouse over	document.getElementById('rightpic').style.visibility='visible';};function rightpicmouseoff () { //This makes the pic disappear when mouse is removed	document.getElementById('rightpic').style.visibility='hidden';};

on all of them I was using insteaddocument.getElementById('examplepic').style.display='none';anddocument.getElementById('examplepic').style.display='block';when I changed to what you showed me it worked instantly, why did this work, but what I was trying before, didn't I need to understand this, because I will be doing more javascript later, so this understanding can help me better, that's all I did was change the style.and everything after that to what you told me and it worked perfectly, thank you so much for the help.

[scott100]

when I changed to what you showed me it worked instantly, why did this work, but what I was trying before, didn't I need to understand this, because I will be doing more javascript later, so this understanding can help me better, that's all I did was change the style.and everything after that to what you told me and it worked perfectly, thank you so much for the help.

<{POST_SNAPBACK}>

Wheyyyyyy When the display is set to none the element is wiped out of the document and no space is reserved for it, when a visibility is set to hidden the element is invisible but still takes up space in the document, so it must have kept centered unlike display which didn't, i'm not fully sure why though it should've been ok.Main thing is problem solved

[businessman332211@hotmail.com]

thanks for all the help.

[reportingsjr]

Why take the hard part? use the easy solution.. css:

<style type="text/css">.roll { display: block; }.roll:hover { display: none; }</style><div style="height:imagesize;float:left;overflow:hidden;"><img src="leftdrawerin.png" class="roll"><img src="leftdrawerout.png"></div><div style="height:imagesize;float:left;overflow:hidden;"><img src="middrawerin.png" class="roll"><img src="middrawerout.png"></div><div style="height:imagesize;float:left;overflow:hidden;"><img src="rightdrawerin.png" class="roll"><img src="rightdrawerout.png"></div>

There you go, will show up no matter what cause its purely CSS, so simple to use to! Why go through all of this javascript crap..

[scott100]

There you go, will show up no matter what cause its purely CSS, so simple to use to! Why go through all of this javascript crap..

Did you try your code? it flashes like a strobelight Not to mention hover on images is not supported by IE, yet.

[reportingsjr]

no I didnt *goes and test*well, now we have code to make images flash like strobelights!

[scott100]

well, now we have code to make images flash like strobelights!

Shame, well keep it in mind incase anyone ever needs you to make a page for a disco