Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2011
    Location
    Raleigh, NC
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Text Appears in Sidebar When Viewing Image on Hover

    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?

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    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:
    Code:
    onmouseover="document.getElementById('TextBox').innerHTML='Newtext' return true"
    and
    Code:
    onmuseout="document.getElementById('TextBox').innerHTML='' return true"
    added to the image tag.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,219
    Thanks
    23
    Thanked 606 Times in 605 Posts
    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

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Quote Originally Posted by sunfighter View Post
    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:
    Code:
    <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:
    Code:
    <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.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,219
    Thanks
    23
    Thanked 606 Times in 605 Posts
    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.

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    85
    Thanks
    13
    Thanked 1 Time in 1 Post
    their both right. Although realistically, the only good way to do this is with javascript

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Quote Originally Posted by sunfighter View Post
    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.

    Quote Originally Posted by footballer27 View Post
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •