Image Hover Effect: Displaying text elsewhere on the page.

[blitzyflitzy294]

I am trying to design a page and I’ve been working on it for several days now and have found partial solutions but I still have problems.

The basic idea is to hover over an image and have a description show up in a specific box elsewhere on the page.

I can get it to work by using this code with nested tables:

<table>
<tr>
<td width="202">
<table width="150" height="159" >
      <tr>
<td width="129" height="159">
<font class="subcategory">V426</font> <br>
<img src="##" width="100px" onmouseover="showDescription('Click to see the configurations for the Product.')" onmouseout="showDescription('Roll over a category to display additional information.')"/>
</td>
</tr>
</table>
</td>
</tr>
</table>

Here’s the java script that I got from a tutorial site to make it work:

`<script type="text/javascript">
function showDescription(text){
  document.getElementById('information').innerHTML = text;
}

function clearDescription(){
  document.getElementById('information').innerHTML = '';
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
`

The problem, though, is I want to add code to style the text that shows up in the box. I want to make a line break and add bullet points but everything I tried didn’t work. If there’s a better or easier way to make this work, that would be very helpful!

[Paulie_D]

There are a number of ways to do this.

Ideally you need a couple of ‘areas’…the first for your list of images (and a list is a great structure for this…and a second ‘reserved’ area that hold the detail.

In fact this can be done with pure HTML & CSS (and still be pretty fancy).

Give me a few minutes…

EDIT…this may take a while…Codepen.io is acting up for me.

[Paulie_D]

Ok…here we go

http://jsfiddle.net/Paulie_D/6Xwq9/47/

The images are all in their own container (the ul/) which has position:relative.

The descriptions are all positioned absolutely in the same place (one on top of the other as it happens)…I used an opacity to hide the contents of the description boxes which is then revealed when you hover of the respective image.

This is a quick and dirty version but it might give you the basic idea.

Frankly, with more time i could clean it up a lot…make it all responsive and shizzle and throw in some basic JQuery and have it looking da bomb but there are loads of gallery options out there…a google search will give you hundreds of pure CSS ones and probably thousands of Jquery versions.

[Author]

Posts