Text/Image Rollover

@scottcackettJul 04.2007

I am creating a simple website for my local team and want a small picture (100×200 pixels) to appear when the visitor scrolls over the players name. Can this be accomplished through Javascript? If so how do I do this?

to post a comment

JavaScript

5 Comments(s) _↴

@spiresgateJul 04.2007 — #I have done this on my website at

http://myweb.tiscali.co.uk/spiresgate/StEdwardsWeb/teachers.htm

Have a look at the code and paste out what you need. I'll elaborate if you need me to.

@scottcackettauthorJul 04.2007 — #hi, the page won't appear for me :0S

could you paste the code in here and ill try it out??

thanks big time!!

@spiresgateJul 04.2007 — #Have you tried just clicking on the URL in my post? It works for me.

Below is the code for that particular page but you would need all my .jpg files to see it properly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>St Edwards Index 50-57</TITLE>

<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<META content="MSHTML 5.50.4134.600" name=GENERATOR>

<script language="javaScript">



</script>

</HEAD>

<BODY bgColor=#330066 ? TARGET="_top">

<TABLE cellSpacing=0 cellPadding=0 width=800>

<TBODY>

<TR>

<TD vAlign=top align=middle width=500><IMG height=150

alt="oldbadge.jpg (16001 bytes)" src="oldbadge.jpg"

width=150></TD>

<TD vAlign=center align=middle width=500>

St Edwards College

 Liverpool 1950 - 1957 

TEACHERS (Not their real

names!)  </TD>

<TD vAlign=center align=left width=500>

Email: <A target=_top

href="mailto:[email protected]">[email protected]</A></TD></TR></TBODY></TABLE>



<hr />

<TABLE cellSpacing=0 cellPadding=0 width=900>

<TR>

<TD vAlign=top align=left width=150>



<IMG height=100 src="oldbadge.jpg" name="BroImage" width=100 align=center border=0 TARGET="_top"></td>

<td valign=center width=150> Brothers</td>

<td vAlign=top align=left width=150>

<IMG height=100 src="badge.jpg" name="BroImage2" width=100 align=left border=0 TARGET="_top"></td>

<TD vAlign=top align=left width=150>



<IMG height=100 src="badge.jpg" name="MrImage" width=100 align=left border=0 TARGET="_top"></td>

<td vAlign=top align=left width=150>

 Mister Men</td>

<td vAlign=top align=left width=150>

<IMG height=100 src="badge.jpg" name="MrImage2" width=100 align=left border=0

TARGET="_top"></td>

</tr>

<tr>

<td colspan=3>

<a href="HarryHooper.jpg"

onMouseOver="document.images['BroImage'].src='HarryHooper.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Harry Hooper</a>

 

<a href="Foley.jpg"

onMouseOver="document.images['BroImage'].src='Foley.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">William DeSales Foley</a>

 

<a href="BrotherCoffey.jpg"

onMouseOver="document.images['BroImage'].src='BrotherCoffey.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Coffey</a>

 

<a href="BRyder.jpg"

onMouseOver="document.images['BroImage'].src='BRyder.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Ryder</a>

 

<a href="Taylor.jpg"

onMouseOver="document.images['BroImage'].src='Taylor.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Taylor</a>

 

<a href="Bomba.jpg"

onMouseOver="document.images['BroImage'].src='Bomba.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Bomba O'Brien</a>

 

<a href="Bede.jpg"

onMouseOver="document.images['BroImage'].src='Bede.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Robinson (The Venerable Bede)</a>

 

<a href="Maloney.jpg"

onMouseOver="document.images['BroImage'].src='Maloney.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Mullowney (Smokin' Joe)</a>

 

<a href="BrotherBrennanNow.jpg"

onMouseOver="document.images['BroImage'].src='Brennan.jpg';

document.images['BroImage2'].src='BrotherBrennanNow.jpg'" onMouseOut="document.images['BroImage2'].src='badge.jpg'">Brennan</a>

 Browner 

<a href="66 OKeefe.jpg"

onMouseOver="document.images['BroImage'].src='66 OKeefe.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Vom Bok O'Keefe</a>

 Tom O'Boyle Chops Cowley

 

<a href="112 Ring.jpg"

onMouseOver="document.images['BroImage'].src='112 Ring.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Ring</a>

<td colspan=2 valign="center">





<a href="Percy1939.jpg"

onMouseOver="document.images['MrImage'].src='Percy.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Percy O'Dowd</a>



 <a href="CLyons.htm">Con Lyons</a>

 <a href="PrewarTeachers.htm">Push Boraston (Frederic)</a>

 

<a href="doggymaher.htm"

onMouseOver="document.images['MrImage'].src='Doggy Maher.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Doggy Maher</a>

 

<a href="Bolger.jpg"

onMouseOver="document.images['MrImage'].src='Bolger.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Bolger</a>

 

<a href="Didge.jpg"

onMouseOver="document.images['MrImage'].src='Didge.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Didge Rowe</a>

 

<a href="Dixie.jpg"

onMouseOver="document.images['MrImage'].src='Dixie.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Dixie Duggan</a>

 

<a href="PopAllen.jpg"

onMouseOver="document.images['MrImage'].src='PopAllen.jpg'; document.images['MrImage2'].src='PopAllenNow.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'; document.images['MrImage2'].src='badge.jpg'">Pop Allen</a>

 

<a href="Ley.jpg"

onMouseOver="document.images['MrImage'].src='Ley.jpg'; document.images['MrImage2'].src='badge.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'; document.images['MrImage2'].src='badge.jpg'">Paddy Ley</a>

 

<a href="Johnny.jpg"

onMouseOver="document.images['MrImage'].src='Johnny.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Johnny Mullen</a>

 

<a href="Morris.jpg"

onMouseOver="document.images['MrImage'].src='Morris.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Johnny Smiler Morris</a>

 

<a href="RayThomasRIP.htm"

onMouseOver="document.images['MrImage'].src='Thomas.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Ray Thomas RIP 2006</a>

 </TD>

<TD colspan=2 vAlign=top align=left width=500>



<a href="Gaz.jpg"

onMouseOver="document.images['MrImage'].src='Gaz.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Gaz Vignoles</a>

 

<a href="Fraz.jpg"

onMouseOver="document.images['MrImage'].src='Fraz.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Fraz Frazer (also Pop)</a>

 

<a href="Cunningham.jpg"

onMouseOver="document.images['MrImage'].src='Cunningham.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Cunningham</a>

 

<a href="Hackett.jpg"

onMouseOver="document.images['MrImage'].src='Hackett.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Tom Hackett</a>

 

<a href="Alf.jpg"

onMouseOver="document.images['MrImage'].src='Alf.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Alf Barter</a>

 

<a href="Chinny.jpg"

onMouseOver="document.images['MrImage'].src='Chinny.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Chinny McGee</a>

 

<a href="MartinRegan.jpg"

onMouseOver="document.images['MrImage'].src='MartinRegan.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Martin Regan</a>

 

 Declan O'Hanlon

 Eugene Genin

 Snotty Oliver (Henry Barchi)

 

<a href="3 Jack Curtin.jpg"

onMouseOver="document.images['MrImage'].src='3 Jack Curtin.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Jack Curtin</a>

 

 and not forgetting Miss

Hogg (Helen?) 

and <a href="Kelly.jpg"

onMouseOver="document.images['MrImage'].src='Kelly.jpg'" onMouseOut="document.images['MrImage'].src='oldbadge.jpg'">Mr Kelly</a>

</TD></TR></TBODY></TABLE></BODY></HTML>

or try pasting in:

http://myweb.tiscali.co.uk/spiresgate/StEdwardsWeb/

then clicking on Teachers.

@scottcackettauthorJul 04.2007 — #say i wanted to have "scott.jpg" appear when i roll over text saying "scott". how would the code work for that. sorry bout this. just a beginner to this

@spiresgateJul 04.2007 — #Here's a stripped down version with an entry for Scott at the top of the list.

Put your Scott.jpg file in the same directory as this .htm file.

To see the effect put a blank picture called oldbadge.jpg in the same directory. My blank picture is the old school badge.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>St Edwards Index 50-57</TITLE>

<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<META content="MSHTML 5.50.4134.600" name=GENERATOR>

<script language="javaScript">

</script>

</HEAD>

<BODY bgColor=#330066 ? TARGET="_top">

<TABLE cellSpacing=0 cellPadding=0 width=900>

<TR>

<TD vAlign=top align=left width=150>



<IMG height=100 src="oldbadge.jpg" name="BroImage" width=100 align=center border=0 TARGET="_top"></td>

<td valign=center width=150> Brothers</td>

</tr>

<tr>

<td colspan=3>

<a href="Scott.jpg"

onMouseOver="document.images['BroImage'].src='Scott.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Scott</a>

 

<a href="HarryHooper.jpg"

onMouseOver="document.images['BroImage'].src='HarryHooper.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Harry Hooper</a>

 

<a href="Foley.jpg"

onMouseOver="document.images['BroImage'].src='Foley.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">William DeSales Foley</a>

 

<a href="BrotherCoffey.jpg"

onMouseOver="document.images['BroImage'].src='BrotherCoffey.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Coffey</a>

 

<a href="BRyder.jpg"

onMouseOver="document.images['BroImage'].src='BRyder.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Ryder</a>

 

<a href="Taylor.jpg"

onMouseOver="document.images['BroImage'].src='Taylor.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Taylor</a>

 

<a href="Bomba.jpg"

onMouseOver="document.images['BroImage'].src='Bomba.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Bomba O'Brien</a>

 

<a href="Bede.jpg"

onMouseOver="document.images['BroImage'].src='Bede.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Robinson (The Venerable Bede)</a>

 

<a href="Maloney.jpg"

onMouseOver="document.images['BroImage'].src='Maloney.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Mullowney (Smokin' Joe)</a>

 

<a href="BrotherBrennanNow.jpg"

onMouseOver="document.images['BroImage'].src='Brennan.jpg';

document.images['BroImage2'].src='BrotherBrennanNow.jpg'" onMouseOut="document.images['BroImage2'].src='badge.jpg'">Brennan</a>

 Browner 

<a href="66 OKeefe.jpg"

onMouseOver="document.images['BroImage'].src='66 OKeefe.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Vom Bok O'Keefe</a>

 Tom O'Boyle Chops Cowley

 

<a href="112 Ring.jpg"

onMouseOver="document.images['BroImage'].src='112 Ring.jpg'" onMouseOut="document.images['BroImage'].src='oldbadge.jpg'">Ring</a>

</TD></TR></TBODY></TABLE></BODY></HTML>

Also in #JavaScript _↴

Create a document from html form and email it setting time out on form submit Problem with CDATA

Success!

Help @scottcackett spread the word by sharing this article on Twitter...

Tweet This

Text/Image Rollover

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Text/Image Rollover

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴