MouseOver Effect

Forum Moderators: open

Message Too Old, No Replies

MouseOver Effect

helleborine

10:23 pm on Mar 11, 2005 (gmt 0)

Hello,

I want to produce a mouseover effect. There's probably a script somewhere on the web I could find, IF ONLY I knew what to call it!

Here's the idea:

-TABLE-

thumbnail 1 FULL PICTURE DISPLAY OF the
thumbnail 2 THUMBAIL ON MOUSEOVER ELSEWHERE ON PAGE
thumbnail 3
thumbnail 4

Thank you ahead of time.

Bernard Marx

11:00 pm on Mar 11, 2005 (gmt 0)

I have a feeling this wouldn't be too hard, if I could work out what you wanted.
:)

helleborine

3:24 am on Mar 12, 2005 (gmt 0)

Thanks!

Simply put, I have 10 thumbnails on the lefthand column of a table.

There's a "screen" area in the righthand column of the table.

When the mouse is over thumbnail #1, I want the larger image #1 to be shown in the "screen", and so on for all the thumbnails.

orion_rus

8:45 am on Mar 12, 2005 (gmt 0)

ok
let you have
<table>
<tr><td>thubnail1</td><td rowspan='10'><img src='#' id='image'></td></tr>
<tr><td>thubnail2</td></tr>
...
<tr><td>thubnail10</td</tr>
</table>

in a head of HTML you add.
function showgrateimage(imgshow)
{document.getElementById('image').src=imgshow;}

each <td>thubnail1</td>
you change for
<td onmouseover=showgrateimage('stars.gif')>thubnail1</td>
stars.gif is a image what should be shown in a large screen
Good luck to you

helleborine

2:14 pm on Mar 12, 2005 (gmt 0)

This is what I have in <HEAD>

This is what I have in the table (simplified) so far:

Doesn't seem to work... not your fault, just that I'm dumb as a bucket of hammers!

helleborine

4:25 pm on Mar 14, 2005 (gmt 0)

Please, can someone very patient help me, a javascript newbie/complete-dummy?

I think I have good karma, I help tons of people with dumb questions all the time in my specialty (NOT Javascript, have no fear...)

Pretty please? What I tried didn't work...

orion_rus

6:02 pm on Mar 14, 2005 (gmt 0)

This example works great in my browsers Mozilla i think in a IE it works great too.
If you can't get it work. Try to cut DOCTYPE in header if it exists.
this is mine:


<head>
<script language="JavaScript">
function showlargeimage(imgshow)
{document.getElementById('image').src=imgshow;}
</script>
</head>
<body>
<TABLE>
<TR>
<TD>
<!--THUMBNAILS-->
<img src="thumbnail1.jpg" onmouseover=showlargeimage('image1.jpg')><br>
<img src="thumbnail2.jpg" onmouseover=showlargeimage('image2.jpg')><br>
<img src="thumbnail3.jpg" onmouseover=showlargeimage('image3.jpg')><br>
<img src="thumbnail4.jpg" onmouseover=showlargeimage('image4.jpg')><br>
</TD><TD>
<!--IMAGE SCREEN-->
<img src='#' id='image'>
</TD>
</TR>
</TABLE>
</body>

all is ok

helleborine

6:31 pm on Mar 14, 2005 (gmt 0)

It works now! THANK YOU!

helleborine

6:42 pm on Mar 14, 2005 (gmt 0)

Oh yes!

And how do I set a default display image?

Thanks again.

orion_rus

8:11 pm on Mar 14, 2005 (gmt 0)

You may hide it and show only after somebody mouseovers thumbnail

You need to change it like so

function showlargeimage(imgshow)
{document.getElementById('image').src=imgshow;
document.getElementById('image').style.display='block';
}

and img

Good luck to you