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

Thread: Javascript Opacity Rollover Image

  1. #1
    Join Date
    Aug 2015
    Posts
    1

    Post Javascript Opacity Rollover Image

    Seem to be having difficulty making images reduce in opacity to have a "fading" effect with the following coding:

    I know all I need to do is modify the "mouseover" options to add "opacity" but can't seem to figure it out. Have it down in theory, failing miserably with execution.

    The site is in two parts, using the <---include--> system. The first group of code is for the actual .js file while the other group of coding is for the actual webpage itself.

    .js coding:

    <!--
    if (document.images) {
    img1on = new Image();
    img1on.src = "images/rollovers/Heritage2.gif";
    img2on = new Image();
    img2on.src = "images/rollovers/Northfield2.gif";
    img3on = new Image();
    img3on.src = "images/rollovers/Ridgeway2.gif";
    img4on = new Image();
    img4on.src = "images/rollovers/Estates2.gif";
    img5on = new Image();
    img5on.src = "images/rollovers/GlenRoyal2.gif";

    img1off = new Image();
    img1off.src = "images/rollovers/Heritage1.gif";
    img2off = new Image();
    img2off.src = "images/rollovers/Northfield1.gif";
    img3off = new Image();
    img3off.src = "images/rollovers/Ridgeway1.gif";
    img4off = new Image();
    img4off.src = "images/rollovers/Estates1.gif";
    img5off = new Image();
    img5off.src = "images/rollovers/GlenRoyal1.gif";


    }

    function imgOn(imgName) {
    if (document.images) {
    document[imgName].src = eval(imgName + "on.src");
    document.aptName.src = 'images/rollovers/' + imgName + '.gif';

    }
    }

    function imgOff(imgName) {
    if (document.images) {
    document[imgName].src = eval(imgName + "off.src");
    document.aptName.src = 'images/rollovers/blank.gif';
    }
    }



    // -->


    .asp coding

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <!-- Begin Nested Table for Property Navbar --><title>properties</title>

    </head>
    <body>
    <table id="Table2" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="950">
    <tbody>
    <tr>
    <td class="maintext" align="left" width="950"><font color="black">&nbsp; Select
    a property to view specific information<br><br><br></font><img src="images/spacer.gif" height="1" width="120"></td>
    </tr>
    <tr>
    <td align="center" width="875"> <a href="heritage.asp" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')"> <img style="border: 0px solid ; width: 175px; height: 175px;" alt="" src="images/rollovers/Heritage1.gif" name="img1"></a>
    &nbsp;&nbsp; <a href="northfield.asp" onmouseover="imgOn('img2')" onmouseout="imgOff('img2')">
    <img style="border: 0px solid ; width: 175px; height: 175px;" alt="" src="images/rollovers/Northfield1.gif" name="img2"></a>&nbsp;&nbsp;
    <a href="ridgeway.asp" onmouseover="imgOn('img3')" onmouseout="imgOff('img3')"><img style="border: 0px solid ; width: 175px; height: 175px;" alt="" src="images/rollovers/Ridgeway1.gif" name="img3"></a>
    &nbsp;&nbsp; <a href="estates.asp" onmouseover="imgOn('img4')" onmouseout="imgOff('img4')">
    <img style="border: 0px solid ; width: 175px; height: 175px;" alt="" src="images/rollovers/Estates1.gif" name="img4"></a>&nbsp;&nbsp;
    <a href="http://www.glenroyalcondo.com" onmouseover="imgOn('img5')" onmouseout="imgOff('img5')"><img style="border: 0px solid ; width: 175px; height: 175px;" alt="" src="images/rollovers/GlenRoyal1.gif" name="img5"></a> <br>
    </td>
    </tr>
    </tbody>
    </table>
    <br><br>
    <!-- End Nested Table for Property Navbar -->
    </body></html>

  2. #2
    Join Date
    Mar 2015
    Posts
    251
    Welcome to the site.

    As an FYI, this might be easier to do the whole thing with css. But since you already have a javascript code you're happy with, just add a css that changes the opacity to 0 on hover. You can add an easing to it so it fades nicely. Here's a cheat sheet page for that (copy and paste the site):
    Code:
    http://easings.net/
    Also, your code is a mess.

    Not going to list everything, but here are a couple BIG issues:
    - you gave the elements in your table ids / classes, but you're still using inline commands
    - there's no need for <tbody> since there is no <thead> or <tfoot>

    For example, just cleaning up this:
    Code:
    <table id="Table2" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="950">
    <tbody>
    <tr>
    <td class="maintext" align="left" width="950"><font color="black">&nbsp; Select
    a property to view specific information<br><br><br></font><img src="images/spacer.gif" height="1" width="120"></td>
    </tr>
    becomes this:
    Code:
    html:
     <table id="Table2" >
    <tr>
    <td class="maintext">Select 
    a property to view specific information</td>
    </tr>
    
    
    css:
    #Table2 {background:#fff; width:950px; 
        border-spacing:0;}
    #Table2 td { padding: 0px;}
    .maintext {color:#000; width:100%; 
    padding-left:1em; padding-bottom:5em; }

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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