expertenaustausch > microsoft.* > microsoft.frontpage

Kurt (02.02.2004, 18:41)
Hallo zusammen
Mir stellt sich folgendes Problem, das für die miesten von Euch
wahrscheinlich gar keines ist:

Ich habe auf einer Seite 5 Buttons, die problemlos funktionieren
(den Code von einem davon habe ich rauskopiert, wie folgt):

<a title="Die AVD stellt sich vor" href="unternehmen_firmenportrait.htm"
onMouseOver="image2.src='images/naviframe_bilder/butt_nav_unternehmen_blau.j
pg';"
onMouseOut="image2.src='images/naviframe_bilder/butt_nav_unternehmen_grau.jp
g';">
<img name="image2"
src="images/naviframe_bilder/butt_nav_unternehmen_grau.jpg"
border="0"></a></td>

Mein "Problem" besteht jetzt einfach darin, dass oberhalb des Buttons ein
kleines Bild zu sehen ist und ich möchte, dass dieses Bild gegen ein anderes
Bild ausgetauscht wird, sobald ich mit der Maus über den obgenannten Button
fahre.
Das heisst konkret, dass gleichzeitig jeweils der Button, über den ich mit
der Maus fahre UND das Bild (das ich ja mit der Maus gar nicht berühre)
wechseln sollen !

Kann mir jemand den richtigen Code dazu schreiben?

Vielen Dank im Voraus
Gruss Kurt
Köck Matthias (02.02.2004, 22:01)
Hallo!

> Mein "Problem" besteht jetzt einfach darin, dass
> oberhalb des Buttons ein kleines Bild zu sehen ist und
> ich möchte, dass dieses Bild gegen ein anderes
> Bild ausgetauscht wird, sobald ich mit der Maus über den
> obgenannten Button fahre.

Hast du vielleicht eine Beispielseite im Web stehen? Das
würde es sehr vereinfachen, den Code an deine Bedürfnisse
anzupassen.

Mit freundlichen Grüßen
Köck Matthias
Irmgard Schwenteck (03.02.2004, 01:18)
Hallo

Kurt schrieb:

> Mein "Problem" besteht jetzt einfach darin, dass oberhalb des Buttons ein
> kleines Bild zu sehen ist und ich möchte, dass dieses Bild gegen ein anderes
> Bild ausgetauscht wird, sobald ich mit der Maus über den obgenannten Button
> fahre.
> Das heisst konkret, dass gleichzeitig jeweils der Button, über den ich mit
> der Maus fahre UND das Bild (das ich ja mit der Maus gar nicht berühre)
> wechseln sollen !


Guck hier:


Eine Gute Alternative zu Buttons sind einfach Hintergrundgrafiken für
die Links.
Sieht fast aus wie ein Button, aber der Benutzer kann die Schriftgröße
ändern.

Irmgard
Kurt (03.02.2004, 11:51)
Hallo Matthias
Ist echt nett, dass ich so schnell Antwort erhalten habe.

Bin da in meiner Firma so n'bisschen ins kalte Wasser
geschubst worden, so nach dem Motto "mach mal ne neue
Homepage" und jetzt stellen sich mir halt so diverse
Probleme.
Im Moment liegt die Seite (einfach das, was ich bis jetzt
gebastelt habe) auf einem Testserver. Hier der link dazu.

Es betrifft die Seite "naviframe.asp"

Vielen Dank im Voraus für Deine Mühe
Gruss Kurt
Köck Matthias (03.02.2004, 15:16)
Hallo,

> Im Moment liegt die Seite (einfach das, was ich bis
> jetzt gebastelt habe) auf einem Testserver. Hier der
> link dazu. Ähm ... wo?


Mit freundlichen Grüßen
Köck Matthias
John (03.02.2004, 22:24)
Hallo Matthias

Sorry wegen dem vergessenen link, Nennt man das schon
Alzheimer? :-)

Hier isser aber jetzt:



Liebe Grüsse
Kurt Franzelin
Köck Matthias (03.02.2004, 23:07)
Hallo,

also:

1) Du gibt dem Bild-Tag eine bestimmte id, sagen wir
einfach "bild": &lt;img ... id=bild&gt;
Ach - Einige Newsreader interpretieren HTML-Tags, andere
nicht, andere teilweise. Das Zeichen &lt; steht, falls
nicht sowieso als dieses angezeigt, für die Tagklammer
nach links (das Kleiner-Zeichen) und &gt; für die nach
rechts (Größer-Zeichen). Aber zurück zum Thema.

2) In einem JavaScript werden alle Bilder vorgeladen,
damit sie nachher sofort angezeigt werden können:
&lt;script language=javascript&gt;
var imgs=new Array();
imgs[0]=new Image();imgs[0].src="default.jpg";
imgs[1]=new Image();imgs[1].src="bild1.jpg";
imgs[2]=new Image();imgs[2].src="bild2.jpg";
// und so weiter

3) Nun brauchst du die Buttonbilder. Ich habe sie hier
nicht vorgeladen, aber das funktioniert genauso wie oben:
var buttonbild=new Array
("","buttonbild1.jpg","buttonbild2.jpg",...);
Das erste Feld ist absichtlich leer!

4) Die kleine Funktion hier wechselt die Bilder aus. Wenn
die Maus über dem Element is (status=true), dann zeigt sie
das dazugehörige Bild an, danach (status=false) springt
sie wieder auf das Standardbild "default.jpg" zurück. Nach
der Funktion wird das Skript geschlossen:
function maus(nummer,status)
{ bild.src=status?imgs[nummer].src:imgs[0].src;
eval("button"+nummer).src=buttonbild[nummer];
}
&lt;/script<&gt;

4) Jetzt brauchst du nur noch die Links ändern:
&lt;a href=ziel.htm onmouseover=maus(1,true)
onmouseout=maus(1,false)&gt;&lt;img src=buttonbild.jpg
id=button1&gt;&lt;/a&gt;
sowie
&lt;a href=ziel.htm onmouseover=maus(2,true)
onmouseout=maus(2,false)&gt;&lt;img src=buttonbild.jpg
id=button2&gt;&lt;/a&gt;
und so weiter.

Das Bild oben habe ich getestet, es funktioniert. Das mit
den Buttons ist mir erst im Nachhinein eingefallen, also
melde dich noch mals, falls es Schwierigkeiten macht.

Viel Glück!

MfG
Köck Matthias
Kurt (04.02.2004, 10:20)
Hallo Matthias

Viiielen Dank vorerst für Deine prompte "Rookie"-Hilfe!
Ich melde mich nochmal, sobald ich's ausprobiert habe.

Lieber Gruss
Kurt Franzelin
Ähnliche Themen