Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Mouse over changing images (Joomla)


  • Please log in to reply

#1
tiroshii

tiroshii

    Member

  • Member
  • PipPipPip
  • 423 posts
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:

Posted Image

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

  • 0

Advertisements


#2
Mythio

Mythio

    Member

  • Member
  • PipPipPip
  • 130 posts
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
  • 0

#3
tiroshii

tiroshii

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 423 posts
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...
  • 0

#4
Mythio

Mythio

    Member

  • Member
  • PipPipPip
  • 130 posts
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
  • 0

#5
tiroshii

tiroshii

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 423 posts
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.

  • 0

#6
Mythio

Mythio

    Member

  • Member
  • PipPipPip
  • 130 posts
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
  • 0

#7
tiroshii

tiroshii

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 423 posts
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.

  • 0

#8
Mythio

Mythio

    Member

  • Member
  • PipPipPip
  • 130 posts
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
  • 0

#9
tiroshii

tiroshii

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 423 posts
Ahh yes this makes sense.

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

#10
Mythio

Mythio

    Member

  • Member
  • PipPipPip
  • 130 posts
Hi tiroshii,

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

Mythio
  • 0

#11
tiroshii

tiroshii

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 423 posts
I'm literally waiting fora phone call today, so hopefully will be done by the next time I'm in the office
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP