Solved

Image rollover in grid when mouseover text

Posted on 2011-03-02
9
273 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript export function not working in IE 15 37
form button worked now it doesnt anymore 9 41
Error in script 11 47
Angular - "nest" service calls? 18 25
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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 …

895 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

15 Experts available now in Live!

Get 1:1 Help Now