[tiroshii]

Basically I'd like to create something like this.

I have a large image in a selection of colours/materials along with a thumbnail view for each. I would like the large image to change when the mouse is hovered over each thumbnail. I have no experience in flash so would prefer alternative methods.

To look something like:

Edited by tiroshii, 09 December 2010 - 04:09 AM.

[Advertisements]

Hi tiroshii,

You can google on "mouseover changes image + javascript". This should give you plenty of examples involving the use of javascript.
It is probably the easiest way, I'm not sure if CSS is able to do this. CSS works for changing one picture on mouseover into another, but you're talking about multiple pictures so...you can try your luck with google on CSS to though.

Hope to help,

Mythio

[Mythio]

Hi tiroshii,

You can google on "mouseover changes image + javascript". This should give you plenty of examples involving the use of javascript.
It is probably the easiest way, I'm not sure if CSS is able to do this. CSS works for changing one picture on mouseover into another, but you're talking about multiple pictures so...you can try your luck with google on CSS to though.

Hope to help,

Mythio

[tiroshii]

I did try the following websites:

http://www.htmlite.com/faq011.php
http://bonrouge.com/...age=disjointed2
http://bonrouge.com/...e=imageswitch#n

Which seem to have good code, I was just struggling implementing it. - It simply displayed one or two still images that did nothing...

[Mythio]

Hi tiroshii,

The first link seems to provide a solution for your problem, I have not tried it out myself though.

<a href="" onMouseOver="document.MyImage.src='image2.gif';" onMouseOut="document.MyImage.src='image1.gif';">

This is linked text

</a>

Use the above part for your thumbnails, basically small images that are links. Use the below part for the main image.

<img src="image1.gif" name="MyImage">

Is there a specific problem you are having? or perhaps you can supply part of the code so we can look at it?

Hope to help,

Mythio

[tiroshii]

Tried that one and ended up with this.

Used the exact code posted and substituted the image names

Edited by tiroshii, 09 December 2010 - 07:34 AM.

[Mythio]

Hi tiroshii,

You didn't use the exact code as I posted it, you only used the second part in the code.

This should be in your document:

<a href="" onMouseOver="document.MyImage.src='http://www.phoodie.info/wp-content/uploads/2009/01/number2.jpg';" onMouseOut="document.MyImage.src='http://www.phoodie.info/wp-content/uploads/2009/01/number1.jpg';">This is linked text</a>   

<img src="http://www.phoodie.info/wp-content/uploads/2009/01/number1.jpg" border="0" name="MyImage" />

You just put "This is linked text" without putting the <a href (etc)></a> around it, of course it doesn't work without those, as the text is not a link.

Hope to help,

Mythio

[tiroshii]

Joomla automatically removed that code when posted, I believe.

Not sure how do stop it doing it

Edited by tiroshii, 10 December 2010 - 03:31 AM.

[Mythio]

Hi tiroshii,

What joomla editor and version are you using?
I've heard stories of joomla "cleaning up code" with certain editors and versions.

Hope to help,

Mythio

[tiroshii]

Ahh yes this makes sense.

We are due an update very soon but are currently on Joomla v. 1.5.9 and using JCE

[Mythio]

Hi tiroshii,

Is it possible to wait for that update and see if the problem persists?
Or is very soon not soon enough?

Mythio

[tiroshii]

I'm literally waiting fora phone call today, so hopefully will be done by the next time I'm in the office