Solved

Image rollover in grid when mouseover text

Posted on 2011-03-02
9
282 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. 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
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
  • 4
  • 4
9 Comments
 
LVL 8

Expert Comment

by:McNetic
ID: 35022707
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
 
LVL 3

Expert Comment

by:deegoy418
ID: 35025760
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
 

Author Comment

by:KimKing
ID: 35085498
McNetic,

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

Thanks,

Kim
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 8

Expert Comment

by:McNetic
ID: 35107579
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
 

Author Comment

by:KimKing
ID: 35130836
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
 
LVL 8

Expert Comment

by:McNetic
ID: 35132291
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
 

Author Comment

by:KimKing
ID: 35139674
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
 
LVL 8

Accepted Solution

by:
McNetic earned 500 total points
ID: 35145393
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
 

Author Comment

by:KimKing
ID: 35157222
McNetic,

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

Kim
0

Featured Post

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!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
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 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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

695 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