Solved

Image rollover in grid when mouseover text

Posted on 2011-02-23
7
366 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
  • 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
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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 …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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