Solved

Image rollover in grid when mouseover text

Posted on 2011-02-23
7
369 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 375 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 375 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 125 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 375 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

737 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