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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide div & change image>>Need Help

    Hi There I have written a script that should do the following:

    1- Click on add.png that changes in the minus.png , opens a hidden DIV with text and changes a photo all at the same time.
    2- When then the delete.png is clicked everything has to go back to the original situation.

    What does not work:
    1- the add.png does not change into delete.png
    2- the photo does not reset to the original one when the div is closed.

    Here is my code:


    <script language="Javascript 1.2" type="text/javascript">
    function show(id)

    {
    el = document.getElementById(id);
    if (el.style.display == 'none')
    {
    el.style.display = '';
    el = document.getElementById('more' + id);
    el.innerHTML.thisImage = 'images/add.png';
    } else {
    el.style.display = 'none';
    el = document.getElementById('more' + id);
    el.innerHTML.thisImage = 'images/delete.png';
    }
    }

    function change_pic(val) {
    document.getElementById('image_name').src = val;

    }

    </script>

    Here is the HTML

    <div class="foto">
    <img name="image_name" id="image_name" src="../images/AllCd.jpg" border="0" alt="i">
    </div>


    <p><strong> Olthuis</strong>
    <a id="moreinfo" href="# " onclick="javascript:show('info'), change_pic('../images/Olthuis.jpg'); return false;">
    <img src="add.png" ></a></p>
    <div id="info" style="display: none">
    BLABLABLA text
    </div>
    <p><strong>Teddy </strong> -
    <a id="moreinfo2" href="#" onclick="javascript:show('info2'), change_pic('../images/teddy.jpg'); return false;">
    <img src=".add.png" ></a></p>
    <div id="info2" style="display: none">
    BLABLABLA text
    </div>
    <p><strong>Hermr</strong>
    <a id="moreinfo3" href="#" onclick="javascript:show('info3'), change_pic('../images/ermine.jpg'); return false;">
    <img src="add.png" ></a></p>
    <div id="info3" style="display: none">
    BLABLABLA text
    </div></div></div>

    THANK YOU!

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    The top sticky in this forum suggests wrapping your code in appropriate tags to make it easier to read.

    I'm unfamiliar with the thisImage function ( el.innerHTML.thisImage ). Where did you find that?

    img src in the second block is wrong. It has a preceding .

    Where is your function or function call changing the image back to the original?

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide & cahnge picture

    Thanks for your reply! I will use a cleaner code to explain the issue.
    Lets say that I want the script below to:

    - change picture in a div which is on another place in the page
    - and that instead of clicking on a link (to open the divs & change the picture) I want to use images/icons.

    I hope you can help.

    <head>
    /*
    This code is based on a code example from the article "Javascript navigation - cleaner, not meaner" by Christian Heilmann
    URL: http://www.evolt.org/article/Javascr...273/index.html
    */

    function initShowHide() {
    if (document.getElementById && document.getElementsByTagName && document.createTextNode) {
    hide();
    var toggle = document.getElementById('toggle');
    var as = toggle.getElementsByTagName('a');
    for (var i = 0; i < as.length; i++) {
    as[i].onclick = function() {
    show(this);
    return false;
    }
    }
    }
    }

    function show(s) {
    hide();
    var id = s.href.match(/#(\w.+)/)[1];
    document.getElementById(id).style.display = 'block';
    }

    function hide() {
    var toggleable = document.getElementById('toggleable').getElementsByTagName('div');
    for (var i = 0; i < toggleable.length; i++) {
    toggleable[i].style.display = 'none';
    }
    }
    window.onload = initShowHide;
    </head>
    <body>
    <body>
    <ul id="toggle">

    <li><a href="#why">Why</a></li>
    <li><a href="#now">Now</a></li>
    <li><a href="#brown">Brown</a></li>
    <li><a href="#cow">Cow</a></li>
    </ul>
    <div id="toggleable">
    <div id="why">

    <h2>Why</h2>
    <p><img src="why.jpg" alt="Why" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris blandit. Maecenas lorem eros, sollicitudin accumsan, congue quis, sollicitudin vel, elit.</p>
    </div>
    <div id="now">
    <h2>Now</h2>
    <p><img src="now.jpg" alt="Now" /> Duis lectus mauris, vehicula sit amet, nonummy nec, adipiscing ut, orci. Etiam placerat eros sed risus. </p>
    </div>
    <div id="brown">
    <h2>Brown</h2>
    <p><img src="brown.jpg" alt="Brown" /> Suspendisse blandit dolor eget sapien. Nunc lacinia semper justo. Suspendisse nec felis ac tellus aliquet dictum. In tortor tellus, auctor ac, luctus vel, interdum nec, nisl. Ut ut justo a nulla fringilla rhoncus. Aenean ac ligula. </p>
    </div>
    <div id="cow">
    <h2>Cow</h2>

    <p><img src="cow.jpg" alt="Cow" /> Etiam tempor, felis vitae condimentum aliquet, nunc felis suscipit tellus, vel lobortis ante nisl sed quam. Curabitur placerat metus vel ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
    </div>
    </div>
    </body>
    </html>

    </body>
    </html>

  • #4
    New Coder
    Join Date
    Nov 2003
    Location
    San Francisco
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts
    JS in head:

    Code:
    // Last section displayed
    var last = 1000
    // Same section toggle
    var on = true
    // Pre-load image array with images
    var pix = new Array()
    pix[0] = new Image()
    pix[0].src = '../images/Olthuis.jpg'
    pix[1] = new Image()
    pix[1].src = '../images/teddy.jpg''
    pix[2] = new Image()
    pix[2].src = '../images/ermine.jpg'
    
    function show(next){
    // Display new image & section contents
    document.getElementById('image_name').src = pix[next].src
    document.getElementById('state'+next).src = 'images/delete.png'
    document.getElementById('info'+next).style.display = 'block'
    // If another section is displayed hide it
    if(last != 1000 && last != next){
    document.getElementById('state'+last).src = 'images/add.png'
    document.getElementById('info'+last).style.display = 'none'
    }
    // If toggling same section
    if(next == last){
    if(on == true){
    document.getElementById('state'+last).src = 'images/add.png'
    document.getElementById('info'+last).style.display = 'none'
    document.getElementById('image_name').src = '../images/AllCd.jpg'
    on = false
    }else{
    on = true
    }
    }
    last = next
    }
    HTML on page:

    Code:
    <div class="foto">
    <img id="image_name" src="../images/AllCd.jpg" border="0" alt="i">
    </div>
    
    <p><strong>Olthuis</strong>
    <a href="javascript:show(0)">
    <img id="state0" src="images/add.png" ></a></p>
    <div id="info0" style="display: none">
    BLABLABLA text
    </div>
    
    <p><strong> Teddy</strong>
    <a href="javascript:show(1)">
    <img id="state1" src="images/add.png" ></a></p>
    <div id="info1" style="display: none">
    BLABLABLA text
    </div>
    
    <p><strong>Hermr</strong>
    <a href="javascript:show(2)">
    <img id="state2" src="images/add.png" ></a></p>
    <div id="info2" style="display: none">
    BLABLABLA text
    </div>
    Have not tried it I think it'll work. -cc
    Last edited by ccemmett; 05-11-2008 at 10:17 PM.

  • #5
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up THANK YOU -> ccemmett

    Hi Ccemmett,

    Thank you for your help. I will try the script when I come back form holiday but it loos good indeed.

    Until June
    Webill


  •  

    Posting Permissions

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