Ergebnis 1 bis 7 von 7

Thema: hilfe zum thema onmouseover

  1. #1
    Youngster
    Registriert seit
    08.05.2006
    Ort
    schweiz
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard hilfe zum thema onmouseover

    hi zusammen

    ich weiss dass es dazu schon hunderte threads gibt, aber irgendwie krieg ich das mit dem onmouseover trotzdem nicht hin.

    ich möchte eine grafik als link benutzen. wenn ich darüber scrolle wird sie grösser und wenn ich wegscrolle wieder kleiner.



    folgenes habe ich im header:

    <script type="text/javascript">
    Normal1 = new Image();
    Normal1.src = "mehrsehen_1.gif";
    Highlight1 = new Image();
    Highlight1.src = "mehrsehen_2.gif";

    function Bildwechsel (Bildnr, Bildobjekt) {
    window.document.images[Bildnr].src = Bildobjekt.src;
    }
    </script>



    und das habe ich dann in eine tabelle eingefügt:

    </tr>
    <tr><td height="19" valign="top"><a href="mainpage.htm" onMouseOver="image.src='pics/mehrsehen_2.gif';" onMouseOut="pics/mehrsehen_1.gif';">
    [img]pics/mehrsehen_1.gif[/img]</a><tr>
    </tr>



    nun gibt es aber einen laufzeilenfehler und wenn ich wegscrolle verändert sich das bild nicht mehr. was habe ich falsch gemacht? danke für eure hilfe.

    mfg

    andi
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Gast

    Standard

    Benuzt doch CSS das ist besser
    a.navi{background-image:url(bild.gif);
    }
    a.navi:hover{background-image:url(bild2.gif);
    }

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    08.05.2006
    Ort
    schweiz
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Anonymous
    Benuzt doch CSS das ist besser
    a.navi{background-image:url(bild.gif);
    }
    a.navi:hover{background-image:url(bild2.gif);
    }
    ich glaube das geht gar nicht, denn das bild selber enthält die schrift und soll auch der link sein. oder könntest du mir das genauer erklären? thx andi

  4. #4
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Re: hilfe zum thema onmouseover

    Moin!

    Auch wenn Stylesheets zweifelsohne schöner und zuverlässiger sind, als Javascripte, so wollen wir doch mal eben das Problem lösen:

    Das Geheimniss liegt in diesem Teil des Scriptes:
    Code:
    function Bildwechsel &#40;Bildnr, Bildobjekt&#41; &#123;
      window.document.images&#91;Bildnr&#93;.src = Bildobjekt.src;
    &#125;
    Dieses script erwartet, daß der Link ihm 2 Daten zusendet:

    1. die Nummer des Bildes (Variable 'Bildnr'):
    Du mußt auszählen, welches Bild duch wechseln willst. Dabei zählen alle Bilder mit, die per IMG-Tag im Quelltext stehen und zwar in der Reihenfolge wie sie im Quelltext stehen. Das erste Bild hat diee Nummer null, das 2. die 1, das 3. die 2 usw.
    Hast du (lt. Quelltext) z.B. ein Logo auf der HP und darnter noch 2 Animationen, dann erst den ersten Navigationsbutton, so hat der erste Button die laufende Nummer 3 (da er das 4. im Quelltext erwähnte Bild ist und wir bei 0 anfangen zu zählen).

    2. das Bildobjekt(Variable 'Bildobjekt'):
    Das Bildobjekt hast du zuvor im Script defeniert, und zwar hier:
    Code:
    Normal1 = new Image&#40;&#41;;
    Normal1.src = "mehrsehen_1.gif";
    Highlight1 = new Image&#40;&#41;;
    Highlight1.src = "mehrsehen_2.gif";
    "Normal1" oder "Highlight1" sind nichts anderes als definierte Variablen.
    Wenn wir nun also der Funktion sagen, welches Bild wir ducrch welches ersetzen wollen, dann sollte es klappen.
    So sieht das dann aus (und das mußt du anpassen, denk daran die Bilder zu zählen, damit du die richtige Nummer erhältst):

    Code:
     <tr><td height="19" valign="top">[img]pics/mehrsehen_1.gif[/img]</td>
     </tr>
    Das ist eigentlich alles.

    Nachteil: Wenn du später eine weitere Grafik in die Seite einbaust, dann paßt nichts mehr. Von daher ist die CSS-Variante allemal besser. Alternativ kann man auch jedem Bild eine ID geben und statt der laufenden Nummer des Bildes gezielt die ID ansprechen:
    Code:
     
    <script type="text/javascript">
    <!--
    function Bildwechsel &#40;Bildnr, Bildobjekt&#41; &#123;
      document.getElementById&#40;"Bildnr"&#41;.src = Bildobjekt.src;
    &#125;
    
    //-->
    </script>
    und der Link lautet dann:
    Code:
    <tr><td height="19" valign="top">[img]pics/mehrsehen_1.gif[/img]</td>
     </tr>
    Im Grunde ganz einfach

    G.a.d.M.

    Ronald
    <der Javascript grade deshalb haßt, weil er es -teilweise- versteht.... >

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    08.05.2006
    Ort
    schweiz
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    danke ronald für deine sehr ausführliche antwort=) aber ich bin mir immer noch im unklaren wie das mit dem css funktionieren sollte wenn das bild gleichzeitig der link ist. ich kann doch kein hintergrundbild verlinken, oder?mfg andi

  6. #6
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du machst über das Hintergrundbild ein genau passendees Nichts - sprich z.B. einen Link ohne Text, welcher mit CSS auf die Bildgröße angepaßt wird.
    Mit "display:block" kann man dann den ganzen Bildbereich zum Link erklären, ohne daß die Hintergrundgrafk wirklich ein Linkträger ist. DAs klingt kompliziert, ist aber ganz einfach.

    Wie kurz der Quelltext einer HP dadurch werden kann, das kannst du dir hier ansehen -> http://ronald.ro.ohost.de/forum-hilfe/petra. Den Quelltext hab ich vorhin mal eben schnell nebenbei für Petra zusammengeschrieben (die Grafiken sind von ihr).
    Schau dir ruhig mal den Quelltext und die dazugehörige CSS-Datei ( http://ronald.ro.ohost.de/forum-hilfe/petra/styles.css ) an - schaffst du das Gleiche mit weniger Quelltext ?

    So, versuche es zu verstehen - ich geh ins Bett

    G.a.d.M.

    Ronald

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    08.05.2006
    Ort
    schweiz
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    danke für deine hilfe ronald, werde alles ausprobieren bis es klappt mfg andi

Ähnliche Themen

  1. onMouseover
    Von kloppy1123 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 28.04.2007, 14:16
  2. benötige dringend hilfe zum Thema Drucker
    Von Lifestyle16 im Forum Computer - Internet Forum
    Antworten: 0
    Letzter Beitrag: 24.10.2006, 10:20
  3. onmouseover
    Von gelöschter User im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.12.2005, 21:30
  4. Brauche dringend Hilfe zum Thema Formularen in HTML->Wich
    Von Hatework im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 07.12.2004, 13:36
  5. hi ich braüchte hilfe im thema formular
    Von jakobus im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 11.09.2004, 14:18

Stichworte

Berechtigungen

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