Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Image rollover in grid when mouseover text

Posted on 2011-02-23
7
Medium Priority
?
372 Views
Last Modified: 2012-05-11
I have a page with a list of names on the left and a grid of images on the right. When I rollover a name, I want its associated image to be highlighted. Looking for some simple code to do this, can be javascript, DHTML od CSS so long as it works simply.

Thank you,

Kim King
0
Comment
Question by:KimKing
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 

Author Comment

by:KimKing
ID: 34962755
And conversly, when the image is mousedover, the name is highlighted.

KK
0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 1500 total points
ID: 34962906

Here's version 1:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26842343.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script>

$(document).ready(function() {

  $("img").css( { opacity: 0.4 } );
  $(".caption")
  .hover( hoverEnter, hoverExit )
  .css( { cursor: "hand" } );

});

function hoverEnter() {
  $(this).siblings().find("img").css( { opacity: 1.0 } )
}

function hoverExit() {
  $(this).siblings().find("img").css( { opacity: 0.4 } )
}

</script>
</head>
<body>

<table>
<tr><td class="caption">01_of_clubs_01</td><td><img alt="01 of clubs 01.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/87/01_of_clubs_01.svg/40px-01_of_clubs_01.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">02_of_clubs</td><td><img alt="02 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/02_of_clubs.svg/40px-02_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">03_of_clubs</td><td><img alt="03 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/03_of_clubs.svg/40px-03_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">04_of_clubs</td><td><img alt="04 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/04_of_clubs.svg/40px-04_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">05_of_clubs</td><td><img alt="05 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/05_of_clubs.svg/40px-05_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">06_of_clubs</td><td><img alt="06 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/06_of_clubs.svg/40px-06_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">07_of_clubs</td><td><img alt="07 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/07_of_clubs.svg/40px-07_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">08_of_clubs</td><td><img alt="08 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/08_of_clubs.svg/40px-08_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">09_of_clubs</td><td><img alt="09 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/09_of_clubs.svg/40px-09_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">10_of_clubs</td><td><img alt="10 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/10_of_clubs.svg/40px-10_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Jack_of_clubs_en</td><td><img alt="Jack of clubs en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Jack_of_clubs_en.svg/40px-Jack_of_clubs_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Knight_of_clubs_en</td><td><img alt="Knight of clubs en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Knight_of_clubs_en.svg/40px-Knight_of_clubs_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Queen_of_clubs_en</td><td><img alt="Queen of clubs en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Queen_of_clubs_en.svg/40px-Queen_of_clubs_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">King_of_clubs_en</td><td><img alt="King of clubs en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/King_of_clubs_en.svg/40px-King_of_clubs_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">01_of_diamonds_01</td><td><img alt="01 of diamonds 01.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/01_of_diamonds_01.svg/40px-01_of_diamonds_01.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">02_of_diamonds</td><td><img alt="02 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/02_of_diamonds.svg/40px-02_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">03_of_diamonds</td><td><img alt="03 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/00/03_of_diamonds.svg/40px-03_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">04_of_diamonds</td><td><img alt="04 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/04_of_diamonds.svg/40px-04_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">05_of_diamonds</td><td><img alt="05 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/05_of_diamonds.svg/40px-05_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">06_of_diamonds</td><td><img alt="06 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/06_of_diamonds.svg/40px-06_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">07_of_diamonds</td><td><img alt="07 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/07_of_diamonds.svg/40px-07_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">08_of_diamonds</td><td><img alt="08 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/08_of_diamonds.svg/40px-08_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">09_of_diamonds</td><td><img alt="09 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/09_of_diamonds.svg/40px-09_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">10_of_diamonds</td><td><img alt="10 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/10_of_diamonds.svg/40px-10_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Jack_of_diamonds_en</td><td><img alt="Jack of diamonds en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Jack_of_diamonds_en.svg/40px-Jack_of_diamonds_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Knight_of_diamonds_en</td><td><img alt="Knight of diamonds en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Knight_of_diamonds_en.svg/40px-Knight_of_diamonds_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Queen_of_diamonds_en</td><td><img alt="Queen of diamonds en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Queen_of_diamonds_en.svg/40px-Queen_of_diamonds_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">King_of_diamonds_en</td><td><img alt="King of diamonds en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/66/King_of_diamonds_en.svg/40px-King_of_diamonds_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">01_of_hearts_01</td><td><img alt="01 of hearts 01.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/01_of_hearts_01.svg/40px-01_of_hearts_01.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">02_of_hearts</td><td><img alt="02 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/74/02_of_hearts.svg/40px-02_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">03_of_hearts</td><td><img alt="03 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/03_of_hearts.svg/40px-03_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">04_of_hearts</td><td><img alt="04 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/04_of_hearts.svg/40px-04_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">05_of_hearts</td><td><img alt="05 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/05_of_hearts.svg/40px-05_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">06_of_hearts</td><td><img alt="06 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/06_of_hearts.svg/40px-06_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">07_of_hearts</td><td><img alt="07 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/07_of_hearts.svg/40px-07_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">08_of_hearts</td><td><img alt="08 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/37/08_of_hearts.svg/40px-08_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">09_of_hearts</td><td><img alt="09 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/09_of_hearts.svg/40px-09_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">10_of_hearts</td><td><img alt="10 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/10_of_hearts.svg/40px-10_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Jack_of_hearts_en</td><td><img alt="Jack of hearts en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Jack_of_hearts_en.svg/40px-Jack_of_hearts_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Knight_of_hearts_en</td><td><img alt="Knight of hearts en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Knight_of_hearts_en.svg/40px-Knight_of_hearts_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Queen_of_hearts_en</td><td><img alt="Queen of hearts en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Queen_of_hearts_en.svg/40px-Queen_of_hearts_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">King_of_hearts_en</td><td><img alt="King of hearts en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/King_of_hearts_en.svg/40px-King_of_hearts_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">01_of_spades_01</td><td><img alt="01 of spades 01.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/01_of_spades_01.svg/40px-01_of_spades_01.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">02_of_spades</td><td><img alt="02 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/02_of_spades.svg/40px-02_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">03_of_spades</td><td><img alt="03 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/03_of_spades.svg/40px-03_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">04_of_spades</td><td><img alt="04 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/04_of_spades.svg/40px-04_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">05_of_spades</td><td><img alt="05 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/05_of_spades.svg/40px-05_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">06_of_spades</td><td><img alt="06 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/06_of_spades.svg/40px-06_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">07_of_spades</td><td><img alt="07 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/07_of_spades.svg/40px-07_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">08_of_spades</td><td><img alt="08 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/08_of_spades.svg/40px-08_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">09_of_spades</td><td><img alt="09 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/09_of_spades.svg/40px-09_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">10_of_spades</td><td><img alt="10 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/68/10_of_spades.svg/40px-10_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Jack_of_spades_en</td><td><img alt="Jack of spades en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Jack_of_spades_en.svg/40px-Jack_of_spades_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Knight_of_spades_en</td><td><img alt="Knight of spades en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Knight_of_spades_en.svg/40px-Knight_of_spades_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Queen_of_spades_en</td><td><img alt="Queen of spades en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Queen_of_spades_en.svg/40px-Queen_of_spades_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">King_of_spades_en</td><td><img alt="King of spades en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/King_of_spades_en.svg/40px-King_of_spades_en.svg.png" width="40" height="58" /></td></tr>
</table>

</body>
</html>

Open in new window

0
 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 1500 total points
ID: 34962966

...and version 2:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26842343.html#a34962906</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script>

$(document).ready(function() {

  $("img")
  .hover( captionHighlight, captionStandard )
  .css( { opacity: 0.4, cursor: "hand" } );
  $(".caption")
  .hover( hoverEnter, hoverExit )
  .css( { cursor: "hand" } );

});

function captionHighlight() {
  $(this).parent().siblings().css( { fontWeight: "bolder" } )
}

function captionStandard() {
  $(this).parent().siblings().css( { fontWeight: "normal" } )
}

function hoverEnter() {
  $(this).siblings().find("img").css( { opacity: 1.0 } )
}

function hoverExit() {
  $(this).siblings().find("img").css( { opacity: 0.4 } )
}

</script>
</head>
<body>

<table>
<tr><td class="caption">01_of_clubs_01</td><td><img alt="01 of clubs 01.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/87/01_of_clubs_01.svg/40px-01_of_clubs_01.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">02_of_clubs</td><td><img alt="02 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/02_of_clubs.svg/40px-02_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">03_of_clubs</td><td><img alt="03 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/03_of_clubs.svg/40px-03_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">04_of_clubs</td><td><img alt="04 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/04_of_clubs.svg/40px-04_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">05_of_clubs</td><td><img alt="05 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/05_of_clubs.svg/40px-05_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">06_of_clubs</td><td><img alt="06 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/06_of_clubs.svg/40px-06_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">07_of_clubs</td><td><img alt="07 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/07_of_clubs.svg/40px-07_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">08_of_clubs</td><td><img alt="08 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/08_of_clubs.svg/40px-08_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">09_of_clubs</td><td><img alt="09 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/09_of_clubs.svg/40px-09_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">10_of_clubs</td><td><img alt="10 of clubs.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/10_of_clubs.svg/40px-10_of_clubs.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Jack_of_clubs_en</td><td><img alt="Jack of clubs en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Jack_of_clubs_en.svg/40px-Jack_of_clubs_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Knight_of_clubs_en</td><td><img alt="Knight of clubs en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Knight_of_clubs_en.svg/40px-Knight_of_clubs_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Queen_of_clubs_en</td><td><img alt="Queen of clubs en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Queen_of_clubs_en.svg/40px-Queen_of_clubs_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">King_of_clubs_en</td><td><img alt="King of clubs en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/King_of_clubs_en.svg/40px-King_of_clubs_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">01_of_diamonds_01</td><td><img alt="01 of diamonds 01.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/01_of_diamonds_01.svg/40px-01_of_diamonds_01.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">02_of_diamonds</td><td><img alt="02 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/02_of_diamonds.svg/40px-02_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">03_of_diamonds</td><td><img alt="03 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/00/03_of_diamonds.svg/40px-03_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">04_of_diamonds</td><td><img alt="04 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/04_of_diamonds.svg/40px-04_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">05_of_diamonds</td><td><img alt="05 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/05_of_diamonds.svg/40px-05_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">06_of_diamonds</td><td><img alt="06 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/06_of_diamonds.svg/40px-06_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">07_of_diamonds</td><td><img alt="07 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/07_of_diamonds.svg/40px-07_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">08_of_diamonds</td><td><img alt="08 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/08_of_diamonds.svg/40px-08_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">09_of_diamonds</td><td><img alt="09 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/09_of_diamonds.svg/40px-09_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">10_of_diamonds</td><td><img alt="10 of diamonds.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/10_of_diamonds.svg/40px-10_of_diamonds.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Jack_of_diamonds_en</td><td><img alt="Jack of diamonds en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Jack_of_diamonds_en.svg/40px-Jack_of_diamonds_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Knight_of_diamonds_en</td><td><img alt="Knight of diamonds en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Knight_of_diamonds_en.svg/40px-Knight_of_diamonds_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Queen_of_diamonds_en</td><td><img alt="Queen of diamonds en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Queen_of_diamonds_en.svg/40px-Queen_of_diamonds_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">King_of_diamonds_en</td><td><img alt="King of diamonds en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/66/King_of_diamonds_en.svg/40px-King_of_diamonds_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">01_of_hearts_01</td><td><img alt="01 of hearts 01.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/01_of_hearts_01.svg/40px-01_of_hearts_01.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">02_of_hearts</td><td><img alt="02 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/74/02_of_hearts.svg/40px-02_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">03_of_hearts</td><td><img alt="03 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/03_of_hearts.svg/40px-03_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">04_of_hearts</td><td><img alt="04 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/04_of_hearts.svg/40px-04_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">05_of_hearts</td><td><img alt="05 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/05_of_hearts.svg/40px-05_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">06_of_hearts</td><td><img alt="06 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/06_of_hearts.svg/40px-06_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">07_of_hearts</td><td><img alt="07 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/07_of_hearts.svg/40px-07_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">08_of_hearts</td><td><img alt="08 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/37/08_of_hearts.svg/40px-08_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">09_of_hearts</td><td><img alt="09 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/09_of_hearts.svg/40px-09_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">10_of_hearts</td><td><img alt="10 of hearts.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/10_of_hearts.svg/40px-10_of_hearts.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Jack_of_hearts_en</td><td><img alt="Jack of hearts en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Jack_of_hearts_en.svg/40px-Jack_of_hearts_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Knight_of_hearts_en</td><td><img alt="Knight of hearts en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Knight_of_hearts_en.svg/40px-Knight_of_hearts_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Queen_of_hearts_en</td><td><img alt="Queen of hearts en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Queen_of_hearts_en.svg/40px-Queen_of_hearts_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">King_of_hearts_en</td><td><img alt="King of hearts en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/King_of_hearts_en.svg/40px-King_of_hearts_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">01_of_spades_01</td><td><img alt="01 of spades 01.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/01_of_spades_01.svg/40px-01_of_spades_01.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">02_of_spades</td><td><img alt="02 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/02_of_spades.svg/40px-02_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">03_of_spades</td><td><img alt="03 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/03_of_spades.svg/40px-03_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">04_of_spades</td><td><img alt="04 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/04_of_spades.svg/40px-04_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">05_of_spades</td><td><img alt="05 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/05_of_spades.svg/40px-05_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">06_of_spades</td><td><img alt="06 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/06_of_spades.svg/40px-06_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">07_of_spades</td><td><img alt="07 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/07_of_spades.svg/40px-07_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">08_of_spades</td><td><img alt="08 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/08_of_spades.svg/40px-08_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">09_of_spades</td><td><img alt="09 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/09_of_spades.svg/40px-09_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">10_of_spades</td><td><img alt="10 of spades.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/68/10_of_spades.svg/40px-10_of_spades.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Jack_of_spades_en</td><td><img alt="Jack of spades en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Jack_of_spades_en.svg/40px-Jack_of_spades_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Knight_of_spades_en</td><td><img alt="Knight of spades en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Knight_of_spades_en.svg/40px-Knight_of_spades_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">Queen_of_spades_en</td><td><img alt="Queen of spades en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Queen_of_spades_en.svg/40px-Queen_of_spades_en.svg.png" width="40" height="58" /></td></tr>
<tr><td class="caption">King_of_spades_en</td><td><img alt="King of spades en.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/King_of_spades_en.svg/40px-King_of_spades_en.svg.png" width="40" height="58" /></td></tr>
</table>

</body>
</html>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 500 total points
ID: 34963201
and version 3:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$(".row span.label").hover(function(){
				$(this).next().find("img").css("width","60px");
				$(this).next().find("img").css("height","60px");
			},
			function(){
				$(this).next().find("img").css("width","50px");
				$(this).next().find("img").css("height","50px");
			});


			$(".row span img").hover(function(){
				$(this).parent().prev().css("background-color","pink");
			},
			function(){
				$(this).parent().prev().css("background-color","white");
			});

		});
	</script>
	<style>
		.row span
		{	
			width:50px;
			height:50px;
		}
		.row span img
		{	
			width:100%;
			height:100%;
		}
		.row span.label
		{	
			width:50px;
			height:50px;
			font:12px;
		}
	</style>
</HEAD>

<BODY>
	<div class="container">
		<div class="row">
			<span class="label">label1</span>
			<span><img src="twitterlogo.jpg"/></span>
		</div>
		<div class="row">
			<span class="label">label2</span>
			<span><img src="twitterlogo.jpg"/></span>
		</div>
		<div class="row">
			<span class="label">label3</span>
			<span><img src="twitterlogo.jpg"/></span>
		</div>
		<div class="row">
			<span class="label">label4</span>
			<span><img src="twitterlogo.jpg"/></span>
		</div>
	</div>
</BODY>
</HTML>

Open in new window

0
 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 1500 total points
ID: 34968373

Here's another version to consider:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26842343.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script>

$(document).ready(function() {

  $("img")
  .hover( captionHighlight, captionStandard )
  .css( { opacity: 0.4, cursor: "hand" } );
  $("label")
  .hover( hoverEnter, hoverExit )
  .css( { cursor: "hand" } );

});

function captionHighlight() {
  var id = $(this).attr( "id" );
  $("label[for=" + id + "]").css( { fontWeight: "bolder" } );
}

function captionStandard() {
  var id = $(this).attr( "id" );
  $("label[for=" + id + "]").css( { fontWeight: "normal" } );
}

function hoverEnter() {
  var id = $(this).attr( "for" );
  $("#" + id).css( { opacity: 1.0 } )
}

function hoverExit() {
  var id = $(this).attr( "for" );
  $("#" + id).css( { opacity: 0.4 } )
}

</script>
</head>
<body>

<label for="101">       01_of_clubs</label><img id="101" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/87/01_of_clubs_01.svg/40px-01_of_clubs_01.svg.png" width="40" height="58" /><br />
<label for="102">       02_of_clubs</label><img id="102" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/02_of_clubs.svg/40px-02_of_clubs.svg.png" width="40" height="58" /><br />
<label for="103">       03_of_clubs</label><img id="103" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/03_of_clubs.svg/40px-03_of_clubs.svg.png" width="40" height="58" /><br />
<label for="104">       04_of_clubs</label><img id="104" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/04_of_clubs.svg/40px-04_of_clubs.svg.png" width="40" height="58" /><br />
<label for="105">       05_of_clubs</label><img id="105" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/05_of_clubs.svg/40px-05_of_clubs.svg.png" width="40" height="58" /><br />
<label for="106">       06_of_clubs</label><img id="106" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/06_of_clubs.svg/40px-06_of_clubs.svg.png" width="40" height="58" /><br />
<label for="107">       07_of_clubs</label><img id="107" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/07_of_clubs.svg/40px-07_of_clubs.svg.png" width="40" height="58" /><br />
<label for="108">       08_of_clubs</label><img id="108" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/08_of_clubs.svg/40px-08_of_clubs.svg.png" width="40" height="58" /><br />
<label for="109">       09_of_clubs</label><img id="109" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/09_of_clubs.svg/40px-09_of_clubs.svg.png" width="40" height="58" /><br />
<label for="110">       10_of_clubs</label><img id="110" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/10_of_clubs.svg/40px-10_of_clubs.svg.png" width="40" height="58" /><br />
<label for="111">     Jack_of_clubs</label><img id="111" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Jack_of_clubs_en.svg/40px-Jack_of_clubs_en.svg.png" width="40" height="58" /><br />
<label for="112">   Knight_of_clubs</label><img id="112" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Knight_of_clubs_en.svg/40px-Knight_of_clubs_en.svg.png" width="40" height="58" /><br />
<label for="113">    Queen_of_clubs</label><img id="113" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Queen_of_clubs_en.svg/40px-Queen_of_clubs_en.svg.png" width="40" height="58" /><br />
<label for="114">     King_of_clubs</label><img id="114" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/King_of_clubs_en.svg/40px-King_of_clubs_en.svg.png" width="40" height="58" /><br />
<label for="201">    01_of_diamonds</label><img id="201" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/01_of_diamonds_01.svg/40px-01_of_diamonds_01.svg.png" width="40" height="58" /><br />
<label for="202">    02_of_diamonds</label><img id="202" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/02_of_diamonds.svg/40px-02_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="203">    03_of_diamonds</label><img id="203" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/00/03_of_diamonds.svg/40px-03_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="204">    04_of_diamonds</label><img id="204" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/04_of_diamonds.svg/40px-04_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="205">    05_of_diamonds</label><img id="205" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/05_of_diamonds.svg/40px-05_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="206">    06_of_diamonds</label><img id="206" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/06_of_diamonds.svg/40px-06_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="207">    07_of_diamonds</label><img id="207" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/07_of_diamonds.svg/40px-07_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="208">    08_of_diamonds</label><img id="208" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/08_of_diamonds.svg/40px-08_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="209">    09_of_diamonds</label><img id="209" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/09_of_diamonds.svg/40px-09_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="210">    10_of_diamonds</label><img id="210" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/10_of_diamonds.svg/40px-10_of_diamonds.svg.png" width="40" height="58" /><br />
<label for="211">  Jack_of_diamonds</label><img id="211" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Jack_of_diamonds_en.svg/40px-Jack_of_diamonds_en.svg.png" width="40" height="58" /><br />
<label for="212">Knight_of_diamonds</label><img id="212" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Knight_of_diamonds_en.svg/40px-Knight_of_diamonds_en.svg.png" width="40" height="58" /><br />
<label for="213"> Queen_of_diamonds</label><img id="213" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Queen_of_diamonds_en.svg/40px-Queen_of_diamonds_en.svg.png" width="40" height="58" /><br />
<label for="214">  King_of_diamonds</label><img id="214" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/66/King_of_diamonds_en.svg/40px-King_of_diamonds_en.svg.png" width="40" height="58" /><br />
<label for="301">      01_of_hearts</label><img id="301" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/01_of_hearts_01.svg/40px-01_of_hearts_01.svg.png" width="40" height="58" /><br />
<label for="302">      02_of_hearts</label><img id="302" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/74/02_of_hearts.svg/40px-02_of_hearts.svg.png" width="40" height="58" /><br />
<label for="303">      03_of_hearts</label><img id="303" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/03_of_hearts.svg/40px-03_of_hearts.svg.png" width="40" height="58" /><br />
<label for="304">      04_of_hearts</label><img id="304" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/04_of_hearts.svg/40px-04_of_hearts.svg.png" width="40" height="58" /><br />
<label for="305">      05_of_hearts</label><img id="305" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/05_of_hearts.svg/40px-05_of_hearts.svg.png" width="40" height="58" /><br />
<label for="306">      06_of_hearts</label><img id="306" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/06_of_hearts.svg/40px-06_of_hearts.svg.png" width="40" height="58" /><br />
<label for="307">      07_of_hearts</label><img id="307" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/07_of_hearts.svg/40px-07_of_hearts.svg.png" width="40" height="58" /><br />
<label for="308">      08_of_hearts</label><img id="308" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/37/08_of_hearts.svg/40px-08_of_hearts.svg.png" width="40" height="58" /><br />
<label for="309">      09_of_hearts</label><img id="309" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/09_of_hearts.svg/40px-09_of_hearts.svg.png" width="40" height="58" /><br />
<label for="310">      10_of_hearts</label><img id="310" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/10_of_hearts.svg/40px-10_of_hearts.svg.png" width="40" height="58" /><br />
<label for="311">    Jack_of_hearts</label><img id="311" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Jack_of_hearts_en.svg/40px-Jack_of_hearts_en.svg.png" width="40" height="58" /><br />
<label for="312">  Knight_of_hearts</label><img id="312" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Knight_of_hearts_en.svg/40px-Knight_of_hearts_en.svg.png" width="40" height="58" /><br />
<label for="313">   Queen_of_hearts</label><img id="313" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Queen_of_hearts_en.svg/40px-Queen_of_hearts_en.svg.png" width="40" height="58" /><br />
<label for="314">    King_of_hearts</label><img id="314" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/King_of_hearts_en.svg/40px-King_of_hearts_en.svg.png" width="40" height="58" /><br />
<label for="401">      01_of_spades</label><img id="401" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/01_of_spades_01.svg/40px-01_of_spades_01.svg.png" width="40" height="58" /><br />
<label for="402">      02_of_spades</label><img id="402" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/02_of_spades.svg/40px-02_of_spades.svg.png" width="40" height="58" /><br />
<label for="403">      03_of_spades</label><img id="403" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/03_of_spades.svg/40px-03_of_spades.svg.png" width="40" height="58" /><br />
<label for="404">      04_of_spades</label><img id="404" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/04_of_spades.svg/40px-04_of_spades.svg.png" width="40" height="58" /><br />
<label for="405">      05_of_spades</label><img id="405" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/05_of_spades.svg/40px-05_of_spades.svg.png" width="40" height="58" /><br />
<label for="406">      06_of_spades</label><img id="406" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/06_of_spades.svg/40px-06_of_spades.svg.png" width="40" height="58" /><br />
<label for="407">      07_of_spades</label><img id="407" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/07_of_spades.svg/40px-07_of_spades.svg.png" width="40" height="58" /><br />
<label for="408">      08_of_spades</label><img id="408" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/08_of_spades.svg/40px-08_of_spades.svg.png" width="40" height="58" /><br />
<label for="409">      09_of_spades</label><img id="409" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/09_of_spades.svg/40px-09_of_spades.svg.png" width="40" height="58" /><br />
<label for="410">      10_of_spades</label><img id="410" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/68/10_of_spades.svg/40px-10_of_spades.svg.png" width="40" height="58" /><br />
<label for="411">    Jack_of_spades</label><img id="411" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Jack_of_spades_en.svg/40px-Jack_of_spades_en.svg.png" width="40" height="58" /><br />
<label for="412">  Knight_of_spades</label><img id="412" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Knight_of_spades_en.svg/40px-Knight_of_spades_en.svg.png" width="40" height="58" /><br />
<label for="413">   Queen_of_spades</label><img id="413" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Queen_of_spades_en.svg/40px-Queen_of_spades_en.svg.png" width="40" height="58" /><br />
<label for="414">    King_of_spades</label><img id="414" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/King_of_spades_en.svg/40px-King_of_spades_en.svg.png" width="40" height="58" /><br />

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:KimKing
ID: 34973654
I won't be able to implement this for another few weeks, so I'm splitting the points equally for each soloution. I'm certain one of them will answer my needs, if not all of them.

Many thanks,

Kim King
0
 

Author Comment

by:KimKing
ID: 34998727
Proculopsis,

How do I make your solotion work with jpgs?

Thanks,

KK
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question