?
Solved

Image rollover in grid when mouseover text

Posted on 2011-02-23
7
Medium Priority
?
371 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
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.

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

764 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