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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Highlight the active thumbnail in a slideshow

    Hi,

    Here's the slideshow embed code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html> 
    <head> 
    <title>Slideshow</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
    #thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
    img {padding:1px; width:80px; height:60px;}
    img:hover {background:#00F;}
    </style>
    </head> 
    <body> 
    <div id="large"></div>  
    <div id="thumbs"> 
    <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">  
    <img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';"> 
    <img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
    </div> 
    </body>
    </html>
    I wonder how I can highlight the active thumbnail so its background remains blue until I click another one.
    I also like to avoid the inline JavaScript. Any feedback to improve the coding is appreciated!

    Best regards
    Mike

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,212
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    If you want to avoid inline JS, then why is the existing code 100% inline JS??

    Ah, well...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html> 
    <head> 
    <title>Slideshow</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #large {
        width:448px; height:336px; 
        background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-
    
    repeat center;}
    #thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
    #thumbs img {padding:1px; width:80px; height:60px; border: white 3px solid;}
    #thumbs img:hover {background:#00F;}
    </style>
    <script type="text/javascript">
    var fullsize = [
        "http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg",
        "http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg",
        "http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg"
        ];
    
    function pickOne(which)
    {
        var tnails = document.getElementById("thumbs").getElementsByTagName("img");
        for ( var t = 0; t < tnails.length; ++t )
        {
            var tnail = tnails[t];
            tnail.style.borderColor = (tnail == which) ? "blue" : "white";
        }
        var bgi = "url('" + fullsize[parseInt(which.alt)] + "')";
        document.getElementById("large").style.backgroundImage = bgi;
    }
    function setUp( )
    {
        var tnails = document.getElementById("thumbs").getElementsByTagName("img");
        for ( var t = 0; t < tnails.length; ++t )
        {
            var tnail = tnails[t];
            tnail.onclick = function() { pickOne(this); }
        }
    }
    window.onload = setUp;
    </script>
    </head> 
    <body> 
    <div id="large"></div>  
    <div id="thumbs"> 
    <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" 
         alt="0" style="border-color: blue;"/> 
    <img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="1"/> 
    <img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="2"/> </div> 
    </body>
    </html>
    Like that?

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Old Pedant View Post
    If you want to avoid inline JS, then why is the existing code 100% inline JS??
    I think the OP doesn't know how to avoid inline scripting and so used it in their code and is now asking for help on how to not use inline js.

    You're also using the alt attribute to identify the img when alt is meant to be meaningful alternate text to describe the contents of the image.

    Imo a better way to do what you are doing is to assign a user defined property to the img and use it for what you are using alt for.
    Last edited by bullant; 07-09-2011 at 06:33 AM.

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    If you want to avoid inline JS, then why is the existing code 100% inline JS??
    Thanks or the answer! I'm a JavaScript newbie and don't know how to do it.

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    Imo a better way to do what you are doing is to assign a user defined property to the img and use it for what you are using alt for.
    I'd be grateful if you could provide a sample code.

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Rain Lover View Post
    I'd be grateful if you could provide a sample code.
    If you want to add a user defined attribute/property to an <img> or some other object, you could do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                window.onload=function(){
                    var myImgO = document.getElementById('myImg');
                    myImgO.myProperty = 'My Value';  //the img object now has a attribute/property called myProperty
    
                    alert('myImgO.myProperty = '+myImgO.myProperty); //for testing
                }
            </script>
        </head>
        <body>
            <div>
                <img id="myImg" src="num1.jpg" alt="Pic of num1" />
            </div>
        </body>
    </html>

  • #8
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    If you want to add a user defined attribute/property to an <img> or some other object, you could do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                window.onload=function(){
                    var myImgO = document.getElementById('myImg');
                    myImgO.myProperty = 'My Value';  //the img object now has a attribute/property called myProperty
    
                    alert('myImgO.myProperty = '+myImgO.myProperty); //for testing
                }
            </script>
        </head>
        <body>
            <div>
                <img id="myImg" src="num1.jpg" alt="Pic of num1" />
            </div>
        </body>
    </html>
    Educational! Thanks!

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Posting Permissions

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