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 2 of 2

Thread: jQuery fading

  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery fading

    Having an issue with jQuery on this doc. I want to have all thumbnails should initially be displayed faded to 30%. Then on the thumbnails when hovered, the thumbnail should be faded in to full opacity and back to 30% when not hovered.

    Thanks for any help

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Farm Animals</title>
        <script type="text/javascript">
            var holsteinDescr = "Holstein cows. Holsteins are the most common breed of cows on dairy farms.  They typically produce up to sixty pounds of milk per day.";
            var herefordDescr = "Hereford cattle are a beef cattle breed, widely used both in intemperate areas and temperate areas, mainly for meat production. "+
    "Originally from Herefordshire, England, more than five million pedigree Hereford cattle now exist in over 50 countries. "+
    "The Hereford cattle export trade began from United Kingdom in 1817.";
            var pigDescr = "Pigs are mammals. Baby pigs are called piglets. "+
    "Pigs can be eaten for food as pork, ham, and bacon. "+
    "The Jewish and Muslim religions, and some Christian denominations, teach that eating pork is wrong.";
        
            function showImage(clickImg)
            {
                var dest = document.getElementById("dest");
                dest.src=clickImg.src;
                dest.alt=clickImg.alt;
                var descr = document.getElementById("descr")
                if (clickImg.alt == "holstein")
                {
                    descr.innerHTML = holsteinDescr;
                }    
                if (clickImg.alt == "hereford")
                {
                    descr.innerHTML = herefordDescr;
                } 
                if (clickImg.alt == "pig")
                    descr.innerHTML = pigDescr;  
            }
            
            function hilite(hiImg)
            {
    			hiImg.style.borderWidth = "4px";
    			hiImg.style.borderStyle = "solid";
    			hiImg.style.borderColor = "blue";
            }
            
            function lolite(x)
            {
    			x.style.borderWidth = "0px";
            }
    
        </script>
        <style type="text/css">
            .clickable  { cursor:pointer; height:50px; width:50px}
            .thumbTD    { width:60px; height:60px }
            caption     { font-size:18pt; }
            table       { border:0px }
            #dest       { width:400px; height:400px }
            #descr      { width:420px }
            #leftColumn { vertical-align:top }
        </style>
      </head>
      <body>
        <table>
            <caption>Select image on left for more information.</caption>
            <tr>
                <td id="leftColumn">
                    <table>
                        <tr>
                            <td class="thumbTD">
                                <img id="Holstein" class="clickable" onmouseover="hilite(this);" onmouseout="lolite(this);" onclick="showImage(this)" src="holstein.jpg" alt="holstein"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="thumbTD">
                                <img id="Hereford" class="clickable" onmouseover="hilite(this);" onmouseout="lolite(this);" onclick="showImage(this)" src="hereford.jpg" alt="hereford" />
                            </td>
                        </tr>
                        <tr>
                            <td class="thumbTD">
                                <img id="Pig" class="clickable" onmouseover="hilite(this);" onmouseout="lolite(this);" onclick="showImage(this)" src="pig.jpg" alt="pig" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table>
                        <tr>
                            <td><img id="dest" src="blank.jpg" alt="blank" /></td>
                        </tr>
                        <tr>
                            <td id="descr" >&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
      </body>
    </html>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you don't have a refenrce to the jQuery library file, and you don't have a single line of jQuery in your example.....


  •  

    Posting Permissions

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