SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: onClick - Help!

  1. #1
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onClick - Help!

    Hi,

    I'm trying to create a portfolio display where my thumbnails are across the bottom of the page and the appropriate larger image displays (as you click each thumbnail) above the thumbnails and to the left side. Above and to the right side, I want the text about the project to appear. I've been able to get the thumbnails to click and make a larger image appear, but I haven't a clue as to how to get the text to change with each thumbnail click as well. Here's what I've done so far.

    Code:
    <script language="javascript">
    <!--
    function changePict(pict){
    document.pictToChange.src=pict
    }
    //-->
    </script>
    . The html/javascript code for the thumbnails:
    Code:
    <a href="#" onClick="changePict('/images/test.gif')"><img src="/images/test_thumb.gif" width="63" height="58" /></a>
    and the placeholder is defined in an image tag
    Code:
    <img src="test.gif" name="pictToChange" />
    at the location where the larger display images should show.

    I tried inserting
    Code:
    "document.write('insert project description here')
    in the "onCLick="changePict..." (along with the other function (?changePict) but then it just opens a new window with the text before displaying the larger image properly (depending on which browser you have...)

    The three sections are laid out as divs and I'm trying to avoid making the project description text an image. I'm trying to stick with pure CSS (still learning!)

    Can someone help me with this?

    You can see what I'm doing at http://www.eodweb.com/draft/portfolio.htm

    Thanks!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  2. #2
    SitePoint Zealot CatsEyeDesigns's Avatar
    Join Date
    Dec 2003
    Location
    Florida
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm not Javascript expert, but this works in IE 5,6. As far as other browsers, I'm not sure, so you'll have to test it. Also, I'm not certain that this is the best solution, but it should provide you with the functionality you need.

    Code:
    <a onclick="text1.style.visibility='visible';  text2.style.visibility='hidden'; window.status='';">Show 1</a>
    <a onclick="text2.style.visibility='visible';  text1.style.visibility='hidden'; window.status='';">Show 2</a>
    
    <div style="visibility: hidden;" id="text1">This is the text to show when link one is clicked</div>
    <div style="visibility: visible;" id="text2">This is the text to show when link two is clicked</div>


Bookmarks

Posting Permissions

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