Solved

Image rollover in grid when mouseover text

Posted on 2011-03-02
9
272 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
Comment Utility
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
Comment Utility
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
Comment Utility
McNetic,

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

Thanks,

Kim
0
 
LVL 8

Expert Comment

by:McNetic
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:KimKing
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
McNetic,

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

Kim
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now