Frage zu Webprogrammierung

von Dom15, 30.09.07.

  1. Dom15

    Dom15 Registrierter Benutzer

    Im Board seit:
    08.03.04
    Zuletzt hier:
    4.12.12
    Beiträge:
    710
    Ort:
    Mannheim
    Zustimmungen:
    1
    Kekse:
    48
    Erstellt: 30.09.07   #1
    Hi Leute, ich würde gerne folgenden Effekt erzielen, weiß aber nicht wie ich ihn umsetzen kann:

    Ich habe diese Grafik für unser Bandwebsite erstellt - allerdings soll bei den schriften unten das licht noch aus sein. das ist ja kein problem - aber jetzt gehts los ;)

    [​IMG]

    dann habe ich vor, 4 kleinere grafiken nur mit dem jeweiligen text und ein bisschen hintergrund bei denen das licht aber an ist zu erstellen.
    und die leg ich dann genau über die texte der großen grafik wo die lichter aus sind.

    und dann soll die leuchtgrafik, wenn ich über einen text mit dem cursur gehe, verschwinden
    damit praktisch nurnoch die "untere" grafik zu sehen ist, bei der das licht aus ist.

    So... da ich aber keine Ahnung hab wie ich das mit diesem Ausblendeffekt umsetzen kann brauch ich Hilfe :) vllt. weiß ja jmd bescheid

    Vielen Dank schonmal,
    Gruß
    Dominik
     
  2. ars ultima

    ars ultima HCA Recording HCA

    Im Board seit:
    19.03.05
    Zuletzt hier:
    21.11.14
    Beiträge:
    16.702
    Ort:
    Düsseldorf
    Zustimmungen:
    867
    Kekse:
    36.410
    Erstellt: 01.10.07   #2
    Ist es bedientechnisch nicht logischer, dass die Lichter normalaus sind, un angehen, wenn mn mit der Maus drüber geht?
    Egal, umsetzbar z.B. per Javascript. Im Head schreibst du für jeden Button ein solches Script (button und wbutton sind einmal der normal, und einmal de ausgewählt Button):
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    wbutton = new Image;
    wbutton.src = "wbutton.gif";
    button = new Image;
    button.src = "button.gif";
    // End -->
    </script>
    Und im Body dann an der Stlle, wo der Button sein soll:
    Code:
    <a HREF="zielseite.html" 
     onmouseover="buttonname.src=wbutton.src"
     onmouseout="buttonname.src=button.src"> 
     <img border="0" src="button.gif" name="buttonname"></a>
    Zumindest funktioniert es so, vielleicht geht es auch besser :-)

    Javascript wird für so eine Kram schnell benutzt, obwohl es eigentlich nicht nötig ist, und unter Barrierefreiheitsgesichtspukten auch nicht gut. Man kann sowas nämlich auch mit Stylesheets lösen. Genauen Code habe ich jetzt nicht, aber man kann halt ein div anlegen mit Hintergrun bild, welches dessen Pfad man eben für a:hover, a:link etc. unterschiedlich definert. Eigentlich sogar leichter.

    Ansonsten ein allgemeiner Tip: Bei solchen Probleme einfach mal auf eine Seite gehn, wo das so gemacht ist, wie du es haben willst, und dann in den Quelltext schauen.

    EDIT: Fehler im Code korrigiert.
     
  3. Dom15

    Dom15 Threadersteller Registrierter Benutzer

    Im Board seit:
    08.03.04
    Zuletzt hier:
    4.12.12
    Beiträge:
    710
    Ort:
    Mannheim
    Zustimmungen:
    1
    Kekse:
    48
    Erstellt: 01.10.07   #3
    Hi :)
    Vielen Dank für die Hilfe! Werd ich heute mittag gleich mal ausprobieren.
    Ja, du hast schon recht - dass es logischer wäre, wenn die lichter aus wären aber.... mal schaun :)