Creat a changeable picture with MouseOver & MouseOut event

Question

0.00/5 (No votes)

See more:

look at this url --> http://www.103.fm/[^]

When you move with the mouse on each of the 15 of the shows picture
the main picture change it's image tothe selected show pic

Let's say that each picture is a table 1-15
and the main picture is named Maintable

i want that when i move with the mouse on one of the tables (1-15)
then the Maintable will change it's picture to the selected image.

please help
hope you understand my self.

Posted 19-Aug-11 9:37am

Eddie1987

Updated 19-Aug-11 9:57am

TheyCallMeMrJames

v2

Add a Solution

Comments

[no name] 19-Aug-11 15:41pm

What have you tied? It's pretty basic JavaScript.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TheyCallMeMrJames · Accepted Answer · 2011-08-19T09:56:00

Solution 1

They are using Flash, but you could come real close to this in JavaScript using jQuery.

1) Hide the img element (put it in a DIV with a white background)
2) Set the source

$("#yourImageID").attr("src", "your/path/your_image.png");

3) fadeIn() the img element

If you want better performance, search for image caching techniques because those images might take a minute to load. You would then swap in the cached images instead of loading them from the server as above.

That should get you started. Feel free to post new questions when you have specifics/issues related to implementation.

Cheers.

Posted 19-Aug-11 9:56am

TheyCallMeMrJames

Updated 19-Aug-11 9:57am

v2

Comments

Eddie1987 19-Aug-11 17:17pm

It's hard to understand your solution so let me to make it easy

When i move with the mouse on the text(NBA) then i want to change the image to another one and when i leave the text to return the default image

please help.

<table>
<tr>
<td>NBA</td>
</tr>
</table>

<table>
<tr>
<td><img src="NBA.jpg" alt="NBA"/></td>
</tr>
</table>

TheyCallMeMrJames 19-Aug-11 17:25pm

First of all, you'll need to put id attributes in your elements. <td id="nba"> for example. Then you can use jQuery to get a handle on that element ($("#nba").hover() would work). You can then do whatever you want - write animations, swap graphics - in the hover method. There is an 'in' part and an 'out ' part. The docs are here:

http://api.jquery.com/hover/