hilfe zum thema onmouseover

ND

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:

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';">
</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

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

ND

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

Ronald

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 (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}

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();
Normal1.src = "mehrsehen_1.gif";
Highlight1 = new Image();
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">[url='mainpage.htm'][img]pics/mehrsehen_1.gif[/img][/url]</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 (Bildnr, Bildobjekt) {
  document.getElementById("Bildnr").src = Bildobjekt.src;
}


//-->
</script>

und der Link lautet dann:

Code

<tr><td height="19" valign="top">[url='mainpage.htm'][img]pics/mehrsehen_1.gif[/img][/url]</td>
 </tr>

Im Grunde ganz einfach

G.a.d.M.

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

ND

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

Ronald

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

ND

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

Tags