dubya

Perhaps someone can give me some insight and help me to regain my sanity. I am trying to update my work website which has been up since Feb. My boss wants me to add some dynamic content, which I haven't been able to figure out.

Let me preface these questions by letting you know that this is the 2nd website I have constructed and the 1st to actually be published to the web. I have limited knowledge of HTML and Javascript, and have been figuring it out as I go along. Here is the website url and the two issues I'm facing.

http://www.idesigninspiration.com

1) From the "Product Solutions" page, enter into the body of the portfolio by clicking on any product link. There are two orange arrows at the top right corner of the "slide negative" box where the product image appears. Currently, when you click on one of the two arrows, the entire page reloads to show the next picture. What I need is for only the image in the picture area to change when an arrow is clicked. I have found Javascript that allows me to do this, but the next part throws a kink into things.

Once you have clicked the right arrow and the image changes from "Image01" to display "Image02", when that same arrow is clicked, the link should take you to the next product in the portfolio, which would then reload the page.

The question I have is this: Will Javascript allow you to click a link and only change the image, then click that same link and go to a different page altogether?

2) I'm also looking for the following effect. Say I have the logo Cage Light in a circle in the center of the page. I want to have light follow the mouse where the light rotates about a central axis and the bottom of the bulb points in the direction that the mouse travels. The end result is that that whenever you click on a link, the light is facing that direction and can activate to shine on the link in the same way as the site intro page.

If anyone can provide any insight or advice to these problems I would greatly appreciate it. I'm trying to please the boss and keep from drowning during the process. Thanks in advance.

Dubya

The Coach

Sorry Dubya, I don't have the answers, but I do want to make a remark. It's the fact that this web site doesn't support 800x600 resolution. Not that I mind (I use higher), but please don't ignore the fact that 37% of your visitors will use a resolution that is 800x600 or lower;

http://www.w3schools.com/browsers/browsers_stats.asp

Ok, this wouldn't be too bad for a hobby site, but this company wants to make money right? Now let's say that I use 800x600 as a customer. I want to look at the products so I click on the appropriate links. Look at my attachment (click on it to see a larger version) and look at what the customer is seeing (bottom 800x600).
Not only does the page not fit in the window, also the arrows are outside the window. What do you think the reaction of the customer will be? See, the customers will not mind to scroll sideways once, but several times...
To put it all in perspective; 37% of the customers will be frustrated. In my opinion it's not wise for any(!) company to ignore a percentage like that. My point is, it's nice to try to make it all flashy, but functionality should have a higher priority, at least that's my opinion.

Just my $0,02 Dubya, spend them the way you want to spend them

Blinky2004

Just a quicky note Dubya, i'm just on my way to bed now. I'll address your javascript questions later on. This evening most likely. Just so you know, both of your problems have solutions.

Wanted to add something to Joe's notes... to make your site 8x6 compatible, make sure the maximum width of all the page content (which simply means the main table, or CSS code) is set to 760px. That should allow for Macs also. :B

dubya

Thanks for your input guys. Mark, I'm glad to hear that what I'm attempting can indeed be done. JoeD, thanks for the link to the stats and the info. We discussed this issue when we put the site up, and finally settled on the larger size. I'll let the boss know the info you provided which will probably result in some changes (yay! I have something to do next week. [righton] )

Later,
Dub

Blinky2004

Dubya...

Ok first off to address your second question...
You'd be hard pressed to make that effect happen without using Flash. It can be done, but at a file size cost. It would be somewhat clunky using the normal image replacement script method, because you'd have to be sure that you preLoad all the images. And if they're not loaded when the user hovers over a link, the whole show comes to a hault.

And for your first question...
Here... checkout this link: http://www.scriptsearch.com/cgi-bin/jump.cgi?ID=7069
It explains and provides the code needed to perform the effect you're after. I used to have tons of these types of scripts, but lost them all with my HDD crash awhile back. I've tested this one though and it's pretty good. The only browser that doesn't seem to render the effect is Opera (i used v7.5). Can't figure out why though. There's nothing THAT complex about the scripting.

In the code that the author provides, are blocks or instructional comments. Follow them and you shouldn't have any worries. Use a html editor to view the code.
Oh but one thing i'd suggest... use an iFrame to house the code he gives you. i.e. Insert an iFrame into your page where the effect will take place, them dump his code into a new html page. Point the iFrame to that html file. Everything else will take care of itself.

If you're not sure what the iFrame code should be, use this: Change the height/width though to match your images.

PS: Don't be afraid to sub out his html arrows for your images if you like. So long as you leave the scripting intact for those links, it'll work just fine to use images instead.

Any questions/problems feel free to ask. :B

dubya

Hats off to you for your help, Mark. Sorry my response has been so delayed. I've been busy with other work related stuff. I'll give this a look and see what I can do with it.

On the Flash thing -- I figured we might have to go that route, so I'll study up on it too.

Later,
Dub