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 to the CF scene
    Join Date
    Oct 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How can I create a stacked list of thumbnails, each one expanding with more info?

    As the subject suggests, I'm interested in having a "picture/information" page on my site. I want a simple list of 5 to 10 thumbnailed pictures when the page loads in which each one is stacked on the other. I would like each to expand with a bigger picture and text information about the picture via user interaction. I have two options - I don't care which one I use:

    #1. Once loaded, I would like each thumbnailed picture, once clicked, to expand and show a bigger picture and text information about the picture. I wouldn't mind using this option but this option is more of a hassle and causes more clutter/less interaction.

    #2. As I thought about this, I think a better option would be to expand to a bigger picture and text information using a mouse rollover instead of a click so that, once a user moves the mouse back off the bigger picture and information, it reduces back to the thumnail. This would allow for a better organized and better looking page. This effect, I would assume, is almost like text links changing color using mouse rollover.

    * Which option would you suggest using?

    * Is option #2 even possible?

    * I would prefer using option #2.

    * I've experimented with this code (however, it used option #1, not #2, and it requires clicking an entirely different button to do so):
    <script langauge="javascript">

    function changeIt(){

    if(document.checker.checker.value==1){
    var width=100
    var height=100

    document.checker.checker.value=2
    }else{
    document.checker.checker.value=1
    var width=284
    var height=229
    }

    document.main.width=width
    document.main.height=height
    }

    </script>

    <form name="checker">
    <input name="checker" type="hidden" id="checker" value="2" checker="1">
    </form>

    <img src="image.gif" name="main" width="100" height="100">
    <BR>
    <input type="button" value=" Change " onclick="changeIt()">
    Thanks ahead of time guys for any help,
    ~obededom~

  • #2
    New Coder
    Join Date
    Oct 2005
    Location
    London, United Kingdom
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I prefer #1 because it is more common interface. But of course the #2 may look better is some designs.
    Anyway, you may use the "onnouseover" and "onmouseout" events to implement #2.
    Example:
    Code:
    <script type="text/javascript">
    function showHide(toShow, toHide) {
      document.getElementById(toShow).style.display ='block';
      document.getElementById(toHide).style.display ='none';
    }
    </script>
    <div onmouseover="showHide('img2', 'img1');" onmouseout="showHide('img1', 'img2');">
    <img id="img1" src="http://www.codingforums.com/images/smilies/confused.gif">
    <img id="img2" src="http://www.codingforums.com/images/smilies/thumbsup.gif" style="display:none;">
    </div>
    Code Review 4U - boost your code and skills for
    being social - JavsScript and C# code reviews.

  • #3
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks - the code works well. However, is there a way I could implemenent text into the script when mouseover or should I just create a graphic with text in it that is used with mouseover?

  • #4
    New Coder
    Join Date
    Oct 2005
    Location
    London, United Kingdom
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    <script type="text/javascript">
    function showHide(toShow, toHide, text) {
      document.getElementById(toShow).style.display = 'block';
      document.getElementById(toHide).style.display = 'none';
      var desc = document.getElementById('description');
      while (desc.firstChild) {
        desc.removeChild(desc.firstChild);
      }
      desc.appendChild(document.createTextNode(text));
    }
    </script>
    <div style="float: left;" onmouseover="showHide('img2', 'img1', 'Use onmouseover/onmouseout!');" onmouseout="showHide('img1', 'img2', 'How to change image and text?');">
    <img id="img1" src="http://www.codingforums.com/images/smilies/confused.gif">
    <img id="img2" src="http://www.codingforums.com/images/smilies/thumbsup.gif" style="display:none;"><br>
    </div>
    <span id="description">How to change image and text?</span>
    Code Review 4U - boost your code and skills for
    being social - JavsScript and C# code reviews.

  • #5
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey man, thanks a lot. That script works even better with the text. I have one question, though. How can I have more than one picture stacked on top of each other (I've tried using the script more than once, plus using <br>, but it doesn't work) like this:







    ??

    Also, I tried changing the font to a different color (in this case white) using Dreamweaver and I can't for some reason. Maybe the time of day has something to do with it, don't know .

    Anyway, thanks again,
    ~obededom~
    Last edited by obededom; 10-14-2005 at 05:34 AM.

  • #6
    New Coder
    Join Date
    Oct 2005
    Location
    London, United Kingdom
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Note the id attribute - it should be unique.
    When add next block of images change the images id and change the showHide calls.
    Code Review 4U - boost your code and skills for
    being social - JavsScript and C# code reviews.

  • #7
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That works (I am able to have more than one). However, it's not really organized. Using Dreamweaver, I was able to get the pictures stacked on top of each other, but during mouseover, the text with every picture appears at the top in the same place.


  •  

    Posting Permissions

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