• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 300
  • Last Modified:

Image rollover in grid when mouseover text

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. And conversly, when the image is mousedover, the name is highlighted. Looking for some simple code to do this, can be javascript, DHTML or CSS so long as it works simply. Needs to work with jpg images.

Thank you,

Kim King
0
KimKing
Asked:
KimKing
  • 4
  • 4
1 Solution
 
McNeticCommented:
You could use jquery. Every name has to be in a separate tag, for example a <span>. Each span should have a class, for example class="span", every image another class, for example class="img". Additionally, each element must get a unique id, beginning with the class name, a hyphen, then a number (e.g. span-1, span-2 etc. and img-1, img-2 etc). Then you can add the following to the document.ready handler:

$("span.span").hover(
  function() {
    var num = $(this).attr('id').split('-')[1];
    $('img.img#img-'+num).addClass('highlight');
  }, function() {
    var num = $(this).attr('id').split('-')[1];
    $('img.img#img-'+num).removeClass('highlight');
  });

Open in new window


The same has to be done for the images. (replace img by span and vice versa). At last, add a css style for class highlight that formats the images and spans to be highlighted as you like.
0
 
deegoy418Commented:
I tihnk, you require image sprite in CSS, I can provide you the solution however I would need the HTML code for the same.

could you please provide the HTML code?

Regards
Deepak
0
 
KimKingAuthor Commented:
McNetic,

Can you provide samples of the css code and how to use it?

Thanks,

Kim
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!

 
McNeticCommented:
Sorry, I thought I already posted this earlier, but obviously I forgot. Here is a minimal working example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span.span, img.img").hover(
  function() {
    var num = $(this).attr('id').split('-')[1];
    $('img.img#img-'+num).addClass('highlight');
    $('span.span#span-'+num).addClass('highlight');
  }, function() {
    var num = $(this).attr('id').split('-')[1];
    $('img.img#img-'+num).removeClass('highlight');
    $('span.span#span-'+num).removeClass('highlight');
  });
});
</script>
<style type="text/css">
  span.highlight
  {
    color: red;
  }
  img.highlight
  {
    border: 1px solid red;
  }
</style>
</head>
<body>
<div>
  <span class="span" id="span-1">Text1</span><br>
  <span class="span" id="span-2">Text2</span><br>
  <span class="span" id="span-3">Text3</span><br>
</div>
<div>
  <img class="img" id="img-1" src="someurl1.jpg" alt="Img1" />
  <img class="img" id="img-2" src="someurl2.jpg" alt="Img2" />
  <img class="img" id="img-3" src="someurl3.jpg" alt="Img3" />
</div>
</body>
</html>

Open in new window

0
 
KimKingAuthor Commented:
McNetic,

That works very nicely, thank you. What would the syntax be to have the normal image dispaly opacity: 0.5 and the rollover be opacity: 1.0? That would really solve it for me.

Thanks again,

Kim
0
 
McNeticCommented:
You have to change replace the css styles by the following:

<style type="text/css">
  span.highlight
  {
    color: red;
  }
  img.img
  {
    opacity: 0.5;
  }
  img.highlight
  {
    opacity: 1.0;
  }
</style>

Open in new window


Note: the opacity setting is only interpreted by relatively recent browsers. If you need to support older browsers, like IE6, you may need additional settings. Take a look at http://css-tricks.com/css-transparency-settings-for-all-broswers/ for example to get that.
0
 
KimKingAuthor Commented:
Its not working for me. See code below. Z is a counter and thepic is the path and image url. I changed the style as you suggested above but I get no rollover action on thr image. It worked fine with the red border.

Thanks,

Kim
<img class='img' id='img-<%=z%>' src="<%=thepic%>" border="0">

Open in new window

0
 
McNeticCommented:
I think you tested this in IE. As I already pointed out, the standard css opacity settings is only rendered correctly by recent browsers. Opera, Safari and Firefox do this for a long time now, while IE starts supporting it as of IE9. To make it work in older Browsers, you need some additional settings, as pointed out on the page linked in my above post. For IE, this will have to be like this:

<style type="text/css">
  span.highlight
  {
    color: red;
  }
  img.img
  {
    opacity: 0.5;
    filter:alpha(opacity=50);
  }
  img.highlight
  {
    opacity: 1.0;
    filter:alpha(opacity=100);
  }
</style>

Open in new window

0
 
KimKingAuthor Commented:
McNetic,

That last bit for IE solved it. Thank you very much for your efforts.

Kim
0

Featured Post

Independent Software Vendors: 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!

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now