Mouseover bei Bildern

Alves · Beitrag von **Alves** » 13.09.2006 17:19

Yo!

Also ich habe grundsätzlich nichts gegen JS, werde aber jetzt mal bluejokes Methode ausprobieren.

Edit: Mir gehts ja prinzipiell um das Abfangen der Maus.

Und anscheinend geht das CSS nicht wirklich. ALso, AND51 wenn es dir nichts ausmacht, würde ich eine von deinen JS Lösungen nehmen. (Mit Erklärung bitte!)

MFG

AND51 · Beitrag von **AND51** » 13.09.2006 18:09

Code: Alles auswählen

<html>
<head>
<title>Bildertausch für Alves</title>
</head>
<body>


<a href="http://www.google.de" onMouseover="document['Bezeichner'].src='MIT.bmp'" onMouseout="document['Bezeichner'].src=OHNE.bmp'">Mein geiler Link<br>
<img src="OHNE.bmp"border=0 alt="ToolTip" name="Bezeichner">
</a>

 
</body>
</html>

1. Um den automatisch gesetzen Rand bei Bildern in Lins zu vermeiden, einfach BORDER=0 setzen.

2. Bilder sind nach dem auftauchen im Code durchnummeriert, wie LinkedLists. Das erste Bild hat den Inxed 0, das 2. den Index 1, usw....

3. Du kannst Bildern mit dem NAME-Attribut* zusätzlich Namen zuweisen. Es gilt die Namensgebung wie für Prozeduren und Variablen in PB.

4. Setze die ONMOUSE*-Eventhandler im A-tag, wenn der Mouseovereffekt für den gesamten Link gelten soll (also auch, wenn du im Beispiel auf den Text gehst) oder nur in den IMG-Tag, wenn der Bildwechsel wirklich nur dann stattfinden soll, wenn sich die Maus auf dem Bild befindet.
Die Syntax lautet:
document.images[BILD].src='Neue Url.png';
BILD kann hier der entsprechende Index (also ein Long) sein oder ein in einfachen 'Hochkommata' angegebener String (die URL also).

5. die ONMOUSE*-Eventhandler, sowie die meisten Eventhandler (onClick, onDrag, ...) funktioneiren fast überall, z. T. auch da, wo sie offiziell nicht funktionieren, z. B. bei Formularen (Eingabefeldern), <DIV>, ....

6. ONMOUSE*-Eventhandler müssen nicht zu zweit vorkommen. Du kannst das Bild auch nur einmalig ändern lassen, also z. B. onMOUSEOUT weglassen.

*) TAGS, ATTRIBUTE, WERTE und ARGUMENTE
Was ist was? DIeses Beispiel von einem EIngabefeld zeigt es:

Code: Alles auswählen

<input type="text" readonly disabled>
<Tag Attribut="Wert" Argument Argument>

Oder dieses beispiel eines Links:

Code: Alles auswählen

<a href="http://google.de" target="_blank">Link</a>
<Tag Attribut="Wert" Attribut="Wert">Inhalt...</End-Tag>

Ich hoffe, ich habe alle Fragend hinreichend beantwortet.

Alves · Beitrag von **Alves** » 13.09.2006 18:23

Yo!

Danke, sehr schöner Code, hat sehr geholfen, obwohl ein Hochkomma fehlte, bloß eine Frage bleibt, wie kann ich verhindern, dass der Link angezeigt wird?

AND51 · Beitrag von **AND51** » 13.09.2006 18:30

Huch

Naja, bin in JS schon eingerostet, JS war einmal...

@ Problem: Einfach in den Link (A-Tag) das Attribut "style" mit dem Wert "visibility:hidden" einsetzen. Das macht den Link unsichtbar, aber der Link verbraucht trotzdem genauso viel Platz als sei er sichtbar.
Der Wert "display:none" schneidet den Link ganz aus bis er angezeigt wird.

Zum Anzeigen einfach block bei display oder visible bei visibility einsetzen.

Alves · Beitrag von **Alves** » 13.09.2006 19:05

Yo, Danke!

Das mit display:none hab ic hschoin versucht, allerdings ohne style Attribut

Code: Alles auswählen

<a href="google.de" display:none...>

Den rest könnt ihr euch ja denken.

AND51 · Beitrag von **AND51** » 13.09.2006 19:10

Genau, das denken wir uns lieber, als es laut zu sagen...

Bei Links muss aber immer das Protokoll davor, also z. B: http:// oder ftp:// ! Ich bekam schon mal eine E-Mail von (m)einem Homepagebesucher, der mich genau deswegen fragte. Er verlinke einfach auf www.google.de statt http://www.goodle.de. ich habs ihm dann erklärt, nämlich dass der Browser nach einer Datei suchst, wenn kein http:// davor steht und bekam 10 EUR belohnung, einfach so!

Dabei habe ich ihm eigentlich unentgeltlich geholfen... Keine Angst, ALves. Mein Tipp ist und bleibt auch für dch unentgeltlich!

Alves · Beitrag von **Alves** » 13.09.2006 19:46

Das weiß ic hja eigentlich auch. Hatte bloß keine Zeit, da ich grade meine HP neu designe, ja mit CSS und bald auch mit Bildwechsel.

Wer schon mal gucken will: www.alves666.airmode.de/index.txt

Der Shop soll nachher noch bwesser in meine Page integriert werden.

Wer Tipps hat, nicht zu bescheiden!

MFGn

PS: Ja, das "bild" soll da oben stehen. Es ist Platzhalter, bis ich ein Bild habe!

AND51 · Beitrag von **AND51** » 14.09.2006 08:42

Wieso schreibst du auf deiner Religionsseite, dass Pluto ein Planet sei? Ich dachte, das haben wir hier im Forum eindeutig widerlegt!

Schau mal in den (Forums-)Mülleimer!

#NULL · Beitrag von **#NULL** » 14.09.2006 10:15

@alves - "Wer Tipps hat, nicht zu bescheiden!"
mir gefallen solche schlichten hp's

..aber schwarz auf schwarz beim hover über den links is' nich so doll.

Alves · Beitrag von **Alves** » 14.09.2006 17:12

@AND51

Geändert!

@#Null

Wir gefallen solche schlichten HPs auch, deswegen habe ich sie ja auch so gestaltet!

Vorher war die nmoch schlichter^^

PS: Schwarz auf schwarz is Absicht, und hat ja auch einen besonderen Effekt!

PPS: Okay, für Insider ist diese Seite natürlich ein klein bisschen interessanter, zum Beispiel wenn man weiß, was KOTN ist, usf...