mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 11:08 Benutzername: Passwort: Auto-Login

Thema: rollover effekt vom 04.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> rollover effekt
Seite: 1, 2, 3  Weiter
Autor Nachricht
classic.franky
Threadersteller

Dabei seit: 24.07.2006
Ort: Berlin
Alter: 113
Geschlecht: Männlich
Verfasst Do 04.10.2007 22:10
Titel

rollover effekt

 Antworten mit Zitat Zum Seitenanfang
kann mir jemand helfen Lächel wie bekomme ich einen rollover effekt hin [ohne java oder mit?] Hä?

möchte diesen hebel bewegen:





würde mich freuen jemand helfen könnte *Thumbs up!*



//EDIT by Sarky
Keine Eye-Catcher/Upcase im Threadtitel!


Zuletzt bearbeitet von Sarky am Do 04.10.2007 22:13, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Sarky

Dabei seit: 29.06.2002
Ort: Düsseldorf
Alter: 42
Geschlecht: Männlich
Verfasst Do 04.10.2007 22:14
Titel

Antworten mit Zitat Zum Seitenanfang
Java != JavaScript

Zu Deinem Problem:
http://de.selfhtml.org/javascript/beispiele/buttons.htm
  View user's profile Private Nachricht senden
Anzeige
Anzeige
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 04.10.2007 22:25
Titel

Antworten mit Zitat Zum Seitenanfang
Ist recht einfach auch nur mit CSS zu realisieren.

http://www.alistapart.com/articles/sprites

Edit: ein kleines Beispiel:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
a#hebel:link,
a#hebel:visited {
   background: url(hebel.gif) no-repeat;
   display: block;
   height: 83px; /* halbe höhe der grafik */
   width: 28px; /* breite der grafik */
}
a#hebel:hover,
a#hebel:active {
   background: url(hebel.gif) 0 -83px no-repeat; /* die grafik um die hälfte der höhe verschieben */
}
</style>
</head>
<body>
   <a href="#" id="hebel"></a>
</body>
</html>


genutzt wird dieses Grafik




Zuletzt bearbeitet von m am Do 04.10.2007 22:43, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
classic.franky
Threadersteller

Dabei seit: 24.07.2006
Ort: Berlin
Alter: 113
Geschlecht: Männlich
Verfasst Do 04.10.2007 23:01
Titel

Antworten mit Zitat Zum Seitenanfang
danke hat super geklappt Lächel *Thumbs up!* *zwinker*

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>hebel</title>
<style type="text/css">
a#hebel:link,
a#hebel:visited {
   background: url(http://img230.imageshack.us/img230/2809/hebelhm9.gif) no-repeat;
   display: block;
   height: 83px; /* halbe höhe der grafik */
   width: 28px; /* breite der grafik */
}
a#hebel:hover,
a#hebel:active {
   background: url(http://img230.imageshack.us/img230/2809/hebelhm9.gif) 0 -83px no-repeat; /* die grafik um die hälfte der höhe verschieben */
}
</style>
</head>
<body>
   <a href="#" id="hebel"></a>
</body>
</html>


noch eine frage wenn ich hinter dem "hebel" weiter schreiben möchte: wie mache ich das jetzt?
er macht jetzt immer einen umbruch *hu hu huu* wie als man <br> machen würde.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 04.10.2007 23:10
Titel

Antworten mit Zitat Zum Seitenanfang
Kommt ganz auf die Situation drauf an. Aber versehe dass ganze einfach mal mit einer
Float Eigenschaft, zum Beispiel

Code:
a#hebel:link,
a#hebel:visited {
   background: url() no-repeat;
   display: block;
   float: left;
   height: 83px;
   width: 28px;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
classic.franky
Threadersteller

Dabei seit: 24.07.2006
Ort: Berlin
Alter: 113
Geschlecht: Männlich
Verfasst So 07.10.2007 19:56
Titel

Antworten mit Zitat Zum Seitenanfang
danke Lächel habe noch mal getestet:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>hebel</title>
<style type="text/css">
a#hebel:link,
a#hebel:visited {
   background: url(http://img211.imageshack.us/img211/2268/hebelbw7.gif) no-repeat;
   display: block;
   height: 151px; /* halbe höhe der grafik */
   width: 261px; /* breite der grafik */
}
a#hebel:hover,
a#hebel:active {
   background: url(http://img211.imageshack.us/img211/2268/hebelbw7.gif) 0 -151px no-repeat; /* die grafik um die hälfte der höhe verschieben */
}
</style>


</head>
<body>
<br><br><br><br><br><br>
<br><br><br><br><br><br>  <center> <a href="www.test.de" id="hebel"></a>  </center>
</body>
</html>


leider springt der hebel immer nach oben also bleibt nicht an einer stelle <-- Schuld!
würde mich freuen wenn du mir noch mal helfen kannst *Thumbs up!*

nutze diese grafik:


  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 07.10.2007 21:16
Titel

Antworten mit Zitat Zum Seitenanfang
Es liegt einfach nur daran wie du die Grafik zugeschnitten hast und an den Positionsangaben
für die background Grafik. Wenn du den Leeraum in der Grafik nach oben und unten entfernst
hast du es einfach das ganze zu verschieben. Denn die Rechnung mit der halben Höhe geht
natürlich auch nur auf wenn der zu zeigende Ausschnitt der Grafik auch wirklich genau auf
die halbe Höhe passt.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
classic.franky
Threadersteller

Dabei seit: 24.07.2006
Ort: Berlin
Alter: 113
Geschlecht: Männlich
Verfasst So 07.10.2007 22:55
Titel

Antworten mit Zitat Zum Seitenanfang
super, danke für den tip, ist mir dann auch noch aufgefahlen Ooops * Applaus, Applaus *
werde mich noch mal drann versuchen * Ich geb auf... * *ha ha*



viele grüße *Thumbs up!*
  View user's profile Private Nachricht senden
 
Ähnliche Themen Rollover-Effekt im IE
Fotolia-Rollover-Effekt
rollover backgorund effekt, nur wie?
Dreamweaver CS4 - Rollover-Effekt - Bug?
homepage - rollover effekt
Rollover Effekt -> Javascript in PHP
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB