Severe problems

[Ninjakreborn]

[b]SOLVED-Thanks for all the help.[/b]


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.

[img src=\"http://www.freelancebusinessman.com/images/IndexPageAllLayersShowing.jpg\" border=\"0\" alt=\"IPB Image\" /]

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.

[AndyB]

Google is your friend. There must be a zillion sources for rollovers changing TWO images.

[a href=\"http://www.webdevelopersnotes.com/tips/html/changing_two_images_on_mouse_over_using_javascript.php3\" target=\"_blank\"]http://www.webdevelopersnotes.com/tips/htm...javascript.php3[/a]

[Ninjakreborn]

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 wants
1. 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.

[obsidian]

[!--quoteo(post=380964:date=Jun 7 2006, 08:18 AM:name=businessman332211)--][div class=\'quotetop\']QUOTE(businessman332211 @ Jun 7 2006, 08:18 AM) [snapback]380964[/snapback][/div][div class=\'quotemain\'][!--quotec--]
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 wants
1. 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.
[/quote]

one approach... set up a div under each main drawer with a unique id to that section. when the mouse rolls over and you do your image flip, use ".innerHTML" to [b]add[/b] the image to the div you already created.

[Ninjakreborn]

Hmm I will give that a try, but will the noscript tags, put the image there when someone doesn't have javascript activated, I hope so I will go ahead and start trying to put this together.

[Ninjakreborn]

I also wanted to ask something else, when I do my innerhtml area to set up the new picture, I normally do my functions in another page, so when I set up my noscript tags, do I just put them in the place I want to add the picture for people without javascript, I need that to be there in case if someone doesn't have javascript, I want to do my inner html functions in the external file, just set a div or something, I just need any guidance any one wants to offer, while I do this, thanks,

[AndyB]

Oddly enough, my approach will work. All you need to use for the case where the second image does not show is to use a 'blank' image of the size needed to fill the space. Otherwise content will be leaping around.

[Ninjakreborn]

But then won't it show a big x, I will look into this, the question I do have is will the noscript tag work properly, l wanted to have that pic there automatically for people without javascript.

[AndyB]

[!--quoteo(post=381001:date=Jun 7 2006, 10:28 AM:name=businessman332211)--][div class=\'quotetop\']QUOTE(businessman332211 @ Jun 7 2006, 10:28 AM) [snapback]381001[/snapback][/div][div class=\'quotemain\'][!--quotec--]
But then won't it show a big x, I will look into this, the question I do have is will the noscript tag work properly, l wanted to have that pic there automatically for people without javascript.
[/quote]
It will show "a big x" if the image doesn't exist. I said use a blank image, i.e. a white rectangle whatever size it needs to be to exactly match the image that get swapped out into the same space on mouseOver

[Ninjakreborn]

Ok, I have an idea for that now, the one thing I am wondering most.
I tried a test, I put in
<script type="text/javascript">
</script>
<noscript><img src="mypic.gif" alt="My Pic" /></noscript>
I am testing it on my computer, it's not live yet, but when I open my browser to preview it, I HAVE JAVASCRIPT DISABLED, it comes up at the top asking about active content or whatever, with javascript off, that image does not show up, I have to figure out how to get that image to stay there when javascript is disabled, or a browser doesn't support javascript, right now as we speak, I am working on all the functions for the drawer switching, I followed the first advice, because I liked the way it sounded, and I need to learn innerhtml anyway, because I will be starting ajax before too long, I created my divs, named them, and I am working on all of that, it's pretty simple. The problem I am currently having now is When I set up the noscript tags as I showed it doesn't work, how do I get the picture to be there, if they have it disabled, any help would be greatly appreciated, thanks for all the help so far, the reason I can't use a blank image, is because i have a background image, now just a color. I think, I don't understand that well enough yet. I am learning very quickly though.

[Ninjakreborn]

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.
[code]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;
}
};[/code]

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

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

and here is the full xhtml page.


[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" />
<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>[/code]

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

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]Line: 17
Char: 1
Error:Object Expected[/quote]
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


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

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.

[Ninjakreborn]

Ok I got all 3 drawers working perfectly, now what I need to do is figure out how to set up this with the other panel, I need the picture to appear below it, and still have the picture there when javascript is off, I am going to give it a try and see if I can come up with something any advice would be greatly appreciated thanks.

[nogray]

You can always have the the style property to display:none; on the images that you want to show and hide.
[code]
<img src="image source" border="0" alt="text here" style="display:none;" id="Img_ID" />
[/code]
the id is importent.

add a function in your javascript
[code]
function show_image(img_id){
     document.getElementById(img_id).style.display = "block";
}
function hide_image(img_id){
     document.getElementById(img_id).style.display = "none";
}
[/code]

Then you can show any image by calling the show_image function with the correct id. For example using a onMouseOver event
[code]
<img src="some image" onMouseOver="show_image('Img_ID');" />
[/code]
This will show the image with the id "Img_ID". All images have to have uniqe ids.

for the noscript, it'll work. IE will not turn off javascript on your computer (I haven't found a way to do so), test your page on Firefox if you want to see the <noscript> works on your computer.

[Ninjakreborn]

I did it, but now it doesn't do ANYTHING in netscape, and opera, nothing at all here is the code, EVERYTHING works perfect in ie, and I have some problems with 2 other browsers, but all I have to do is center it.

How do I center something in javascript, I have it working in the browsers it's just going to the left when I do it, instead of in the center, how do I get it to center, it does automatically in ie, thanks.,