image ueber ein anderes ueberblenden, aber wie?

[Eric Falbe]

Ich moechte eine Bilderseite erstellen, auf der das Bild, ueber dem man gerade mit der maus ist, mit einem grafischen Effekt hervorgehoben wird. Ich dachte daran, ein Bild mit Rechtecken, deren Farbe sich veraendert, darueberzuzeichnen. Doch wie mache ich sowas?
Bisher konnte ich keine passenden funktionen finden.

Die Moeglichkeit, fuer jedes Bild ein extra "Anklick"-Bild bzw. gleich eine ganze "Anklick"-Animation zu erstellen ist ziemlich arg aufwendig. Also mit welchen Mitteln kann man einfach grafische Effekte erzielen?

[Andreas Lindig]

Hallo,

Ich moechte eine Bilderseite erstellen, auf der das Bild, ueber dem man gerade mit der maus ist, mit einem grafischen Effekt hervorgehoben wird.

vielleicht am einfachsten mit CSS. etwa so:
a:hover {border:solid red 1px}

Gruß, Andreas

[Eric Falbe]

a:hover {border:solid red 1px}

Konnte darüber kaum was finden.
Zumindest nicht hier bei SELFHTML
Gibt es irgendwo Beispielprogramme zu hover, das direkt an einem image etwas verändert?

[twb]

Konnte darüber kaum was finden.

Reicht denn http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus nicht als Anfang?

twb

[Eric Falbe]

Reicht denn http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus nicht als Anfang?

Bei meiner Suchfunktion wurde nur ein Link zu dem Beispiel angezeigt. Und ich hatte mich schon über die Links zu Yahoo, Google etc. gewundert.

So wie ich das sehe, geht das nur mit Textlinks; oder kann man das auch irgendwie mit images machen?
Ich habe eine Seite erstellt, auf der sich die Grösse der Bilder verändert, aber das verruckelt alle anderen Bilder.
Die border eines images kann man auch nicht über funktionen verändern, oder geht das doch irgendwie?

[Andreas Lindig]

Die border eines images kann man auch nicht über funktionen verändern, oder geht das doch irgendwie?

das sollte eigentlich mit jedem Element gehen. Zeig mal einnen konkreten Versuch, wo's nicht klappt.

Gruß, Andreas

[Eric Falbe]

Also bei meinem alten code war das so:
Ich habe der border des Bildes eine Variable zugewiesen.
 var Rand = 0;
 function RandVeraendern(){
  Rand +=1;
 }

<a href="javascript:alert(document.Anna.border+Rand)">
<img src="031128_merenoel02.gif" border=Rand alt="Anna" name="Anna"><BR>
<a href="javascript:RandVeraendern()"><b>Rand verändern</b></a><br>

Was nicht klappte.
Aber mittlerweile habe ich herausgefunden, wie es geht:

<img src="Foot1.jpg" width="150" name="Foot1" alt="Foot1" id="Test"
 onMouseover="document.Foot1.border = 5;"
 onMouseout="document.Foot1.border = 0;">

Es geht wohl offensichtlich nur ueber eine funktion der Klasse document. Aber mit einem visuellen Effekt im Bild waere es natuerlich besser.

[twb]

Ich moechte eine Bilderseite erstellen, auf der das Bild, ueber dem man gerade mit der maus ist, mit einem grafischen Effekt hervorgehoben wird.

Dachtest Du nicht viel eher an sowas? Schau Dir die Seite http://www.chicagoseven.ch an, insbesondere die Mouseover-Effekte der Menutafel links im Bild. Das geht in etwa so:

<script language="javascript">
Bild_ein=new Image ();
Bild_ein.src="Erstes_Bild_mit_Effekt.jpg";
Bild_aus=new Image ();
Bild_aus.src="Erstes_Bild_normal.jpg";
var a, gif;

function wechsel (a, gif)
{window.document.images[a].src=gif.src;}
</script>

<a href="Aufgerufene_Seite.htm" target="Zielframe" onmouseover="wechsel (0, Bild_ein)" onmouseout="wechsel (0, Bild_aus)"><img src="Erstes_Bild_normal.jpg" alt="Beschreibung" border="0" height="Höhe" width="Breite"></a>

Die Moeglichkeit, fuer jedes Bild ein extra "Anklick"-Bild bzw. gleich eine ganze "Anklick"-Animation zu erstellen ist ziemlich arg aufwendig.

Tja, da hast Du ein grosses Wort gelassen ausgesprochen, lieber Andreas: Das ist Web-Authoring im allgemeinen tatächlich. Wer Handarbeit scheut, sollte sich gar nicht erst daran versuchen... ;-)))

twb

[Eric Falbe]

Dachtest Du nicht viel eher an sowas? Schau Dir die Seite http://www.chicagoseven.ch an, insbesondere die Mouseover-Effekte der Menutafel links im Bild. Das geht in etwa so:

Nee, sowas habe ich schon gemacht.
Und auf der Seite, deren Link du hier reingesetzt hast, sind gar keine Bildeffekte zu sehen. Zumindest nicht bei mir.

Ich muesste direkt auf ein Bild zugreifen können.
Aber das geht wohl mit Javascript nicht, oder?

[twb]

Und auf der Seite, deren Link du hier reingesetzt hast, sind gar keine Bildeffekte zu sehen. Zumindest nicht bei mir.

Unwahrscheinlich, da in einer ganzen Reihe von Browsern getestet (und im übrigen ein Standardverfahren). Menütafel gefunden ("Band", "Songs" etc.)? Und mit der Maus drübergefahren? Menüpunkte nicht dunkelrot statt hellgrau?

[Eric Falbe]

Unwahrscheinlich, da in einer ganzen Reihe von Browsern getestet (und im übrigen ein Standardverfahren). Menütafel gefunden ("Band", "Songs" etc.)? Und mit der Maus drübergefahren? Menüpunkte nicht dunkelrot statt hellgrau?

Jetzt doch.  S.O.
Aber wie gesagt, es soll ein ganzes Album digitaler Bilder angezeigt werden.

[twb]

Aber wie gesagt, es soll ein ganzes Album digitaler Bilder angezeigt werden.

Kein Problem. Mein Verfahren (s.o.), je zwei Thumbnails pro Bild, eines (Möglichkeit) als onMouseOut mit wesentlich höherer Helligkeit als das Zweite onMouseOver, das Normalwerte zeigt. Dadurch zeigt sich Deine Bildergalerie in einem Blasston; das Bild, das jeweils unter der Maus liegt, sticht durch seine kräftigen Farben hervor. Ist das nix?

twb

[Eric Falbe]

Kein Problem. Mein Verfahren (s.o.), je zwei Thumbnails pro Bild, eines (Möglichkeit) als onMouseOut mit wesentlich höherer Helligkeit als das Zweite onMouseOver, das Normalwerte zeigt.

Es wäre viel besser, wenn die Helligkeit des Bildes über Variablen verändert werden könnte. Dann müsste man keine extra Bilder machen. Irgendwie muss es doch so Variablen geben, auf die man auch zugreifen kann.

[twb]

Es wäre viel besser, wenn die Helligkeit des Bildes über Variablen verändert werden könnte. Dann müsste man keine extra Bilder machen.

Njet. Variablen gibt's in dieser Hinsicht keine. Allerdings gibt's da einen Microsoft-proprietären Trick, die sogenannten CSS-Filter. Mehr darüber gibt's auf http://de.selfhtml.org/css/eigenschaften/filter.htm. Aber achtung: Die Filter entsprechen keinerlei w3-CSS-Vorgaben. Und ausser dem IE werden diese Filter auch kaum je unterstützt - Firefox und Safari, zwei sehr beliebte Browser zur Zeit, kennen sie nicht.

Der Ehrlichkeit halber sei gesagt, dass ich sie auf http://www.mahjongg.li ebenfalls einsetze. Aber wie gesagt: Auf Nicht-IE-Browsern unterbleiben die Effekte.

[Eric Falbe]

Njet. Variablen gibt's in dieser Hinsicht keine. Allerdings gibt's da einen Microsoft-proprietären Trick, die sogenannten CSS-Filter.

Also bei mir funktioniert es - auch bei deinem Mah-Jong Spiel.  Den Filter kann man aber nicht ueber eine funktion aufrufen wie z.B.:  document.Anna.style="filter:Invert()";
Oder ? Geht es doch irgendwie?
Vielleicht nur mit Java?

[Eric Falbe]

Jetzt habe ich die rotgefärbten Knöpfe doch zu Gesicht bekommen.
Mein browser hatte das wohl aus Sicherheitsgründen gesperrt.
Aber was ich suche ist nur was ähnliches.
Es soll Bilder(Also Photos, die mit einer digitalen Kamera gemacht worden sind) irgendwie hervorheben.
Irgendwie mit einem Rand oder einem visuellen Effekt.
Ich habe bereits etwas programmiert, dass die Grösse des Bildes verändert, aber da ruckeln alle anderen Bilder dabei herum.

[Vinzenz]

Hallo Eric,

Aber was ich suche ist nur was ähnliches.
Es soll Bilder(Also Photos, die mit einer digitalen Kamera gemacht worden sind) irgendwie hervorheben.
Irgendwie mit einem Rand oder einem visuellen Effekt.

Pack Deine Bilder in ein <a>-Element (damit auch der IE was damit anfangen kann) und wechsele bei a:hover die Farbe des Randes.

Im übrigen ist "transparent" eine erlaubte Farbe für border, wobei der IE Dir da einen Strich durch die Rechnung machen kann.

Freundliche Grüsse,

Vinzenz