Filter funktionieren nur im IE, nicht im FIrefox/Safari

befubo · 23.02.2010, 09:43

Hallo zusammen

Hab da mal wieder ein Problem, und zwar:
Folgender Code funktioniert im IE perfekt:

PHP-Code:

 
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=1,Transition=22)">

 
<?php

 mysql_connect("localhost",

  "XXXXX","XXX") or die

  ("Keine Verbindung moeglich");

  mysql_select_db("XXXXX") or die

  ("Die Datenbank existiert nicht");

 
$bg = array();

  $abfrage = "SELECT X FROM X WHERE nick = 'X'";

  $ergebnis = mysql_query($abfrage);

  while($row = mysql_fetch_object($ergebnis))

{

$bg[] = $row->X; 

}

$bg_separated = implode(" ", $bg);

$url = explode(" ", $bg_separated);

$count = count($url);

?>

 
 
 
<style>

body    {

    background-color:#404040;

    font-size:12pt;

    color: #808080;

}

a    {text-decoration:none; font-weight:bold; color:#404040;}

 
.blend1    {filter:blendTrans(Duration=0.7, Transition=16);}

.blend2    {filter:blendTrans(Duration=1.5, Transition=16);}

.thumb    {filter:Alpha(style=2 finish-opacity=100); cursor:'hand'; -moz-opacity: 0.5; opacity: 0.5;}

td    {margin:5px; padding:5px;}

 
</style>

<script>

if(document.all)var isIE=true;

 
var fotos = new Array();

 
function neu(url,text)

{

    Neu = fotos.length;

    fotos[Neu] = new Array();

    fotos[Neu]["text"]=text;

    fotos[Neu]["pic"]=new Image()

    fotos[Neu]["pic"].src=url;

}

 
// editiere hier das große bild

exakt=false;        //false = runterskalieren | true = die exakte angegebene größe

height=300;        //bei exakt=false sollte die width sehr hoch gesetzt werden!

width=1000;

 
preview=3    //anzahl der thumbnails in der manual-navi-leiste

time=3500    //'slide'Zeit wie lange ein einzelnes Bild angezeigt wird in ms

 
function skalieren(x,h,w,e)

{

    H=fotos[x]["pic"].height;

    W=fotos[x]["pic"].width;

    W1=W;

    H1=H;

    if(!e)

    {

        if(H>h)

        {

            W1=W*h/H;

            H1=h;

        }

        if(W>w)

        {

            H1=H*w/W;

            W1=w;

        }

    }else

    {

        H1=h;

        W1=w;

    }

    var re = new Array();

    re["w"]=W1;

    re["h"]=H1;

    return(re); W1=""; H1=""; W=""; H="";

}

thumb_height=height/preview;

thumb_width=100000;

thumb_exakt=false;

 
function thumb_table(offset)

{

    table="<table width=100% height=100%>";

    for(var x=offset; x<=offset+preview-1; x++)

    {

        if(fotos[x])

        {

            var Size = skalieren(x,thumb_height,thumb_width,thumb_exakt);

            size="width="+Size["w"]+" height="+Size["h"];

            table+="<tr><th><img "+size+" onclick=\"show('"+x+"',true)\" class='thumb' "+size+" src='"+fotos[x]["pic"].src+"' alt=\""+fotos[x]["text"]+"\"></th></tr>"

        }

    }

    table+="</table>";

    return(table);

}

 
 
var nav=0;

function navi(v)

{

    v=Number(v);

    if(nav+v>fotos.length-preview)

    {

            V=fotos.length-preview;

    }else

    {

        if(nav+v<0)

        {

            V=0;

        }else

        {

            V=nav+v;

        }

    }

    nav=V;

    if(isIE)    document.getElementById("thumbs").filters.blendTrans.Apply();

    document.getElementById("thumbs").innerHTML=thumb_table(V);

    if(isIE)    document.getElementById("thumbs").filters.blendTrans.Play();

}

NAV=-1;

function show(x,fs)

{

    x=Number(x);

    if(fotos[x])

    {

        var Size = skalieren(x,height,width,exakt);

        if(fs){size="width="+Size["w"]+" height="+Size["h"]; alt="alt=\"[show fullsize]\""; was=false} else {size=""; alt="alt=\"[show scaled size]\""; was=true}

        if(isIE)    document.getElementById("inhalt").filters.blendTrans.Apply();

        document.getElementById("inhalt").innerHTML="<table height=100% width=100%><tr><th><b><img  onclick=\"show('"+x+"',"+was+")\" style=\"cursor:hand;\" "+size+" align=\"absmiddle\" src="+fotos[x]["pic"].src+" "+alt+"></th></tr></table>";

        if(isIE)    document.getElementById("inhalt").filters.blendTrans.Play();

        document.getElementById("name").innerHTML=fotos[x]["text"];

        document.getElementById("status").innerHTML=(x+1)+"/"+fotos.length;

    }

    NAV=x

}

var Timer; running=false;

function start()

{

    if(!running)

    {

        slideshow();

        running=true;

    }

}

function slideshow()

{

        NAV++;

        if(NAV>=fotos.length)NAV=0;

        show(NAV,true);

        Timer = setTimeout("slideshow()",time);

        document.getElementById("status2").innerHTML="[Diashow on]";

}

function kill()

{

    running=false

    document.getElementById("status2").innerHTML="[Diashow off]";

    if(Timer)clearTimeout(Timer);

}

 
function init()

{

 
 
 
 
<?php

echo "$bg_separated";

?>

 
 
    document.getElementById("thumbs").style.height=10+height;

    setTimeout("document.getElementById('thumbs').innerHTML=thumb_table(0)",500);

}

 
</script>

<body onload="init();">

<p>

<table width="100%" border=0>

<tr height=20>

<td width=200>

<a onclick="navi('-1')" href="#"><img src="up.png" border=0 alt="Up"></a><br></td>

<th id=name> </th></tr>

<tr>

<td class=blend1 id=thumbs width=200>still loading... </td>

<td class=blend2 id=inhalt><center><a onclick=start() href="#">

Diashow</a></center></td></tr>

<tr height=20>

<td width=200>

<a onclick="navi('1')" href="#"><img src="down.png" border=0 alt="Down"></a></td>

<td><a onclick=start() href="#"><img src="start.png" border=0 alt="Start"></a> <a onclick=kill() href="#"><img src="stop.png" border=0 alt="Stop"></a> <span id=status> </span> <span id=status2>[Diashow off]</span></td>

<tr>

</tr></table>

hier könnt ihr euch das ganze mal ankucken:
Klick mich!

Im Firefox und Safari werden keine Überblendungen / Grafische
Darstellungen angezeigt...
Funktionieren Filter nur im IE oder is da iwo ein Fehler?
thx und mfg
befubo

lstegelitz · 23.02.2010, 13:35

Code:

.blend1    {filter:blendTrans(Duration=0.7, Transition=16);}
.blend2    {filter:blendTrans(Duration=1.5, Transition=16);}
.thumb    {filter:Alpha(style=2 finish-opacity=100); cursor:'hand'; -moz-opacity: 0.5; opacity: 0.5;}

Diese Filter-Angaben sind Microsoft-only:
SELFHTML: Stylesheets / CSS-Eigenschaften / Filter (nur Microsoft)

befubo · 23.02.2010, 13:51

aber das ist ja richtig scheisse.
Und es gibt keine Möglichkeit, im Firefox + co wenigstens
ähnliche Effekte?

lstegelitz · 23.02.2010, 14:57

Eigentlich müsste eine Javascript Bibliothek mit entsprechenden Effekten ausreichen.

Google mal nach: javascript effects library
(scriptaculous, mootools, spry, ...)

ph|L · 24.02.2010, 11:58

Solch ein Überblendungseffekt gibt es in der mootools JS Lib.

Diese effekte nutzt auch die JD.Gallery (JonDesign's (Javascript) SmoothGallery 2.0: Improved Mootools Mojo for Images | Installing a GallerySet)

Kannst es dir ja daraus basteln.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
imagesx() und imagesy() wollen nicht funktionieren	Mischiman	PHP Tipps 2009	17	07.12.2009 22:06
Filter	coolerj	PHP Tipps 2009	13	03.06.2009 11:36
[Erledigt] Fehler in einem AJAX-jQuery-Script: XML filter is applied...	limenet	JavaScript, Ajax und mehr	0	17.05.2009 16:33
[Erledigt] Scripte funktionieren auf neuem Server nicht!	poppaea	Server, Hosting und Workstations	4	01.05.2009 14:41
PNG trotz Filter noch als volle Link-Fläche	max-dhom	HTML, Usability und Barrierefreiheit	10	23.01.2007 21:48
Hover mit Filter	pc-freak	HTML, Usability und Barrierefreiheit	7	28.09.2006 16:09
Links aus HTML-eMail funktionieren nicht.	pino	PHP Tipps 2006	14	26.06.2006 20:50
exe-datein funktionieren nicht	chiliGREEN	Server, Hosting und Workstations	2	21.04.2006 20:51
session funktionieren im internet explorer nicht	flflfl	PHP Tipps 2006	5	07.04.2006 16:11
filter erstellen		PHP Tipps 2007	11	07.11.2005 17:40
effektiver Filter für Namens-Eingaben?		PHP Tipps 2005-2	10	19.07.2005 21:57
type="file" - Filter möglich?		PHP Tipps 2005	10	15.02.2005 14:57
Spam filter		PHP-Fortgeschrittene	7	06.09.2004 16:50
Wie funktionieren die Webseiten heute?	NetLook	PHP Tipps 2004	3	06.06.2004 22:44


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

23.02.2010, 13:35
lstegelitz Erfahrener Benutzer Registriert seit: 07.09.2009 Beiträge: 4.005 PHP-Kenntnisse: Fortgeschritten	Code: .blend1 {filter:blendTrans(Duration=0.7, Transition=16);} .blend2 {filter:blendTrans(Duration=1.5, Transition=16);} .thumb {filter:Alpha(style=2 finish-opacity=100); cursor:'hand'; -moz-opacity: 0.5; opacity: 0.5;} Diese Filter-Angaben sind Microsoft-only: SELFHTML: Stylesheets / CSS-Eigenschaften / Filter (nur Microsoft) __________________ Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

23.02.2010, 14:57
lstegelitz Erfahrener Benutzer Registriert seit: 07.09.2009 Beiträge: 4.005 PHP-Kenntnisse: Fortgeschritten	Eigentlich müsste eine Javascript Bibliothek mit entsprechenden Effekten ausreichen. Google mal nach: javascript effects library (scriptaculous, mootools, spry, ...) __________________ Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

24.02.2010, 11:58
ph\|L Erfahrener Benutzer Registriert seit: 14.08.2008 Beiträge: 159 PHP-Kenntnisse: Fortgeschritten	Solch ein Überblendungseffekt gibt es in der mootools JS Lib. Diese effekte nutzt auch die JD.Gallery (JonDesign's (Javascript) SmoothGallery 2.0: Improved Mootools Mojo for Images \| Installing a GallerySet) Kannst es dir ja daraus basteln.