Avatar billede calo2 Nybegynder
06. juli 2005 - 21:40 Der er 20 kommentarer og
2 løsninger

Simpel kode til at fade billeder ned og op

Hej!

Mangler en kode der gør at mine billeder vises ned fadet til 50%. Når man så holder musen over billedet skal fade til 100%

Har søgt lidt og fundet en del!-dog er der ingen af de koder jeg har fundet der virker i Firefox:-( Det er et krav.

Håber der er en som kan hjælpe med dette.
Avatar billede miss-g Seniormester
06. juli 2005 - 22:57 #1
I think this technique is particularly useful and unique- using JavaScript to change the opacity of an image! The technique works in both IE4+ and NS6+, and can be used to create some interesting "fading" effects. Let's get started!

http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=3206&lngWId=2
Avatar billede miss-g Seniormester
06. juli 2005 - 22:58 #2
Ups - læste det som netscape og du søger et script til firefox...

Hvis ovenstående ikke virker, så afviser du mig bare.
Avatar billede ysubhi Nybegynder
06. juli 2005 - 23:05 #3
<script language="javascript">
function fade(hest,hjort){
if (hjort == 'in'){
hest.style.MozOpacity = '0.5';
hest.style.filter = 'alpha(Opacity=50)';
}
if (hjort == 'out'){
hest.style.MozOpacity = '1';
hest.style.filter = 'alpha(Opacity=100)';
}
}
</script>

<img src="" onmouseover="fade(this,'in');" onmouseout="fade(this,'out');" id="billede">
Avatar billede miss-g Seniormester
06. juli 2005 - 23:06 #4
Hedder Firefox Mozilla Firefox?? For så tror jeg ovenstående (link) virker...

--------------------

<script><script type="text/javascript">

    function lightup(imageobject, opacity){
    if (navigator.appName.indexOf("Netscape")!=-1&&parseInt(navigator.appVersion)>=5)
    imageobject.style.MozOpacity=opacity/100
    else if (navigator.appName.indexOf("Microsoft")!=-1&&parseInt(navigator.appVersion)>=4)
    imageobject.filters.alpha.opacity=opacity
}
</script>
--------------
<img src="test.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5"
onMouseover="lightup(this, 100)" onMouseout="lightup(this, 30)">
Avatar billede calo2 Nybegynder
06. juli 2005 - 23:35 #5
Hej. Vender lige tilbage til jer engang i morgen når jeg har fået afprøvet det.

En lille ting. Hvordan skal koden se ud hvis jeg også ønsker at linke fra billedt der fader. Så adressen åbner i et nyt vindue.

.... Hvad skal evt. tilføjes i koden ....

<script language="javascript">
function fade(hest,hjort){
if (hjort == 'in'){
hest.style.MozOpacity = '0.5';
hest.style.filter = 'alpha(Opacity=50)';
}
if (hjort == 'out'){
hest.style.MozOpacity = '1';
hest.style.filter = 'alpha(Opacity=100)';
}
}
</script>

<img src="" onmouseover="fade(this,'in');" onmouseout="fade(this,'out');" id="billede">
Avatar billede calo2 Nybegynder
06. juli 2005 - 23:37 #6
Og lige en lille ting mere... Hvor skal jeg indtaste adressen til selve billedet i koden? Undskyld hvis jeg spørg om noget man brude vide... Men skal lige ha´det lært med al det kode;-)
Avatar billede roenving Novice
07. juli 2005 - 01:33 #7
-- måske kunne du også kigge på min kode (jeg har ikke checket de andres links !-)

http://roenving.users.whitehat.dk/WD5Opacity.html
Avatar billede miss-g Seniormester
07. juli 2005 - 09:32 #8
Et billede med link til en side på internettet og ovenstående kode:

<a href="www.internetside.dk" target="_blank"><img src="reklamer/bsbutton.gif" alt="" width="90" height="30" border="0" onmouseover="fade(this,'in');" onmouseout="fade(this,'out');" id="billede"></a>
Avatar billede calo2 Nybegynder
07. juli 2005 - 22:00 #9
Hej! Har ikke fået det helt til at virke?


Har forsøgt mig medfølgende kode, men her starter billedet med at være 100% indtil man kører musen over det en gang. Derefter virker det mere eller mindre efter hensigten.

Det skulle gerne være sådan at billedet er nedfadet til 50% fra start og det så fader op til 100% ved en mouseover.

Hvis det er muligt må det meget gerne fade langsomt op. Se evt. et eks. her--> http://www.mobilegamer.dk/  (Bemærk at man kun kan se effekten i IE) Effekten findes i højre side af siden under partner. Ville rigtig gerne havde en funktion mangen til på min side, dog hvor den også virker i Firefox.

Håber i kan se hvad der går galt i nedestående forsøg;-)
---------------------
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 1</title>



</head>

<body>


<script language="javascript">
function fade(hest,hjort){
if (hjort == 'in'){
hest.style.MozOpacity = '1';
hest.style.filter = 'alpha(Opacity=100)';
}
if (hjort == 'out'){
hest.style.MozOpacity = '0.5';
hest.style.filter = 'alpha(Opacity=50)';
}
}
</script>

<img src="../Dokumenter/Mine%20websider/Lau-d/opbyggelse_index/baad.jpg" onmouseover="fade(this,'in');" onmouseout="fade(this,'out');" id="billede">


</body>

</html>

----------------------
Avatar billede ysubhi Nybegynder
07. juli 2005 - 22:06 #10
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 1</title>
#billede{
filter : alpha(Opacity=50);
-moz-opacity : 0.5;
}
</style>
<script language="javascript">
function fade(hest,hjort){
if (hjort == 'in'){
hest.style.MozOpacity = '1';
hest.style.filter = 'alpha(Opacity=100)';
}
if (hjort == 'out'){
hest.style.MozOpacity = '0.5';
hest.style.filter = 'alpha(Opacity=50)';
}
}
</script>

</head>

<body>




<img src="../Dokumenter/Mine%20websider/Lau-d/opbyggelse_index/baad.jpg" onmouseover="fade(this,'in');" onmouseout="fade(this,'out');" id="billede">


</body>

</html>
Avatar billede ysubhi Nybegynder
07. juli 2005 - 22:08 #11
jeg glemte style-tag i den sidste. :0) her er det rettet

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 1</title>
<style>
#billede{
filter : alpha(Opacity=50);
-moz-opacity : 0.5;
}
</style>
<script language="javascript">
function fade(hest,hjort){
if (hjort == 'in'){
hest.style.MozOpacity = '1';
hest.style.filter = 'alpha(Opacity=100)';
}
if (hjort == 'out'){
hest.style.MozOpacity = '0.5';
hest.style.filter = 'alpha(Opacity=50)';
}
}
</script>

</head>

<body>




<img src="../Dokumenter/Mine%20websider/Lau-d/opbyggelse_index/baad.jpg" onmouseover="fade(this,'in');" onmouseout="fade(this,'out');" id="billede">


</body>

</html>
Avatar billede ysubhi Nybegynder
07. juli 2005 - 22:09 #12
det skal lige siges, at hvis du gerne vil have en langsomt fade-effekt, skal du nok hellere kigge på roenvings forslag :)
Avatar billede calo2 Nybegynder
07. juli 2005 - 22:21 #13
Hej!

Sad lige og rodet med lidt.

Nu virker denne kode både i IE og FireFox:-D

<html>

<head>
<base>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 1</title>


<script language="JavaScript1.2">
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

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


</head>

<body>

<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
    <tr>
       
       
        <td>
       
       
        <img border="0" src="file:///C:/Documents%20and%20Settings/Claus/Dokumenter/Mine%20websider/Lau-p/opbyggelse_index/tv_hifi.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" width="205" height="98"></td>
    </tr>
</table>

</body>

</html>


-----------

Er der en af jer der kan rette noget i den, så den evt. fader langsomt op? På forhånd tak.
Avatar billede ysubhi Nybegynder
07. juli 2005 - 22:22 #14
Avatar billede calo2 Nybegynder
08. juli 2005 - 09:36 #15
Hej igen.

Har lige prøvet at indsætte koden fra http://roenving.users.whitehat.dk/Kode/WD5Kode.html Der er en lille ting ved koden som ikke virker? Billedet er fadet i både IE & FireFox, men fader kun op i IE ved mouseover. I FireFox forbliver billedet nedfadet når man holder musen over billedet?
Avatar billede roenving Novice
08. juli 2005 - 09:43 #16
Som du kan se virker det ganske udmærket på min side, så du må have implementeret det med en lille fejl af en art, kan du linke til dit forsøg ?-)
Avatar billede calo2 Nybegynder
08. juli 2005 - 09:50 #17
Hej. Har pt. ingen steder at uploade min side, men har indsat koden her. Har prøvet at se om jeg kan nogle ting som mangler fra din.

Hvad betyder iøvrigt dette i koden? name="fisk" og kan det evt. undlades?

--------KODEN-----------

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 1</title>


<script language="javascript" type="text/javascript">

var OpC = new Array();
var ie = (document.all)?true:false;
var moz = (navigator.userAgent.indexOf("Gecko")>-1);

function startOpChange(elm,end,tim){
  if (!ie && !moz)return;
  var idx = OpC.length;
  for(var i=0;idx>i;i++){
    if(OpC[i][0]==elm){
      clearInterval(OpC[i][4]);
      idx = i;
      break;
    }
    OpC[idx] = new Array();
  }
  if(idx==0)OpC[idx] = new Array();
 
  if(ie)actOp=elm.filters.alpha.opacity;
  else if(css3)actOp=(elm.style.opacity*100);
  else actOp=(elm.style.MozOpacity*100);
  if (actOp!=end){
    OpC[idx][0]=elm;
    OpC[idx][1]=actOp;
    OpC[idx][2]=end;
    OpC[idx][3]=(end>actOp)?1:-1;
    var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
    OpC[idx][4]=setInterval("opChange("+idx+")",delayTime);
  }
}

function opChange(idx){
  OpC[idx][1]+=OpC[idx][3];
  if (ie)OpC[idx][0].filters.alpha.opacity=OpC[idx][1];
  else if(css3)OpC[idx][0].style.opacity=Math.min(0.99,OpC[idx][1]/100);
  else OpC[idx][0].style.MozOpacity=Math.min(0.99,OpC[idx][1]/100);
  if (OpC[idx][1]==OpC[idx][2]){
    clearInterval(OpC[idx][4]);
    return;
  }
}

</script>


</head>

<body>




<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
    <tr>
        <td>
        <img src="../Dokumenter/Mine%20websider/Lau-d/opbyggelse_index/tv_hifi.jpg" name="fisk" width="220" height="120" style="filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;" onmouseover="startOpChange(this,100,1);" onmouseout="startOpChange(this,60,1);"></td>
    </tr>
</table>




</body>

</html>
Avatar billede roenving Novice
08. juli 2005 - 10:01 #18
-- jeg fandt lige en forglemmelse, og har derfor opdateret koden, men ikke en, som skulle give dig problemer ...

-- jo, den triggede på css3-variablen, som var den jeg manglede at indsætte, så hent den nye udgave af koden !-)
Avatar billede calo2 Nybegynder
08. juli 2005 - 10:03 #19
Ok;-) prøver den lige...
Avatar billede calo2 Nybegynder
08. juli 2005 - 10:10 #20
Hej igen. Nu spiller det bare:-D Fader i begge browsere... I skal ha´en stor tak for hjælpen.

Hvem af jer skal så havde point?Syntes i alle er kommet med fin hjælp;-)

! Et sidste lille spørgsmål til koden: Hvad betyder dette name="fisk"

Endnu engang tak for hjælpen herfra.
Avatar billede roenving Novice
08. juli 2005 - 10:14 #21
name='fisk' er en reminiscens fra noget af den kode, jeg oprindelig startede med, men som nu er overflødig ...

-- i html-4 og før-javascript-binding er det den måde man identificerer billeder, men den er ikke i brug i scriptet eller koden iøvrigt, så du kan bare slette den !-)
Avatar billede calo2 Nybegynder
08. juli 2005 - 10:17 #22
OK;-) Syntes også den virkede lidt mærkelig??? Vil du ingen point havde for hjælpen?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester