SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to swap image & text at same time

    Hi all,

    I've tried various solutions from online but I cannot get this to do what I want.
    I have a simple image gallery. Click on a thumbnail image and it loads in the main image div.

    These are photos I have to credit for about 5 different people. So, I want to swap the copyright/credits line to credit the proper photographer.

    I have the image swapping done, but am not figuring out how to get the text to change with it. Any suggestions?

    PAGE:
    http://www.optimagfx.com/eventweb/egallery2.aspx


    JAVASCRIPT:
    <script type="text/javascript">

    var pageLoaded;
    function loadEgalleryPage(obj, page)
    {

    pageLoaded = page;

    clearCurrentEgalleryBookSelections();

    obj.className = "current";

    var imgTourBook = document.getElementById("imgEgalleryBook");
    imgTourBook.src = "images/" + page + ".jpg";
    imgTourBook.alt = page;
    }
    function clearCurrentEgalleryBookSelections()
    {
    document.getElementById("etour01").className = "";
    document.getElementById("etour02").className = "";
    document.getElementById("etour03").className = "";
    document.getElementById("etour04").className = "";
    document.getElementById("etour05").className = "";
    document.getElementById("etour06").className = "";
    document.getElementById("etour07").className = "";
    document.getElementById("etour08").className = "";
    }
    </script>

    HTML:
    <div class="mainsub">
    <div class="imagemenu">
    <div><img src="images/09_vin_sm.jpg" id="etour01" onclick="loadEgalleryPage(this, '09_vin');"></div>
    <div><img src="images/10_key_sm.jpg" id="etour02" onclick="loadEgalleryPage(this, '10_key');"></div>
    <div><img src="images/11_duobulbo_Pfizer_sm.jpg" id="etour03" onclick="loadEgalleryPage(this, '11_duobulbo_Pfizer');"></div>
    <div><img src="images/12_IMAG0310_sm.jpg" id="etour04" onclick="loadEgalleryPage(this, '12_IMAG0310');"></div>
    <div><img src="images/13_IMG_0623_sm.jpg" id="etour05" onclick="loadEgalleryPage(this, '13_IMG_0623');"></div>
    <div><img src="images/16_hcl1_sm.jpg" id="etour06" onclick="loadEgalleryPage(this, '16_hcl1');"></div>
    <div><img src="images/17_BUICKrender_sm.jpg" id="etour07" onclick="loadEgalleryPage(this, '17_BUICKrender');"></div>
    <div><img src="images/18_Ford2_sm.jpg" id="etour08" onclick="loadEgalleryPage(this, '18_Ford2');"></div>
    <div>
    <div id="slideshow">
    <div id="slides">
    <ul>
    <li><a href="egallery.aspx"><span>&lt;Back</span></a></li>
    <li><a href="egallery.aspx"><span>1</span></a></li>
    <li><a href="egallery2.aspx"><span>2</span></a></li>
    <li><a href="egallery2.aspx"><span>Next&gt;</span></a></li>
    </ul>
    </div>
    </div>
    <div id="gotomatrix">
    <div id="tomatrix">
    <ul>
    <li><span>For more ideas check out the <a href="matrix.aspx">Product Use Matrix</a></span></li>
    </ul>
    </div>
    </div>

    </div>
    </div>
    <div id="flex">
    <div class="imagebox">
    <p align="center"><img id="imgEgalleryBook" src="images/09_vin.jpg" alt="Exterior" width="554" height="372"></p>
    <p style="text-align:right; margin:-10px 0 2px 0; _margin:-15px 0 -5px 0; *margin:-15px 0 -5px 0; font-size: 9px;">This will be the legal photo copyright/credit text 2008</p>
    </div>
    </div>
    </div>

  2. #2
    Obey the Purebreed trib4lmaniac's Avatar
    Join Date
    Dec 2004
    Location
    Cornwall, UK
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the simplest way to integrate that functionality into your current code would be to add an extra parameter to your loadEgalleryPage function. In all honesty though, your code and markup is a mess and would benefit from some serious restructuring.
    Code JavaScript:
    function loadEgalleryPage(obj, page, copyrightText)
    {
        ...
        document.getElementById("copyrightInfo").innerHTML = copyrightText;
        ...
    }
    HTML Code:
    <img ... onclick="loadEgalleryPage(this, '...', '&copy;2008 Acme Corporation');">
    ...
    <p id="copyrightInfo" style="...">This will be the legal photo copyright/credit text 2008</p>

  3. #3
    SitePoint Enthusiast icky_thump's Avatar
    Join Date
    Nov 2007
    Location
    St. Louis, MO, USA
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked like a charm. That was so easy. ( I don't know JS at all...yet).

    Yeah, I'm pretty new to web, so I'm not surprised by your feedback. I definitely have TONS to learn and it's all a crash course.

    thank you for your help!


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
  •