Mouseover fade in cleanup [Archive]

jamie smith

04-12-2006, 10:03 AM

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

jscheuer1

04-12-2006, 04:53 PM

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

<style type="text/css">
#trueContainer img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
</style>

Script code can assign the events to the images:

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:

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.