DIV auf 10% ausblenden (transparenz)

[fabio]

Hi

ich verusche eine homepage für eine künstlerin zu machen, und dabei wollten wir das möglichst so machen, dass es absolut kein "schnickschnck" die fotos stört.
also ein titel, der text und das foto.

jeweils soll sich die navigation ausblenden auf ca. 10% deckkraft (auf weissen hintergrund) ausblenden, und nur wenn man drüber fährt die deckkraft auf 100% erhöht.

habe das bereits bei einigen homepages gesehen, dass sich was ausblendet, mag aber grad an keine erinnern.


geht so was, und wenn ja, wie?

viiielen dank

[prego]

Du brauchst für die verschiedenen Browser verschiedene Dinge.

CSS:

filter:alpha(opacity=10); /*IE*/
-moz-opacity: 0.1; /*FF*/
opacity: 0.1; /* CSS, wird aber nicht von allen unterstützt, FF kanns glaub ab 2.0, IE7 don't know*/

Einfach bein :hover-Event auf opacity 1.0 setzen und schon hast du was du willst...

EDIT:

---

Dazu gibts noch zu sagen, das der IE6 :hover nur auf A-Tags kann und du da ja wahrscheinlich ein DIV nimmst. Gucksu hier wie man dem IE6 das :hover auf allen Elementen beibringr: http://www.triebschicht.de/item/23/

---

EDIT:

---

Grad noch nen schönen Link gefunden: http://www.mandarindesign.com/opacity.html - was google alles rauschmeißt, wenn man nach "css opacity" sucht
Der hier dann grad auch noch: http://www.quirksmode.org/css/opacity.html

---

[fabio]

ja, bin selbst auch grad am parallel google suchen
hab was ideales gefunden http://wiki.script.aculo.us/scriptac...Effect.Opacity
muss jetzt nur noch testen ob der mit safari auch läuft, mein G5 ist hinten im zimmer und ich bin grad am laptop im fernsehzimmer

also, wenn dieses script auch mit safari funktioniert hab ich was ich brauch

[prego]

script.aculo.us läuft komplett mit Safari - der kann allerdings auch ordentlich opacity....

[fabio]

gut, dann bräuchte ich das für safari nicht mehr zu testen.
hab grad gesehen, dass sogar apple.com das scriptaculous benutzt
cool

oke, jetzt muss ich nur noch schauen dass das auch mit IE funktioniert, lässt sich wohl realisieren indem man das DIV als "layout" behandelt.

ein bisshcen MSDN lesen ist da wohl angesagt

[prego]

Ehm, wo issen das Problem?

<div class="transparent">
  <ul>
    <li>blub</li>
    <li>blub</li>
    <li>blub</li>
  </ul>
</div>



//CSS:

.transparent {
  filter:alpha(opacity=10);
  opacity: 0.1;
}

.transparent:hover {
  filter:alpha(opacity=100);
  opacity: 1;
} 

Und halt noch die csshover.htc laden wie auf triebschicht.de beschrieben.

Unn schon is der Käs gegesse


Oder eben Scriptaculous, das funzt auch im IE ordentlich...

//edit:
vielleicht noch als Ergänzung, damit drüber "schwebt", nicht das du jetzt wirklich mi <layer> anfängt

.transparent {
  position: absolute;
  top: 0;
  left: 0;
} 

[fabio]

Original geschrieben von prego
Ehm, wo issen das Problem?

anscheinend doch nirgends
weil auf der Demo homepage von scriptaculous funktioniert der eine effekt mit dem IE nicht, aber wenn man das selber nachbaut funktioniert es. also nur was kleines an deren homepage nicht sauber gemacht.
http://wiki.script.aculo.us/scriptac...Effect.Opacity den untersten "hide the source code zone" funktioniert unter dem IE nicht.
aber egal, wie gesagt auf dem test dokument beim download funktioniert alles, also nur ein kleines fehler bei deren homepage.


das problem liegt jetzt nur an safari, der mit dem onmouseover/out nicht ganz klar kommt. sprich wenn man auf den text fährt, und von text wieder in den DIV (zB mit dem mauszeiger auf das i-pünktchen und dann wieder "zurück in den DIV") fährt, gilt das bei safari ebenfalls wieder als "onMouseOver", was etwas nergi ist, weil der effekt dann anfängt zu flackern.

ich muss mal versuchen, ob es klappt wenn ich einfach einen transparenten "dummyDIV" über den normalen DIV lege und den dummyDIV mit dem onmouse zeug belege

[fabio]

okey, habe das nun gelöst mit dem safari problem.
ich lasse einfach nicht den ganzen DIV sondern nur die einzelnen <img> ein und ausblenden, funktioniert so auch ganz gut.


also, das thema kann nun geschlossen werden