Text Appears in Sidebar When Viewing Image on Hover

[dinoandmaya]

I'm currently working on a school project to build a simple web site using HTML and CSS only. I plan on using a simple gallery to showcase some photos and am using the same code (slightly modified) from this web site.

http://www.dynamicdrive.com/style/cs...image-gallery/

The changes I made are getting rid of the <br /> in the thumbnail area so they show in one row and the text and borders underneath the regular size images when the mouse hovers over the thumbnail.

However, I would like for text to appear in a sidebar (seperate block element) when the user hovers over the image. In other words, when the user hovers over one image, one set of text appears but when they hover over another image, a different set of text appears.

Is this possible using HTML and CSS only?

[Lerura]

I am affraid not!

Css can alter the appearance of the hovered element and or it's child element.
It cannot alter the apperance nor content of outside elements

For this you will need a bit of javascript like:

onmouseover="document.getElementById('TextBox').innerHTML='Newtext' return true"

and

onmuseout="document.getElementById('TextBox').innerHTML='' return true"

added to the image tag.

[sunfighter]

Yes it can be done. You need to work a little on this but it should do what you want.
From The CSS Guru (Drum roll) - http://meyerweb.com/eric/css/edge/popups/demo.html

[Lerura]

Originally Posted by sunfighter

Yes it can be done. You need to work a little on this but it should do what you want.
From The CSS Guru (Drum roll) - http://meyerweb.com/eric/css/edge/popups/demo.html

This demo shows how you can do it, if the text is a child of a hovered item.
It is way to make text appear, but not the way OP wanted it to happen.

I will try to explain:
The OP way:

<div id="mainContainer">
<img src="My.first.picture">    <!--Trigger for My.first.Picture-->
<img src="My.second.picture">    <!--Trigger for My.second.Picture-->
<img src="My.third.picture">    <!--Trigger for My.third.Picture-->
<div class="text">You have hovered one of the picture</div>   <!--<Text for all the images-->
</div>

This cannot be done as the <div class="text"> is not a child of any of the triggering elements.

The Demo way:

<div id="mainContainer">
 <div class="pictureContainer">    <!--Trigger for My.Picture-->
  <img src="My.picture">                 
  <div class="text">You have hovered My.first.picture</div>    <!--Text for My.first.picture-->
 </div>
 <div class="pictureContainer">    <!--Trigger for My.second.Picture-->
  <img src="My.picture">                 
  <div class="text">You have hovered My.second.picture</div>    <!--Text for My.second.picture-->
 </div>
 <div class="pictureContainer">    <!--Trigger for My.third.Picture-->
  <img src="My.picture">                 
  <div class="text">You have hovered My.third.picture</div>    <!--Text for My.third.picture-->
 </div>
</div>

Now the trigger is no longer the images, but the .pictureContainer that contains both the image and it's related text.

As you can see, it requires a different, and larger, tree structure where you have 3 <div class="text">s instead of 1.

If OP wants to change it to the Demo way, make sure that each .pictureContainer exactly fits its contained image, and that the <div class="text">s are position:absolute

Maybe it will fulfil your requirements, though it is not what you asked for.

[sunfighter]

I did say "You need to work a little on this". because I wasn't gonna. Since it depends on hover and not onclick, my mind tells me it can be done with css and html and if I was doing it, I'd give it a shot.

[footballer27]

their both right. Although realistically, the only good way to do this is with javascript

[Lerura]

Originally Posted by sunfighter

I did say "You need to work a little on this". because I wasn't gonna. Since it depends on hover and not onclick, my mind tells me it can be done with css and html and if I was doing it, I'd give it a shot.

Of course it can be done.
But to use the demo way, OP have to use a different document structure than originally planned.

Originally Posted by footballer27

their both right. Although realistically, the only good way to do this is with javascript

You are oh so wrong.

If you can avoid using javascript, as you can do here, it is best to do it.
The CSS way will work even if the user have javascript disabled, (which many users have).

If there was anything in the document that required javascript, then you can just as well use javascript for this purpose.
But there isn't, and then there is no reason to make javascript:enabled a requirement