Just nu i M3-nätverket
Jump to content
Eforum läggs ner i slutet av juni, klicka för att läsa mer

Bildscript

Tobbelobbegåbbe

By Tobbelobbegåbbe,
in Webbutveckling

Recommended Posts

Tobbelobbegåbbe

Tobbelobbegåbbe

Posted
Posted

Hej!

 

Jag söker ett javascript som lägger ett lager ovan på mina bilder i valfri color samt opacity...?

 

Typ såhär:

 

Du har en normal bild, sedan så tar man och väljer en färg, tex. #ffffff och 40% opacity sedan när du rör musen över så ser du bilden som vanligt (alltså utan färglagret)...

 

Jag har sett script som bara reglerar opacityn (alltså inget extra färg lager)

 

Vet någon om ett sådant script? Finns det ens?

 

/Poäng kommer utdelas

/Tacksam för svar...

 

Link to comment
Share on other sites
Anjuna Moon

Anjuna Moon

Posted
Posted

En sån här effekt du tänkt dig?

 

<img style="position:absolute;top:0px;left:0px;" border=1 src="bild.gif">
<div style="position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:#ff0000;filter:alpha(opacity=40);"></div>

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Link to comment
Share on other sites
Tobbelobbegåbbe

Tobbelobbegåbbe

Posted
  • Author
Posted

aa... fast när man håller musen över så ska opacity=0 (man ska inte se bakgrunden)??

 

Link to comment
Share on other sites
Anjuna Moon

Anjuna Moon

Posted
Posted

Ok, här har du ett fullständigt exempel:

 

[log]

<html>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var oLayer;
function Init() {
oLayer=document.getElementById('opLayer')

}
function SetOpacity(n) {
oLayer.style.filter='alpha(opacity:'+n+')';
}

//-->
</SCRIPT>
<body onload="Init();">
<div>
<img style="position:absolute;top:0px;left:0px;" border=1 src="img/logo1.gif">
<div id="opLayer" onmouseover="SetOpacity(0);" onmouseout="SetOpacity(40);" style="position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:#ff0000;filter:alpha(opacity=40);"></div>
</div>
</body></html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Link to comment
Share on other sites
Tobbelobbegåbbe

Tobbelobbegåbbe

Posted
  • Author
Posted

Japp.. precis så... du har fått dina poäng.

 

Men jag undrar om du vet hur man gör en fade när den går från bakgrunden till bilden?

 

Link to comment
Share on other sites
Anjuna Moon

Anjuna Moon

Posted
Posted

Ok, jag har skrivit om scriptet nu så att det fade:ar opacityn, men pga att Timern inte klarar tillräckligt små intervall så blir faden antingen långsam och jämn eller halvsnabb och hackig. Pröva olika värden på 3:e parametern till FadeOpacity (i koden nedan har jag satt stegstorleken till 8).

 

 

[log]

<html>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var nSign,nOpacity,isActive,oLayer,nStartOpacity,nEndOpacity,nTick,oInterval;

function Init() {
oLayer=document.getElementById('opLayer')
}
function SetOpacity(n) {
oLayer.style.filter='alpha(opacity:'+n+')';
}
function FadeOpacity(n1,n2,speed) {
if (!isActive) {
	nOpacity=n1;
}
nEndOpacity=n2;

nSign=(nEndOpacity-nOpacity)/Math.abs(nEndOpacity-nOpacity);
nTick=speed*nSign;
if (!isNaN(nTick)) {
	isActive=true;
	oInterval=setInterval('DoFade()',50);
}
}
function DoFade() {
SetOpacity(nOpacity);
nOpacity+=nTick;	
nTmpSign=(nEndOpacity-nOpacity)/Math.abs(nEndOpacity-nOpacity);
if (nTmpSign!=nSign) {
	SetOpacity(nEndOpacity);
	clearInterval(oInterval);
	isActive=false;
}
}
//-->
</SCRIPT>
<body onload="Init();">
<div>
<img style="position:absolute;top:0px;left:0px;" border=1 src="img/logo1.gif">
<div id="opLayer" onmouseover="FadeOpacity(40,0,8);" onmouseout="FadeOpacity(0,40,8);" style="position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:#ff0000;filter:alpha(opacity=40);"></div>
</div>
</body></html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Link to comment
Share on other sites
Tobbelobbegåbbe

Tobbelobbegåbbe

Posted
  • Author
Posted

Precis så... Tack!

 

Nu undrar jag bara hur man gör så denna effekten funkar på många bilder på samma sida?

 

/Tacksam för svar

 

Link to comment
Share on other sites
Anjuna Moon

Anjuna Moon

Posted
Posted

Hej igen. Nu har jag skrivit om scriptet helt. Nu använder det sig av filtret BlendTrans för faden, blir väldigt snyggt och jämnt fade:at nu. Ändra andra parametern i fadeOut och fadeIn för antal sekunder som faden skall ta.

 

Har även anpassat scriptet så att det fungerar för alla bilder.

 

 

[log]

<html>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

function fadeOut(oLayer,speed) {
   oLayer.style.filter+='blendTrans(duration='+speed+')';
if (oLayer.filters.blendTrans.status != 2) {
       oLayer.filters.blendTrans.apply();
       oLayer.style.visibility="hidden";
       oLayer.filters.blendTrans.play();
   }
}
function fadeIn(oLayer,speed) {
oLayer.style.filter+='blendTrans(duration='+speed+')';
   if (oLayer.filters.blendTrans.status != 2) {
       oLayer.filters.blendTrans.apply();
       oLayer.style.visibility="visible";
       oLayer.filters.blendTrans.play();
   }
}


//-->
</SCRIPT>
<body>
<div>
<img style="position:absolute;top:0px;left:0px;" border=1 src="img/logo1.gif">
<div onmouseover="fadeOut(this,1);" onmouseout="fadeIn(this,1);" style="position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:#ff0000;filter:alpha(opacity=40);"></div>
<img style="position:absolute;top:200px;left:0px;" border=1 src="img/logo1.gif">
<div onmouseover="fadeOut(this,1);" onmouseout="fadeIn(this,1);" style="position:absolute;top:200px;left:0px;width:200px;height:200px;background-color:#ff0000;filter:alpha(opacity=40);"></div>
</div>
</body></html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Link to comment
Share on other sites
Tobbelobbegåbbe

Tobbelobbegåbbe

Posted
  • Author
Posted

Tack ännu en gång... Hur gör man sedan om man vill att bilden ska vara en länk, i och med att ett lager täcker ju bilden där av länken... ska man sätta länken på lagret på något sätt?

 

/Tack på förhand

 

Link to comment
Share on other sites
Anjuna Moon

Anjuna Moon

Posted
Posted

Enklast är att bara lägga länken runt både lagret och bilden:

 

[log]

<a href="www.adr.com">
<img style="position:absolute;top:0px;left:0px;" border=1 src="img/logo1.gif">
<div onmouseover="fadeOut(this,1);" onmouseout="fadeIn(this,1);" style="position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:#ff0000;filter:alpha(opacity=40);"></div>
</a>

[/log]

 

[inlägget ändrat 2004-07-23 13:03:23 av Anjuna Moon]

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing


×
×
  • Create New...