hover over one image changes another image

By BassPlaya on 31 Dec 2007 at 04:42 UTC

I want to do exactly this. I'm looking to implement this in an eCommerce site.
I don't work with gallery or views to show my images but rather a simple node with the use of TinyMCE.
Please let us know how this can be achieved. Thanx a lot !

Comments

This may help

.carey commented 31 December 2007 at 10:07

There are a couple of different methods on this page:

http://www.edginet.org/techie/website/cssimg.html

(found via Google search)

not quite

BassPlaya commented 2 January 2008 at 17:24

Though I appreciate your effort in helping finding the solution to my problem it's not really what I meant.
I admit, I might have been a bit unclear.
You've all seen the sites where a product is displayed in large (macro view), next to it you will see some small thumbnails. When you hover over them the large image changes into the large image of the small thumbnail thus showing larger images in the macro image area without clicking thus maximizing efficiency for the user. So when you hover over them, it's not the image itself that changes, it's another image on another location that changes.
I hope this was clearer. I'm doing my best to explain. Apologies.

Authentically,
BassPlaya

You wouldn't happen to know

.carey commented 2 January 2008 at 18:36

You wouldn't happen to know a site that does this so I can see what you are talking about?

here's a link

BassPlaya commented 3 January 2008 at 13:44

I just did a search on Google so nothing fancy.. the link might be broken after a while apologies for this:
here it is if you hover over the colours you'll see that the image changes.. it's not the best example but it is what I need.

Authentically,
BassPlaya

something like this?

lurkltd commented 3 January 2008 at 21:22

http://yourstrulybrand.com/yourstruly/?q=node/34

I used cck to add a bunch of image fields. Then I used jquery and some css magic to make it work. Do you have any specific questions?

That is definitely IT !

BassPlaya commented 4 January 2008 at 10:21

both examples of lurkltd and FPJ are exactly what I need.
I'm already very glad to see that you guys could manage this, if you can do it I must be able to do this as well.

specific questions? Well, I examined your approach and..
Did you make one content type that harbours 4 image fields? Or did you add more image fields to that content type and when content created, it just displays the image fields that have content, is that right?
if this is correct than I can go to the next step: CSS
how do you give a certain image field a css selector?
The image field actually is a division, right? So you style the divisions where images will appear in, not the image itself, right?
Your thumbnails are actually the full version scaled down, right?
In the thumbnails div there is a div called lookbook-copy, what is this for?
and how do you add images in the lookbook-image-main? It seems that it is the background image of the divs 1 - 10. But how can you control this fairly easy without the need to alter the CSS file? It must be done with a php script in the image field, no? I don't know php code, would you be so kind to provide me this?
And how do you link the thumbnails with those main divisions? It seems it's the pound sign # so it doesn't lead anywhere?
Can you please provide more info on this.

Thanx a lot !!

Authentically,
BassPlaya

Did you make one content

lurkltd commented 4 January 2008 at 18:04

Did you make one content type that harbours 4 image fields? Or did you add more image fields to that content type and when content created, it just displays the image fields that have content, is that right?

I made a content type that has 9 or 10 image fields (don't remember). I used php to check to see if anything is in those images fields, and if there is they are displayed.

how do you give a certain image field a css selector?

I used a custom template for that node type

The image field actually is a division, right? So you style the divisions where images will appear in, not the image itself, right?

yes

Your thumbnails are actually the full version scaled down, right?

yes. I don't think image field automatically generates thumbnails.

In the thumbnails div there is a div called lookbook-copy, what is this for?

sorry. don't remember :(

and how do you add images in the lookbook-image-main? It seems that it is the background image of the divs 1 - 10. But how can you control this fairly easy without the need to alter the CSS file? It must be done with a php script in the image field, no? I don't know php code, would you be so kind to provide me this?

This is done with the custom node template