Bilder ausgrauen [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

Archiv verlassen und diese Seite im Standarddesign anzeigen :
Bilder ausgrauen

Killerattacks

06-05-2002, 23:11

Ich habe auf einigen Websiten Bilder gesehen, die wenn man die Maus nicht darauf hatte verschwommen bzw. dunkler waren.

Wie mache ich das mit mouseover etc. und den richtigen CCS?
(Habe keinen Schimmer von javascript...)

schmalle

07-05-2002, 09:04

das läuft entweder mit javascipt mouseover() oder aber das sind echte java applets ...
www.teamone.de/selfhtml

schlepplift

07-05-2002, 15:24

ja das klappt mit css:

style beim mouseover eben filter: Alpha(Opacity=100)
ansonsten filter: Alpha(Opacity=10)

dann machen wenigstens die neuen ie's das bild in diesem fall beim mouseover von 10% nach 100% deckend. muss man nur hinter dem bild nen dunklen background einstellen und schon wirkt es dunkler

mfg
ben

Killerattacks

07-05-2002, 20:29

Danke werds mal versuchen...

MelloPie

07-05-2002, 20:38

funktioniert nur im internet explorer

Killerattacks

07-05-2002, 22:09

OK

Aber wie muss ich das nun genau bei den Eventhandlern machen?

also was muss ich in onmouseover="" schreiben damit ich den eingestellten Filterwert ändern kann?

schlepplift

08-05-2002, 10:59

ok, das ganze ist ziemlich simple.

du schreibst dir deine verschiedenen stylesheets und gibst dem bild (oder jedem andren tag) eine "classover".

hier kannst du es anschauen! (http://www.doofkopf.net/classover.php)

<html>
<head>
<title>classover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="144" height="97" border="0" cellspacing="0" cellpadding="0" class="table_bg" align="center">
<tr>
<td><img src="tennis.gif" width="144" height="97" class=bla classOver=blaOver classDown=blaClick></td>
</tr>
</table>
</body>
</html>

Damit das ganze funktioniert brauchst du die behavior datei:
hover.htc

<PUBLIC:COMPONENT>
<PUBLIC:PROPERTY NAME="classOver" />
<PUBLIC:PROPERTY NAME="classDown" />
<PUBLIC:ATTACH event="onmouseout" handler="swapEffect" />
<PUBLIC:ATTACH event="onmouseup" handler="swapEffect" />
<PUBLIC:ATTACH event="onmousedown" handler="swapEffect" />
<PUBLIC:ATTACH event="onmouseover" handler="swapEffect" />
<PUBLIC:ATTACH event="onmouseup" handler="swapEffect" />

<SCRIPT>
// Copyright 1999 InsideDHTML.com, LLC. All rights reserved
// This code can be reused as long as the above copyright
// notice is not removed.
var classDefault = element.className
function swapEffect() {
switch (event.type) {
case "mousedown":
if (classDown)
element.className = classDown + " " + classDefault
break;
case "mouseup":
case "mouseover":
if (classOver)
element.className = classOver + " " + classDefault
break;
default:
element.className = classDefault
}
}
</SCRIPT>
</PUBLIC:COMPONENT>

also bei mir klappts so. komischerweise geht der alpha-filter nur, wenn man eine width mit-definiert. keine ahnung

die bescheuerten netscape-user können es zwar nicht sehen, kriegen aber auch keine fehler.. sind sie selber schuld

mfg

Toxical

08-05-2002, 17:58

hm kurz ot frage:

wie kommt man darauf eine *.htc in websiten einzubinden?:) irgendwie halte ich mit der aktuellen entwicklung nicht ganz schritt glaub ich :)

naja gut egal, aber geht das nich auch einfacher, gehtz bestimmt :p

Killerattacks

08-05-2002, 18:52

Danke für die Antwort!

Nur noch eine Frage (;))

Was ist eine .htc/behaviour Datei? hab ich ja noch nie gesehen. Kenn nur .js und .css Dateien, die included werden können (auf dem client Rechner)...