dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Trying to Fade in and Fade out Div on Mouseover event

  1. #1
    Join Date
    Mar 2012
    Posts
    5

    Angry Trying to Fade in and Fade out Div on Mouseover event

    When somebody hovers over main image, I have a DIV that pops up. I want it to Fade In and Fade Out, but I am unsure how to script this using what I have. Can anybody help?


    <script language="Javascript">
    <!--
    function toggleDiv(id,flagit) {
    if (flagit=="1"){
    if (document.layers) document.layers[''+id+''].visibility = "show"
    else if (document.all) document.all[''+id+''].style.visibility = "visible"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    else
    if (flagit=="0"){
    if (document.layers) document.layers[''+id+''].visibility = "hide"
    else if (document.all) document.all[''+id+''].style.visibility = "hidden"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
    }
    //-->
    </script>


    <a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)"><img src="images/dasso-flooring-rotator.png" alt="" title="#htmlcaption1" /></a>
    <a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)"><img src="images/dasso-xtr-rotator.png" alt="" title="#htmlcaption2" /></a>
    <a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',0)"><img src="images/dasso-elements-rotator.png" alt="" title="#htmlcaption3" /></a>
    <a href="#" onMouseOver="toggleDiv('div4',1)" onMouseOut="toggleDiv('div4',0)"><img src="images/dasso-furnishings-rotator.png" alt="" title="#htmlcaption4" /></a>
    <a href="#" onMouseOver="toggleDiv('div5',1)" onMouseOut="toggleDiv('div5',0)"><img src="images/dasso-architectural-rotator.png" alt="" title="#htmlcaption5" /></a>
    <a href="#" onMouseOver="toggleDiv('div6',1)" onMouseOut="toggleDiv('div6',0)"><img src="images/dasso-innovations-rotator.png" alt="" title="#htmlcaption6" /></a>
    </div>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    First: learn the JavaScript language, at least the basis. What you have in your code is medieval. There is no document.layers since the death of Netscape, about 10 years ago, and document.all reference is a Jurassic way to catch the IE browsers.

  3. #3
    Join Date
    Mar 2012
    Posts
    5

    Help

    Its been working for what I was trying to do except for the fade in. So while I appreciate the fact that it may not be as current as you like, I am still asking for some help getting this working.

    Thank you.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  5. #5
    Join Date
    Mar 2012
    Posts
    14
    GHgraphix, I understand the frustration of coming for help and feeling like you are being criticized but frankly he is right. It would be worth your while to read a current JavaScript book, and even if you just have it for reference I'm sure it will be useful. Also, just because something works doesn't mean it is a good practice. When you write code the idea is not to have to rewrite it for as long as humanly possible right? Well in order to do that you need to avoid bad practices and using deprecated methods. It would also be a good idea to stay away from methods that aren't supported by all current browsers to maximize the audience of your web page.

    Also, to avoid people generally not wanting to answer your questions on a forum, the best thing to do is google the crap out of every possible phrasing of your question. It will also reduce the chance of being chastized for something that is so readily available on the web.

    JavaScript can be a complex beast but such a valuable asset if mastered. Best of luck.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles