HTMl Frage

Werbeanzeige

Pirat!

Frischling

Beiträge: 83

04.02.2004, 13:28

HTMl Frage

Hi ihr!
Ich will in html (mit js) folgenden Effekt erzielen: Wenn ich über einen Button rolle, dann muss ein kleines anderes Bild über ihn projeziert werden, um anzuzeigen dass man gerade OnMouseOver ist. Gibt es eine Möglichkeit ein Bild an irgendwelchen beliebigen Koordinaten der Webseite darzustellen?

edit:
kann man einen font in eine website implementieren (nicht nur in Bildern)?
Nehme mal an Nein.

Zum Seitenanfang

Klaus

Treue Seele

Beiträge: 245

Wohnort: Stuttgart

Beruf: Schüler

04.02.2004, 13:44

Re: HTMl Frage

Wie soll der Button denn im nicht-Hover-Zustand aussehen? In dem Szenario, das ich glaube, dass du es beschreibst

, würde ich nicht ein Bild über den Button projezieren (zumal dann wahrscheinlich die Maus nicht mehr über dem Button, sondern nur noch über dem Bild ist, und damit kein MouseOver mehr!), sondern das Bild dem Button als Hintergrund setzen.

Wenn du das nochmal genauer beschreibst, oder online vielleicht ein Beispiel hast, kann ich dir genaueres sagen

@dein edit:
Schriftartendateien sind grundsätzlich sehr blöd, da M$IE und Mozilla/Netscape das verschieden handhaben.
schau mal hier: http://selfhtml.teamone.de/css/eigenscha…hrift_datei.htm

Die Seite kann ich dir sowieso empfehlen - die is von vorne bis hinten gut strukturiert und sehr informativ

http://selfhtml.teamone.de

Mozilla Firefox
The Browser - reloaded

Zum Seitenanfang

Pirat!

Frischling

Beiträge: 83

04.02.2004, 15:28

Ich hätte das gerne so wie bei http://dixielady.com/. Sobald man über einem Button ist, wird so ein Schmetterling eingeblendet. Leider verhindert die Seite das Lesen des Quelltextes (jedenfalls kommt man da nicht ohne Umstände ran).

Danke für den Link zu den Schriftarten!

Zum Seitenanfang

Klaus

Treue Seele

Beiträge: 245

Wohnort: Stuttgart

Beruf: Schüler

04.02.2004, 17:21

Ui, das is ne schöne Seite

Also, was die da ham is ganz einfach:
Das, was du als Button siehst, is einfach nur ein Bild. Und der MouseOver ist das selbe Bild, nur, dass eben die hübschen Schmetterlinge noch obendrüber gemalt sind.
Also sieht das ganze grob so aus:

	Quellcode
1	<a href="..." ...><img src="..." ... /></a>

Jetzt brauchst du nur noch ne Funktion zum Bilderwechseln, die eben beim MouseOver und beim MouseOut aufgerufen wird, und die Bilder tauscht.
Dazu nimmst du am besten Image-Objekte, weil du so die Bilder gleich preloaden kannst, und sie beim MouseOver sofort da sind, und nicht erst dann angefordert werden.
Die Funktion rufst du am besten aus den OnMouseOver und -Out Attributen aus dem Img-Tag auf.

Klaus

PS: Ich habs grade mal noch ausprobiert - ich komm problemlos an den Source Code!

Mozilla Firefox
The Browser - reloaded

Zum Seitenanfang

Serubabbel

Frischling

Beiträge: 75

04.02.2004, 17:27

Zitat

Leider verhindert die Seite das Lesen des Quelltextes (jedenfalls kommt man da nicht ohne Umstände ran).

Geh doch einfach mal auf: http://dixielady.com/menu.html
Dort kannst du dir den Quelltext einfach anschauen.

Es gibt 2 verschiedene Möglichkeiten, so etwas zu Programmieren:

Du erstellst 2 Bilder, das erste ist das Bild in normalen Zustand (onMouseOut), das zweite mit den Schmetterlingen (oder mit was auch immer).
Dann brauchst du folgenden Quelltext:

Quellcode

<script language="javascript" type="text/javascript">
<!--
if (document.images) {
var bild1=new Image();
bild1.src="<<DAS ERSTE BILD>>";
var bild2=new Image();
bild2.src="<<Das MOUSEOVER-BILD>>";
}
else {
alert("Leider unterstützt ihr Browser kein Javascript");
}
//-->
</script>

Und dann musst du beim Button schreiben:

	Quellcode
1	<a href="<<Seite>>" onMouseOver="document.bild.src=bild2.src" onMouseOut="document.bild.src=bild1.src"><img src="<<ERSTES BILD>>" name="bild" id="bild"></a>

Oder die andere Möglichkeit:

Du hast einmal das normale Bild, und einmal das Bild, was hinzukommen soll bei MouseOver (hier: BILD2)

Du erstellt ein genau positionierten DIV Layer:

	Quellcode
1 2 3 4 5	<style type="text/css"> <!-- div.bild2 {position: absolute; top: <<VON OBEN>>; left: <<VON LINKS>>; visibility: hidden; } //--> </style>

Dann brauchst du noch ein bisschen javascript:

Quellcode

<script language="javascript" type="text/javascript">
<!--
function seh(bild) {
if (document.all) {
document.all[bild].style.visibility="visible";
}
if (document.layers) {
document.layers[bild].visibility="visible";
}
}
function nseh(bild) {
if (document.all) {
document.all[bild].style.visibility="hidden";
}
if (document.layers) {
document.layers[bild].visibility="hidden";
}
}
//-->
</script>

Und zum Schluss noch den Link:

	Quellcode
1	<a href="<<DER LINK>> onMouseOver="javascript:seh('bild2')" onMouseOut="javascript:nseh('bild2')">Text</a>

So, jetzt musst du nur noch den Layer definieren:

	Quellcode
1	<div id="bild2" name="bild2"><img src="<<BILD>>"></div>

Ok, falls du noch fragen haben solltest, schreib einach unter den Beitrag.
Mfg Serubabbel

"Es ist Zeit, dass die Menschheit ins Sonnensystem vordringt"
George W. Bush

Zum Seitenanfang

Pirat!

Frischling

Beiträge: 83

04.02.2004, 20:59

Vielen, vielen Dank! Mit diesen Informationen sollte ich in der Lage sein meine Vorstellung zu verwirklichen! Falls ich noch Fragen haben sollte poste ich nochmal.

Also nochmal thx,
byebye!

Zum Seitenanfang

Klaus

Treue Seele

Beiträge: 245

Wohnort: Stuttgart

Beruf: Schüler

04.02.2004, 22:25

Ich rate dir dringendst von der absoluten Positionierung und den zwei Layern ab!!

@Seru
Das is ja lustig

Mit JavaScript eine MessageBox anzeigen, die dem User sagt, dass sein Browser kein JavaScript ausführt *LOL*

Ich denke, wenn document.images == "undefined", dann braucht man einfach gar nichts ausgeben, sondern hat dann eben keinen Rollover-Effekt. Jemand mit einem Browser, der Javascript unterstützt, document.images aber nicht, wird gewöhnt sein, dass er so etwas nicht zu Gesicht bekommt