[darthclimo]

I have a fair to good knowledge of HTML and CSS, enough to put sites together, but I'm having trouble with a certain effect regarding my online portfolio, a work in progress. I have an image with five buttons below it labeled one to five. When I hover the mouse over each button I would like the image to change (five different images), but for the life of me I can't work it out so I'm assuming this is something that can be done in JavaScript, a language I have just started learning.

I wonder if any of you could provide the code I am seeking or at the very least point me in the right direction. I must warn you, I am a true noob with regards to JavaScript so please go easy on me. Any help would be very beneficial and well received. I hope I have explained myself adequately enough; if not, please let me know.

Thank you.

This post has been edited by darthclimo: 12 January 2009 - 10:17 PM

[Catalyst]

Do you want to do this with raw javascript or with a javascript library like jQuery?

[darthclimo]

Catalyst, on Jan 13 2009, 02:25 PM, said:

Do you want to do this with raw javascript or with a javascript library like jQuery?

Raw Javascript would be fine, mate, thanks for responding.

[jameson]

You can just use pure CSS to do that: http://meyerweb.com/...pups/demo2.html

[Catalyst]

Just CSS won't work in this case because several items need to modify the same image.

[jameson]

That Eric Meyers thing should work.. it looks like exactly what he's describing, if I'm understanding it right, of course.

I used that same CSS on my old portfolio site and it worked really well.

[darthclimo]

jameson, on Jan 19 2009, 01:56 PM, said:

You can just use pure CSS to do that: http://meyerweb.com/...pups/demo2.html

This is exactly what I am looking for. I shall give it a whirl either tonight or tomorrow so I can get this post closed down. Thanks man, it's appreciated.

[Catalyst]

Serves me right for not looking at the link fully

[darthclimo]

Okay so I still have not quite got the answer I am looking for but I did find this link to the perfect example of what I am trying to achieve in my portfolio:

http://www.google.co...tude/intro.html

On the left hand side of the page is a large-ish box with four smaller boxes below it. When you hover over each of the small boxes, the image in the main box changes. This is exacly the effect I am aiming to emulate. This may not even be done using JavaScript, which is fine by me so long as I can finally work out how to do this.

I look forward to your responses and thank you in anticipation.

[jameson]

Yep - Google does use JavaScript for that effect. The CSS solution I gave you would come close to that, except that the images wouldn't stay there once you move the mouse away. Is that the difference you're talking about?

[darthclimo]

jameson, on Feb 4 2009, 11:50 AM, said:

Yep - Google does use JavaScript for that effect. The CSS solution I gave you would come close to that, except that the images wouldn't stay there once you move the mouse away. Is that the difference you're talking about?

Yes it is good sir, I definitely would need the images to stay there once the mouse is moved away. I think you understand perfectly what I am looking for now and hopefully you can put an end to this crusade once and for all.

Many thanks.

[jameson]

Something like this should do the trick - http://www.dynamicdr.../thumbnail2.htm

[darthclimo]

Wow, it seems like an awful lot of code to do something so seemingly simple! Regardless, this is exactly what I am looking for so all that is left for me to do is to thank you for your willingness to help. So thank you.