Results 1 to 2 of 2

Thread: Mouseover fade in cleanup

  1. #1
    Join Date
    Mar 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mouseover fade in cleanup

    Hello

    I have adapted a dd script for the motion gallery and fade in mouseovers to use in my site and I was wondering if it was possible to use less code. Is it possible to have the opacity filters, mouseovers and borders written only once and then call it every time u mouseover an image. I am new to this so I apologise now if that doesnt make sense.
    code:
    <html>

    <head>

    <link href="css1.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" type="text/css" href="gallerystyle.css" />

    <script type="text/javascript" src="motiongallery.js">

    /***********************************************
    * CMotion Image Gallery- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/

    </script>
    <script language="JavaScript1.2">

    //Highlight image script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use

    function makevisible(cur,which){
    strength=(which==0)? 1 : 0.5

    if (cur.style.MozOpacity)
    cur.style.MozOpacity=strength
    else if (cur.filters)
    cur.filters.alpha.opacity=strength*100
    }

    </script>

    <style type="text/css">
    .roll2{
    margin-left:17px;
    }
    </style>
    </head>

    <body>
    <div class="container">
    <div class="testbox"><div id="motioncontainer" style="position:relative;width:649px;height:76px;overflow:hidden;">
    <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
    <nobr id="trueContainer"> <a href="#"><img src="pic/ro1bb.jpg" style="filter:alpha(opacity=50);-moz-opacity:0.5" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" border="0"></a>
    <a href="#"><img src="pic/ro2bb.jpg" style="filter:alpha(opacity=50);-moz-opacity:0.5" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" border="0" class="roll2"></a>
    <a href="#"><img src="pic/ro3bb.jpg" style="filter:alpha(opacity=50);-moz-opacity:0.5" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" border="0" class="roll2"></a>
    <a href="#"><img src="pic/ro4bb.jpg" style="filter:alpha(opacity=50);-moz-opacity:0.5" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" border="0" class="roll2"></a>
    <a href="#"><img src="pic/ro5bb.jpg" style="filter:alpha(opacity=50);-moz-opacity:0.5" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" border="0" class="roll2"></a></nobr></div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    code/

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The style can be applied via a style section in the head or add just the rule (red) to your external stylesheet:

    Code:
    <style type="text/css">
    #trueContainer img {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    }
    </style>
    Script code can assign the events to the images:

    Code:
    for (var i_tem = 0; i_tem < document.images.length; i_tem++)
    if ( document.images.parentNode.parentNode.id=='trueContainer' ){
    document.images[i_tem].onmouseover=function(){makevisible(this,0)}
    document.images[i_tem].onmouseout=function(){makevisible(this,1)}
    }
    This could go in the fillup() function:

    Code:
    function fillup(){
    if (iedom){
    crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
    menuwidth=parseInt(crossmain.style.width)
    mainobjoffset=getposOffset(crossmain, "left")
    cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
    actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth
    
    crossmain.onmousemove=function(e){
    motionengine(e)
    }
    
    crossmain.onmouseout=function(e){
    stopmotion(e)
    showhidediv("hidden")
    }
    }
    loadedyes=1
    if (endofgallerymsg!=""){
    creatediv()
    positiondiv()
    }
    for (var i_tem = 0; i_tem < document.images.length; i_tem++)
    if ( document.images.parentNode.parentNode.id=='trueContainer' ){
    document.images[i_tem].onmouseover=function(){makevisible(this,0)}
    document.images[i_tem].onmouseout=function(){makevisible(this,1)}
    }
    }
    You will still need the Highlight image script on or linked to your page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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