Mouseover mit halbtransparenten bildern ( prob gelöst)

synaptic

also folgendes problem... wir benutzen ein cms, in welchem hochgeladene bilder recht kryptische namen bekommen....
(sowas wie 12344634645234422.png... usw)
Der IE kann ja keine halbtransparenten png-files darstellen und ich würd gern wissen, welche möglichkeiten ihr kennt für den mouseover-effekt ein halbtransparentes (bzw milchiges) bild darzustellen...
gibt es styles für den alphakanal, mit denen man sowas machen kann oder ist die einzig verbleibende lösung extrabilder anzulegen, die entsprechend aussehen...?

es sollen nachher pro seite 6 thumbnails zu sehen sein, die bei einem mouseover ein entsrechendes bild in größerem format anzeigen.

das eigentliche script ist schon vormontiert^^, d.h normal clientside fruchtet des schon(da war ich vorgestern schon fleissig für) aber da wusste ich ja auch die namen der bilder von anfang an und konnte das script so recht schnell zusammencoden!

das back-end für diese bildergalerie wird grad noch von einem arbeitskollegen gecodet, damit das auch alles über das cms pflegbar ist.
ich hätt halt vorab gern ein paar infos oder erfahrungswerte von euch.

Dikra

Ich würde mal behaupten, es

Zitat

ist die einzig verbleibende lösung extrabilder anzulegen, die entsprechend aussehen

...!!!

synaptic

also im ie bekomm ich das auch mit nem stylesheet hin..

HTML

<html>
<title></title>
<head>
<style type="text/css">


.foo {
         -moz-opacity:50;                           /* nn>4 ? */
         filter:Alpha(opacity=50, finishopacity=50); /* ie */ 
         background: url("3.png");
       height:80px;
	   width:80px;
      }

.nofoo{
         background: url("3.png");  
		 height:80px;
	   width:80px;
}  
</style>
</head>
<body>
<div class="nofoo" onmouseover="this.className='foo'" onmouseout="this.className='nofoo'"></div>
</body>
</html>

Alles anzeigen

doch obwohl ich selbst für den firefox ne opacity angeb, wird dir irgendwie net durchgezogen

edit: habs grad gepackt!!! -moz-opacity:50; muss -moz-opacity:0.5; sein damit es fruchtet!!

Dikra

Mozilla: Transparenz: -moz-opacity

Zitat

Diese Eigenschaft gehört nicht zum offiziellen Standard des W3C, sondern ist in Anlehnung an die kommenden CSS-3-Eigenschaften von den Mozilla-Entwicklern eingeführt worden. Du kannst sie jederzeit einsetzen, musst aber damit rechnen, dass sie durch die CSS-3-Eigenschaften ausgetauscht werden, sobald diese offiziell verabschiedet sind.

Bei älteren Browsern dürfte das dann auch nicht funktionieren.

synaptic

also wir gewährleisten kompatibilität bei IE6, IE7 und den netscape-dingern (inklusive ff) auf ie5.x brauch ich gar nix machen, screenreader usw zeigen die bilder und ihre styles eh net an, die sagen dann ja nur"grafik" und lesen das alt-tag aus..

außerdem: sobald css3 verabschiedet ist und man aktiv damit werkeln kann is des doch auch kein prob das irgendwann zu updaten.
wir pflegen ja unsere gehosteten pages auch

driver

ähm, ich benutz bei meinem menü ebenfalls opacity und moz-opacity.
wird im ie7 nicht richtig angezeigt (ie6 hats funktioniert)....

synaptic

also ich habs im ie6, ie7 und ff2.0 getestet und es hat gefruchtet!

driver

dann muss ich weng bei dir spionieren G*

is die seite schon online ?

synaptic

nee is sie net, aber ich kann dir gern nen dummy hochladen...
wenn dann kommt die eh erst aufn projektserver und der is von aussen auch nur mit zugang verfügbar..

edit: hier der link zur dummy.html:

http://home.arcor.de/synaptic/hier/styledummy.html

driver

hm... *grübel* also hier im ie7 gehts nicht.
aber ich glaub langsam fast dases an meiner ie7 install liegt
bzw das mei firma hier da was blockiert.....

synaptic

soll ich dir screenshots machen?? ich glaub ich bau mal eben was für dich^^

edit guck mal... hab nen kelines gif gebaut!

driver

is des im 7er ? dann liegts tatsächlich an meiner firmen-software.
gut, bin ich erleichtert. dann sollte es bei meiner auch klappen...

synaptic

joa is der ie7.. warte einfach mal ab bis du daheim bist.. (ich denke da haste auch den 7er)
sollte dementsprechend klappen!

wenn jemand anders hier noch nen anderen browser benutzt, wäre ich über feedback sehr erfreut, ob die dummy.html funktioniert, also ob der mouse-overstyle hinhaut!
ps: javascript muss natürlich aktiviert sein, denn der IE allgemein versteht hover bei nem bild net!

Mouseover mit halbtransparenten bildern ( prob gelöst)

Tags

Benutzer online in diesem Thema