Hallo zusammen,
ich arbeite an einem Bild auf dem mehrere Personen dargestellt sind. Dieses Bild soll, wenn es fertig gestellt ist, s/w sein und beim "rollover" mit der Maus sollen die einzelnen Personen nacheinander Farblich dargestellt werden.
Mit Photoshop habe ich die Personen bereits freigestellt und auf 6 Ebenen verteilt. 5 Ebenen für die Personen und eine Ebene für die originale s/w Fotograpie.
Nur wie bekomme ich nun zum einen die einzenlen Bildbereiche so eingestellt, dass die entsprechende Person beim rollover automatisch farbig wird, und wie kann ich dies dann später auf der Homepage einbinden?
Für euere Unterstützung wäre ich sehr dankbar.
Chris
Professionelles Webdesign erlernen mit dem Webdesign Tutorial
Mein Punktekonto 0 Punkte
Rollover bei Bildbereichen
Moderatoren: Basti, René Dang, Daniel S., Matthias
2 Beiträge
• Seite 1 von 1
Rollover bei Bildbereichen
von qwertz0211 am 09.03.2011, 18:35
- qwertz0211
- Mitglied
- Beiträge: 1
- Registriert: 09.03.2011, 18:23
Re: Rollover bei Bildbereichen
von Michael1982 am 10.03.2011, 10:13
Guten Morgen,
es kommt natürlich drauf an wie die Personen im Bild verteilt sind. Wenn diese Teilweise hintereinander stehen oder sich nicht mit einem Rechteck "einrahmen" lassen würde ich die aus dem S/W auch ausschneiden. Dann per CSS Hoover oder mit Javascript tauschen beim Mauseover.
Sind die personen deutlich voneinander getrennt, kann man leere Divs als Link drüber legen und diesen dann wiederum mit CSS oder Javascript das Farbbild zuweisen.
Bei beiden Versionen muss natürlich alles passgenau positioniert werden.
Dritte Möglichkeit wären 6 komplette Bilder. Einmal S/W und jeweils 5 wo eine Person farbig ist. Auch hier könnte es dann mit leeren Divs umgesetzt werden und das Tauschen der Bilder mit CSS oder JS.
CSS Code:
Satt der Divs kann man auch transparente Bilder nehmen. Es muss eben nur ein bereich definiert werden, auf dem der Effekt wirksam wird.
Für die Javascript Variante such einfach mal nach Bildewechsel oder OnMouseOver. Gibt vielleicht noch mehr Möglichkeiten das um zu setzten, aber das war es was mir so eingefallen ist. Bei ein paar Links würde ich wohl CSS nehmen, weil das auch funktioniert, wenn der Besucher Javascript deaktiviert hat. Bei vielen Links ist es aber einfacher und deutlich weniger Code, wenn man da eine Javascript Funktion schreibt.
es kommt natürlich drauf an wie die Personen im Bild verteilt sind. Wenn diese Teilweise hintereinander stehen oder sich nicht mit einem Rechteck "einrahmen" lassen würde ich die aus dem S/W auch ausschneiden. Dann per CSS Hoover oder mit Javascript tauschen beim Mauseover.
Sind die personen deutlich voneinander getrennt, kann man leere Divs als Link drüber legen und diesen dann wiederum mit CSS oder Javascript das Farbbild zuweisen.
Bei beiden Versionen muss natürlich alles passgenau positioniert werden.
Dritte Möglichkeit wären 6 komplette Bilder. Einmal S/W und jeweils 5 wo eine Person farbig ist. Auch hier könnte es dann mit leeren Divs umgesetzt werden und das Tauschen der Bilder mit CSS oder JS.
CSS Code:
- Code: Alles auswählen
<html>
<head>
<style type="text/css">
#link1 a {
background-image: url(Grafics/Hintergrundbild.jpg);
{
#link1 a: visited {
background-image: url(Grafics/Hintergrundbild.jpg);
{
#link1 a: hoover {
background-image: url(Grafics/Hintergrundbild-Farbe1.jpg);
{
#link2 a {
background-image: url(Grafics/Hintergrundbild.jpg);
{
#link2 a: visited {
background-image: url(Grafics/Hintergrundbild.jpg);
{
#link2 a: hoover {
background-image: url(Grafics/Hintergrundbild-Farbe2.jpg);
{
'link3 .......
</style>
</head>
<body>
<a href="Seite1.html" id=!link1"><div id="linkbox1"></div></a>
<a href="Seite2.html" id=!link2"><div id="linkbox2"></div></a>
</body>
</html>
Satt der Divs kann man auch transparente Bilder nehmen. Es muss eben nur ein bereich definiert werden, auf dem der Effekt wirksam wird.
Für die Javascript Variante such einfach mal nach Bildewechsel oder OnMouseOver. Gibt vielleicht noch mehr Möglichkeiten das um zu setzten, aber das war es was mir so eingefallen ist. Bei ein paar Links würde ich wohl CSS nehmen, weil das auch funktioniert, wenn der Besucher Javascript deaktiviert hat. Bei vielen Links ist es aber einfacher und deutlich weniger Code, wenn man da eine Javascript Funktion schreibt.
- Michael1982
- Mitglied
- Beiträge: 116
- Registriert: 05.04.2010, 19:36
2 Beiträge
• Seite 1 von 1
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste