Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Bildscript

Tobbelobbegåbbe

Startad av Tobbelobbegåbbe,
i Webbutveckling

Rekommendera Poster

Tobbelobbegåbbe

Tobbelobbegåbbe

Postad
Postad

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...

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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/

 

Länk till kommentar
Dela på andra webbplatser
Tobbelobbegåbbe

Tobbelobbegåbbe

Postad
  • Trådskapare
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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/

 

Länk till kommentar
Dela på andra webbplatser
Tobbelobbegåbbe

Tobbelobbegåbbe

Postad
  • Trådskapare
Postad

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?

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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/

 

Länk till kommentar
Dela på andra webbplatser
Tobbelobbegåbbe

Tobbelobbegåbbe

Postad
  • Trådskapare
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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/

 

Länk till kommentar
Dela på andra webbplatser
Tobbelobbegåbbe

Tobbelobbegåbbe

Postad
  • Trådskapare
Postad

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

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

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]

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...