Solved

Image rollover in grid when mouseover text

Posted on 2011-03-02
9
279 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
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html date format 9 20
Jquery if else not working ... WHY? 5 26
HTML INPUT 6 21
CSS - how to make button/link change to black on hover? 2 18
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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