Das Webmaster Netzwerk Foren-Übersicht
Registrieren
Mitgliederliste
Benutzergruppen
FAQ
Beiträge seit dem letzten Besuch anzeigen
Das Webmaster Netzwerk Foren-Übersicht
 
javascript - rollover bei thumbnails (fade.js)

 
   Das Webmaster Netzwerk Foren-Übersicht -> Entwicklung
Vorheriges Thema anzeigen:
Nächstes Thema anzeigen:  
BeitragVerfasst am: Fr Okt 17, 2003 22:15    Titel: javascript - rollover bei thumbnails (fade.js)
Autor Nachricht
kontur



Anmeldedatum: 16.01.2003
Beiträge: 246
Wohnort: passau

BeitragVerfasst am: Fr Okt 17, 2003 22:15    Titel: javascript - rollover bei thumbnails (fade.js)

jo Surprised

versuch mir nun javascript bissle beizubringen, und mir schwebt da sowas im kopf, hab des schonmal auf irgendwelchen seiten gesehen:

sind so thumbnail-vorschauen, und bei mouseover werden die z.b. heller, die thumbnails, also etwas 'weis-durchsichtig' überzogen.

wie macht man das? über zwei einzelne thumbnails, einen hell, einen dunkel? oder gibt's da ne eigenschaft, mit der man %alpha, wie in flash, bei nem bild festlegen kann?

ein link zu nem solchen script is zwar auch hilfreich weil ich's mir rauslesen kann, aber da ich's eher verstehen möcht wären auch bloß tips schon super


k.
Nach oben
BeitragVerfasst am: Sa Okt 18, 2003 00:48    Titel:
Autor Nachricht
Xdreamer
Special Honouring Member


Anmeldedatum: 07.08.2002
Beiträge: 1234
Wohnort: nahe bei dir

BeitragVerfasst am: Sa Okt 18, 2003 00:48    Titel:

Zitat:

wie macht man das? über zwei einzelne thumbnails, einen hell, einen dunkel? oder gibt's da ne eigenschaft, mit der man %alpha, wie in flash, bei nem bild festlegen kann?


jep genau das fading script hab ich hier irgendwo noch rumliegen
Nach oben
BeitragVerfasst am: Sa Okt 18, 2003 12:48    Titel:
Autor Nachricht
ade
Special Mosher


Anmeldedatum: 05.03.2003
Beiträge: 1421
Wohnort: Schweiz

BeitragVerfasst am: Sa Okt 18, 2003 12:48    Titel:

bitte nur implementieren wenns umbedingt notwendig ist...

die dinger sind absolut unnötig, nervtötend und eine absolute verschwendung von transfervolumen.
ich bin absolut allergisch auf die dinger!
Nach oben
BeitragVerfasst am: Sa Okt 18, 2003 15:12    Titel:
Autor Nachricht
kontur



Anmeldedatum: 16.01.2003
Beiträge: 246
Wohnort: passau

BeitragVerfasst am: Sa Okt 18, 2003 15:12    Titel:

ui, wär fein wenn du mal schicken/posten könntest damit ich mir das angucken kann, wie man sowas bewerkstelligt

naja, ich find's ansprechend, wenn man sieht wo man grad mit der maus rumschwirrt...zudem will ich's mal ausprobieren, wenn's mir net gefällt bleibt's draußen..

zudem is des sicher gut zur erweiterung meiner js kenntnisse *hrhr*

k.
Nach oben
BeitragVerfasst am: Sa Okt 18, 2003 19:40    Titel:
Autor Nachricht
Xdreamer
Special Honouring Member


Anmeldedatum: 07.08.2002
Beiträge: 1234
Wohnort: nahe bei dir

BeitragVerfasst am: Sa Okt 18, 2003 19:40    Titel:

folgender code steht in der fade.js

Code:

<!-- FOR FADING -->
<script language="JavaScript" type="text/javascript">
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFa
deObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}
</script>
<!-- /FOR FADING -->



so zum einbinden

Code:

<script src="fade.js" language="Javascript"></script>


und darunter noch folgendes

Code:

<script>
/*
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

/* object - image to be faded (actual object, not name);
 * destop - destination transparency level (ie 80, for mostly solid)
 * rate   - time in milliseconds between trasparency changes (best under 100)
 * delta  - amount of change each time (ie 5, for 5% change in transparency)
 */

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
       
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
   
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}
</script>
Nach oben
BeitragVerfasst am: So Okt 19, 2003 12:22    Titel:
Autor Nachricht
kontur



Anmeldedatum: 16.01.2003
Beiträge: 246
Wohnort: passau

BeitragVerfasst am: So Okt 19, 2003 12:22    Titel:

vielen dank Smile

k.
Nach oben
Beiträge der letzten Zeit anzeigen:   
   Das Webmaster Netzwerk Foren-Übersicht -> Entwicklung Alle Zeiten sind GMT + 2 Stunden
Seite 1 von 1
Gehe zu: