Anzeige:
Ergebnis 1 bis 7 von 7

Thema: Imagetausch mit Java-Skript - wer kann helfen???

  1. 30-04-2006, 13:12 #1
    sascha-elite
    Gast

    Question Imagetausch mit Java-Skript - wer kann helfen???

    Hallo alle zusammen,

    ich habe ein Problem, welches folgendermaßen aussieht:

    Ich hab auf meiner website einen frame indem ein buttonmenu integriert
    ist.
    Diese Buttons sind allerdings noch nicht dynamisch (es sind nur verlinkte
    Bilder).
    Um sie dynamischer wirken zu lassen, habe ich jetzt mit java-script
    imagetausch betrieben.
    Das funktioniert insofern auch ganz gut, als das sich die buttons farblich
    verändern wenn man mit der Maus rein bzw. wieder raus fährt (wie ein
    3D-Effekt).
    !!!Nun soll aber noch ein dritter Effekt hinzu kommen:
    Wenn man mit der Maus auf den Button klickt, soll dieser "einfahren", wie
    ein richtiger Button, z.B. unter Windows.
    Das bekomme ich irgendwie nicht hin - kann mir da vielleicht jemand weiter
    helfen???
    Hier ist der Quelltext, wie er bis jezt ist(erst mal nur für den ersten button):

    <html>
    <head>
    <script
    language="JavaScript">
    <!--
    button1_a= new Image();
    button1_a.src = "Home_News1.gif"

    button1_b= new Image();
    button1_b.src = "Home_News2.gif"

    button1_c= new Image();
    button1_c.src = "Home_News3.gif"


    button2_a= new Image();
    button2_a.src = "Person1.gif"

    button2_b= new Image();
    button2_b.src = "Person2.gif"

    button2_c= new Image();
    button2_c.src = "Person3.gif"


    button3_a= new Image();
    button3_a.src = "Bike1.gif"

    button3_b= new Image();
    button3_b.src = "Bike2.gif"

    button3_c= new Image();
    button3_c.src = "Bike3.gif"


    button4_a= new Image();
    button4_a.src = "Karriere1.gif"

    button4_b= new Image();
    button4_b.src = "Karriere2.gif"

    button4_c= new Image();
    button4_c.src = "Karriere3.gif"


    button5_a= new Image();
    button5_a.src = "Team1.gif"

    button5_b= new Image();
    button5_b.src = "Team2.gif"

    button5_c= new Image();
    button5_c.src = "Team3.gif"


    button6_a= new Image();
    button6_a.src = "Renntermine1.gif"

    button6_b= new Image();
    button6_b.src = "Renntermine2.gif"

    button6_c= new Image();
    button6_c.src = "Renntermine3.gif"


    button7_a= new Image();
    button7_a.src = "Rennergebnisse1.gif"

    button7_b= new Image();
    button7_b.src = "Rennergebnisse2.gif"

    button7_c= new Image();
    button7_c.src = "Rennergebnisse3.gif"


    button8_a= new Image();
    button8_a.src = "Fotoalbum1.gif"

    button8_b= new Image();
    button8_b.src = "Fotoalbum2.gif"

    button8_c= new Image();
    button8_c.src = "Fotoalbum3.gif"


    button9_a= new Image();
    button9_a.src = "Gaestebuch1.gif"

    button9_b= new Image();
    button9_b.src = "Gaestebuch2.gif"

    button9_c= new Image();
    button9_c.src = "Gaestebuch3.gif"


    //-->
    </script>
    </head>

    <body>

    <a href="Home_News.htm" target="mainFrame" onmouseover="austausch1.src='Home_News1.gif';"
    onmouseout="austausch1.src='Home_News2.gif';" onclick="austausch1.src='Home_News3.gif'">
    <img src="Home_News2.gif" border="0" width="140" height="30" name="austausch1"></a>

    </body>

    </html>
    Zitieren Zitieren
  2. 30-04-2006, 13:48 #2
    Pingu
    Pingu ist offline
    Registrierter Benutzer
    Registriert seit
    22.08.2002
    Ort
    Nürnberg
    Beiträge
    638
    Mach es doch nicht so kompliziert und nimm einfach animierte GIFs. Es muß halt nur eingestellt werden, daß die Animation nicht unendlich laufen soll.

    Außerdem, wenn Du heutzutage anfängst mit HTML. Laß das Tauschen von Bildern mit Hilfe von JavaScript gleich ganz sein. Nimm lieber CSS. Da ist das ganz einfach. Weiterhin: löse Dich von den Frames. Frames und Tabellen sind passé. Beides waren gute Hilfsmittel zur Zeiten als es noch kein ordentliches CSS gab.

    Pingu
    Geändert von Pingu (30-04-2006 um 13:52 Uhr)
    Homepage: www.pingu.info
    Zitieren Zitieren
  3. 30-04-2006, 13:53 #3
    sascha-elite
    Gast
    hallo pingu,

    ich weiß nicht wie ich die styles zu einem ani-gif zusammenfüge
    erst recht nicht wie ich es einstelle, dass das gif nicht unendlich laufen soll.
    kannste mir da weiterhelfen - oder vielleicht doch beschreiben wie ich es mit der anderen methode hinbekomme???

    gruß
    sascha
    Zitieren Zitieren
  4. 30-04-2006, 14:11 #4
    Pingu
    Pingu ist offline
    Registrierter Benutzer
    Registriert seit
    22.08.2002
    Ort
    Nürnberg
    Beiträge
    638
    Alles was Du wissen mußt findest Du hier: http://de.selfhtml.org

    Nur auf die Schnelle:
    HTML:
    HTML-Code:
    <input id="button" name="absenden" type="button" />
<a id="bild" href="seite.html" target="wasauchimmer"><img src="bild.gif" /></a>
    CSS:
    Code:
    #button:link { background-image:url(button-normal.gif); }
#button:hover { background-image:url(button-highlight.gif); }

#bild img { visibility:hidden; }
#bild:link { background-image:url(bild-normal.gif); }
#bild:hover { background-image:url(bild-highlight.gif); }
    Für animierte GIFs gibt es sicherlich verschiedenste Programme. Mitte der 90er hatte ich irgenwo mal eines für Windows her, keine Ahnung mehr wie das hieß. Heutzutage nutze ich auf meinem PowerBook natürlich Photoshop und ImageReady dafür. Für Linux wird sicherlich auch irgendwelche Tools geben. Ich würde mich nicht wundern wenn Gimp das auch kann. Jedefalls irgendein Grafik-Tool, welches animierte GIFs erstellen kann. Dort kann man dann auch irgendwo immer über eine Option einstellen, ob die Animation unendliche laufen soll oder eine definierte Anzahl. Wie dies bei Deinem präferierten Tool geht, weiß ich natürlich nicht.

    Pingu
    Homepage: www.pingu.info
    Zitieren Zitieren
  5. 30-04-2006, 14:37 #5
    sascha-elite
    Gast
    hallo pingu,

    danke für die schnelle antwort.
    selfhtml kenne ich natürlich, wobei ich daraus oftmals nicht schlau werde.
    werde es mit deiner methode probieren.
    was bewirkt eigentlich id="button" und name="absenden"???
    photoshop benutze ich auch, allerdings noch nicht so lange.
    wäre dir auf ewig dank verpflichtet , wenn du mir sagst (bitte schritt für schritt), wie man damit ani-gifs erzeugt.

    danke nochmal für die hilfe.

    gruß
    sascha
    Zitieren Zitieren
  6. 30-04-2006, 15:23 #6
    sascha-elite
    Gast
    hallo pingu,

    habe deinen vorschlag ausprobiert - funktioniert allerdings erst recht nicht - oder ich mach was falsch.

    hier der css-quellcode:

    Body {background-image: url(background.jpg);
    font-family: Tahoma;
    color: yellow;
    font-size: 15px;}

    #button:link { background-image:url(y-wide.gif); }
    #button:hover { background-image:url(y-wide2.gif); }

    #bild img { visibility:hidden; }
    #bild:link { background-image:url(y-wide.gif); }
    #bild:hover { background-image:url(y-wide2.gif); }

    und der für die html:

    <html>
    <head>
    <title>sascha-mtb-online.de</title>
    <link rel=stylesheet type="text/css" href="style_left.css">
    </head>

    <body>

    <input id="button" name="absenden" type="button" />
    <a id="bild" href="Home_News.htm" target="mainFrame"><img src="y-wide.gif" width="140" height="30"/></a>

    </body>

    </html>


    ==> kannste mir sagen, wo der fehler liegt???

    MB

    gruß
    sascha
    Zitieren Zitieren
  7. 09-05-2006, 08:59 #7
    Jadawin
    Gast
    Hallo,

    ich schlage vor, Du liest Dir mal ein paar Tutorials zu CSS durch.
    Das ist nicht böse gemeint, aber wenn Du erstmal die Grundidee
    kapiert hast, ist alles einfacher.
    (Einfach mal mit 'ner Suchmaschine nach "css tutorial" suchen.)

    Zu deinem Code:
    Zitat Zitat von sascha-elite
    Body {background-image: url(background.jpg);
    font-family: Tahoma;
    color: yellow;
    font-size: 15px;}
    Vielleicht ist das nur eine persönliche Macke von mir, aber wieso benutzt Du "Tahoma" als Font? Kannst Du garantieren, dass jeder, der Deine Seite betrachtet, diesen Font installiert hat? Möglicherweise ja nicht, und wie Deine Seite dann aussieht, kann man nicht genau sagen.
    Ich halte mich da an die Standard-Fonts: Times, Arial und Courier
    Aber wie gesagt, vielleicht bin ich da etwas übervorsichtig.


    Zitat Zitat von sascha-elite
    #button:link { background-image:url(y-wide.gif); }
    #button:hover { background-image:url(y-wide2.gif); }
    Versuchs mal mit:
    Code:
    #button { background-image:url(y-wide.gif); }
#button:hover { background-image:url(y-wide2.gif); }
    Weiterhin:
    Zitat Zitat von sascha-elite
    #bild img { visibility:hidden; }
    #bild:link { background-image:url(y-wide.gif); }
    #bild:hover { background-image:url(y-wide2.gif); }
    Ich nehme an, das Bild soll nur als Platzhalter dort sein. Dann wäre aber ein komplett transparentes GIF besser. Und dann einfach nur:
    Code:
    #bild { background-image:url(y-wide.gif); }
#bild:hover { background-image:url(y-wide2.gif); }
    Vielleicht hilft Dir das bissel weiter.
    MfG
    Jadawin
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln