tektorum.de - mouseover

tektorum.de (https://www.tektorum.de/)

- Präsentation & Darstellung (https://www.tektorum.de/praesentation-darstellung/)

- - mouseover (https://www.tektorum.de/praesentation-darstellung/2679-mouseover.html)

noone

18.05.2006 13:04

mouseover

Hallo,

Frage an Florian und alle anderen HTML Cracks......

Wie kann ich ein mouseover ohne java-script erstellen? hab mir ein mouseover mit java erstellt, und dann festgestellt, dass der iexplorer das script blockiert, d.h. es funzt nicht und die info-leiste kriegt eine warnmeldungs attacke, was prinzipiell für den surfer ziemlich bedenklich ist.......

hat jemand einen vorschlag das ganze ohne Risikowarnung hinzubekommen? ich hab irgendwo mal gelesen, dass man es noch mit css machen kann....

PS ich habe früher an der uni mit dreamweaver gearbeitet, ich weiss aber nicht mehr, wie der html code interpretiert wurde. jetzt erstelle ich gerade eine site mit nvu, und dort kann man glaube ich die mousevoer nur mit java machen.....

Florian

18.05.2006 13:16

Zwei Fragen vorab.

1.) Was meinst du mit Mouseover - also was willst Du erreichen? Was soll sich wie verändern?

2.)

Zitat:

hab mir ein mouseover mit java

Meinst Du tatsächlich Java oder doch nur JavaScript?
Java ist ein Programmiersprache und etwas absolut anders und nicht im geringsten mit JS vergleichbar.

Kieler

18.05.2006 14:22

css!
[edit]:o , hast du ja selbst geschrieben
ist a:hover[/edit]

Florian

18.05.2006 14:36

Ja, dass geht aber nur für so einfach dinge wie Veränderung der Linkfarbe.
Das JS Mouseover kann alles Mögliche veranlassen...

Flo	18.05.2006 16:26

Mit CSS kann man auch Grafiken austauschen. Das geht so:

Code:

a {

text-decoration:none;

height:15px;

padding-left:15px;

background-repeat:no-repeat; }

Code:

a:hover {

background-image:url(https://cdn.tektorum.de/images/bild.gif);

}

Florian

noone

18.05.2006 18:05

natürlich meine ich Java Script, bin nur zu faul das jedesmal auszuschreiben....... was mich jetzt gleich mal einen ganzen Satz gekostet hat.....

Also: ich will den 0815 Mouseover mit Austausch der Grafiken, z.B. Buttonknöpfe etc.

Und von Css hab ich keine Ahnung, deswegen hatte ich mir Javascript erhofft. Nur dass dan die Sicherheitsmeldung kommt, ist echt bescheiden.....

mein Script geht glaub ich irgendwie so:

onmouseover src='linkgrafik1'
onmouseout src='linkgrafik2'

Liegt das an den Grundeinstellungen der Seite? Ein Mouseover ist doch kein bösartiges Javascript, oder????

Postet mal bitte einen CSS Code für Dummies, z.b. mit Angaben wie "grafik1" und "grfik2"..... kann ich wahrscheinlich auch danach googeln...

letzte Frage: wie übersetzt denn Dreamweaver den Mouseover?

Flo	18.05.2006 18:27

Zitat:

Originally posted by noone
Postet mal bitte einen CSS Code für Dummies, z.b. mit Angaben wie "grafik1" und "grfik2"..... kann ich wahrscheinlich auch danach googeln...
[/B]

Code:

a {

text-decoration:none;

height:15px;

padding-left:15px;

background-repeat:no-repeat; }

Code:

a:link {

background-image:url(https://cdn.tektorum.de/images/bild_1.gif);

}
 

a:hover {

background-image:url(https://cdn.tektorum.de/images/bild_2.gif);

}

Kieler

18.05.2006 19:54

Zitat:

Originally posted by Florian
Ja, dass geht aber nur für so einfach dinge wie Veränderung der Linkfarbe.
Das JS Mouseover kann alles Mögliche veranlassen...

He Florian, da unterschätzt Du CSS aber gewaltig, Du kannst per CSS sogar Remote-Rollovers erstellen.
Sieh mal hier
hinweist
Matthias

Florian

18.05.2006 20:02

Also wenn du tatsächlich nur das Image, welches GLEICHZEITIG als Link dient ändern möchtest, dann kannst Du das mit CSS machen, so wie Flo es bereits gezeigt hat.

In der CSS Datei von archinoah.de steht dann z.B.

Code:

/* Definition der allgemeinen Links*/
 

a:link         {

                color: #E47B00;

                text-decoration: none;

                }
 

a:active {

                color: #EFAE63;

                text-decoration: none;

                }
 

a:visited {

                color: #E47B00;

                text-decoration: none;

                }
 

a:hover {

                color: #EFAE63;

                text-decoration: underline;

                }

Statt Farben kannst Du auch genauso gut Images einsetzen.
Wenn Du eine ordentliche fehlerfreie Webseite bauen möchtest und zu den Leuten gehörst, die auch ganz gerne mal ein Buch zum nachschlagen (statt des Internets) nutze, dann solltest du Dir Cascading Stylesheets besorgen.

Ein JS mouseover kann aber natürlich noch viel mehr.
Zum einen kann man damit eine "dynamische" Navigation erstellen. So etwas habe ich für den Lehrstuhl "Gebäudetechnik und Entwerfen" der TU Berlin mal realisiert: http://www.a.tu-berlin.de/GtE/ (Siehe Navigationsleiste unten, allerdings nur im IE).
Eine ähnliche Funktion gibt's bei http://www.archinoah.de/. Wenn Du auf der Startseite über das Bild fährst, erscheinen darunter kleine Beschreibungen des Inhaltes und auf http://www.acfplc.com/people/ beim Berühren der Personenfotos.
Den entsprechenden Code gibt's z.B. unter http://www.qiksearch.com/javascripts...content20.htm. Allerdings mit einem OnClick - aber ein OnMousover geht genauso.

Grüsse
Florian

Florian

18.05.2006 20:06

Zitat:

Originally posted by planmatsch
He Florian, da unterschätzt Du CSS aber gewaltig, Du kannst per CSS sogar Remote-Rollovers erstellen.
Sieh mal hier
hinweist
Matthias

Hmm, hast recht, klar - ich kann natürlich die Position eines Bildes sonst wohin setzen. Aber im Vergleich zu JS hat es seine Grenzen.

Kieler

18.05.2006 20:16

ja, irgendwann muss dann auch PHP dazukommen, ich finde JS da
komfortabler (in Form von GoLive Aktionen, sonst ist mir JS auch zu aufrissig)
und sehe auch keinen wirklichen Grund mehr es nicht einzusetzen.
DHTML braucht für´s D halt JS.

Florian

18.05.2006 20:38

Zitat:

ja, irgendwann muss dann auch PHP dazukommen, ich finde JS da
komfortabler

???
Ich komm da nicht mehr so ganz mit. PHP nutzt man um dynamische Seiten (nicht DHTML) zu generieren, vor allem, um Sie in Ihrer Aktualität und den Nutzer entsprechend anzupassen. Das kann man dann auch mit Perl, Server-Site Java, CGI etc. machen.

JavaScript wird eingesetzt, um Interaktionen des Nutzers ohne (zwangsläufigen) Reload zu ermöglichen.

Zitat:

(in Form von GoLive Aktionen, sonst ist mir JS auch zu aufrissig)
und sehe auch keinen wirklichen Grund mehr es nicht einzusetzen.

GoLive Aktionen erzeugen finde ich immer zu viel Code, weil sie für alle möglichen Möglichkeiten ausgelegt werden. Ich finde es dabei immer äusserst schwierig etwas zu ändern - ich muss aber zugeben, dass ich von JavaScript keine Ahnung habe.

Grüsse
Florian

P.S. http://www.sitepoint.com/forums/ dürfte so das beste Forum für ALLE (HTML, XHTML, CSS, PHP, ASP, JavaScript, Java, Datenbanken wie z.B. MySQL...) Fragen rund ums Web sein.

noone

18.05.2006 21:07

okay, ich habs verstanden, aber woher kommt nun diese Risikowarnung beim Internet Explorer?

Florian

18.05.2006 21:11

Kommt die Warnung auch bei den von mir angegebenen Beispielseiten?

noone

18.05.2006 22:39

natürlich nicht........ sch.. gell???

Florian

18.05.2006 22:47

Also, wie gesagt, ich habe von JS eigentlich keine Ahnung.
Aber ich versuch's mal:

1) onmouseout src='linkgrafik2' ist keinerlei Anweisung. Sprich da muß etwas kommen wie onmouseout="javascript:showContent('Inhalt')
[PHP]<a href="javascript:void(0);" onmouseout="javascript:showContent('Inhalt');">
[/PHP]
2) Ich weiß nicht wie die Handhabung von single (') und doble (") qoutes bei JS ist...

noone

18.05.2006 23:21

hier mal ein Beispiel:

- eine eingefügte Grafik, die bei mouseover wechselt:

[PHP]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body style="direction: ltr;">
<img onmouseout="src='grafik2'" onmouseover="src='grafik1'"
style="width: 362px; height: 500px;" alt="" src="grafik2">
</body>
</html>
[/PHP]

noone

18.05.2006 23:25

ist der Code nicht mit '[code]' Tag sichtbar????

Florian

19.05.2006 00:45

Sollte, tut er aber nicht :confused:

Nimm einfach PHP statt CODE - dann wirs auch schön bunt.
Hab Deinen und meinen letzten Beitrag nochmal überarbeiten...

Florian

19.05.2006 00:50

So wie ich das sehe, fehlt bei Dir einfach das JavaScript. D.h. der IE erwartet irgendeine Funktion scr zu finden, die Du aber nie geschrieben hast...
Diese Funktionen sind i.d.R. im Kopfteil des html Dokuments "versteckt".
Guck Dir mal den Quellcode von http://www.qiksearch.com/javascripts...-content20.htm an.

Kieler

19.05.2006 11:11

[OT]

Zitat:

Originally posted by Florian
???
Ich komm da nicht mehr so ganz mit. PHP nutzt man um dynamische Seiten (nicht DHTML) zu generieren,

Jo, das habe ich auch gar nicht gesagt, ich schrieb:

Zitat:

DHTML braucht für´s D halt JS.

habe im Zusammenhang
mit DHTML von JS gesprochen.
Um das noch mal kurz zu präzisieren, Du schriebst, dass man mit CSS
schnell an Grenzen kommt, die man mit JS überschreiten kann, da dachte
ich dass Du von Menüstrukturen sprichst, wie man sie z.B. mit der
menumachine erstellen kann.
Ich habe so etwas einmal versucht, am Ende reichte mein Latein (kleines
Latinum) nicht ganz, um das mit JS zu realisieren. Diese Strukturen ließen
sich aber mit CSS und PHP erstellen, im Zweiten habe ich aber gar kein
Latinum :D...[/OT]

noone

19.05.2006 11:41

Florian, das Mouseover funktioniert einwandfrei, mein Problem ist nur, daß im internet explorer die Info-Leiste Alarm schlägt, und das ist bei einem Internetauftritt eher bescheiden......

Florian

19.05.2006 13:27

Zitat:

Originally posted by planmatsch
[B][OT]
Jo, das habe ich auch gar nicht gesagt, ich schrieb:
habe im Zusammenhang
mit DHTML von JS gesprochen.

Ist eigentlich auch egal, ich habe nur folgenden Zusammenhang kommentiert

Zitat:

ja, irgendwann muss dann auch PHP dazukommen, ich finde JS da
komfortabler

@noone
:cool: ich sach' doch ich hab von JS keine Ahnung...
Hab aber Deinen Code mal benutzt und den IE in meiner Emulationsumgebung (hab ja kein Windows-PC) benutzt. Da gab's aber keine Fehlermeldung. Sicherheit hab ich auf Standardstufe gestellt...

noone

19.05.2006 14:41

ok danke. ich werde auch mal an anderen Rechnern probieren, obs ne meldung gibt.....

Andere Frage: Wenn du verhindern willst, dass Schriften grösser dargestellt werden, nimmt man dann besser eine Grafik oder gibts noch elegantere Methoden (Flash will ich nicht unbedingt benutzen....)

Tom	19.05.2006 15:15

Steuerst Du die Font-Größe nicht über css, oder meinst Du noch was anderes? Wenn man die Größe in den Stylesheets in Pixel angibt (z.B. font-size: 10px), ist die Schrift unter Win und Mac auch def. gleich, was bei einer Angabe in Point nicht der Fall ist.

Florian

19.05.2006 15:51

Vielleicht mal etwas generelles zum Layouten von Webseiten.
Die klassische Methode eine Webseite mit font Tags und Tabellen zu gestalten ist out ! ;)
Das komplette Layout einer Webseite sollte über CSS geführt werden. Damit trennt man nämlich Inhalt von Layout.
Am sinnvollsten ist es, eine einzige CSS Datei zu haben auf die alle Dokumente verweisen. Dadurch wird der Quellcode schlank gehalten. Die Datei wir nämlich nur beim Abruf der ersten Seite heruntergeladen und kann für alle Folgeseiten von Deinem Browser weiter verwendet werden.

Die Referenzierung der CSS Datei erfolgt im Kopfteil der html-Seite:

[PHP]
<link rel="StyleSheet" href="pfad_zur_datei/style.css" type="text/css"/>
</head>[/PHP]

In die CSS Datei stehen alle Definitionen von Positionen und Designs (einschließlich der Schriften)

Code:

body {

                background-color: #706B63;

                margin: 0;

                font-family: Helvetica, Arial, san-serif;

                font-size: 12px;

                color: #35342f;

                }
 
 

h1                 {

                font-size: 14px;

                font-weight: 600;

                /*font-variant: small-caps;*/

                text-transform: uppercase;

                margin-top: 0px;

                margin-bottom: 20px;

                }

body Beschreibt hier z.B. das Grundaussehen der Seite. h1 die Darstellung des Inhalts innerhalb des <h1></h1> Tags.

Mit Definitionen wie

Code:

.small {

                font-size: 10px;

                }
 

.medium {

                font-size: 11px;

                }
 

.normal {

                font-size: 12px;

                }
 

.large {

                font-size: 13px;

                }

kannst Du das Aussehen des Textes innerhalb eines SPAN oder DIV Tags regeln.

ETC...

Das Schöne daran ist, dass Du an zentraler Stelle jederzeit das Aussehen der kompletten Site ändern kannst.

Ein Layout über Tabellen sollte mittlerweile vermieden werden. tektorum.de ist leider so noch gestaltet. archinoah.de verzichtet - bis auf in tatsächlich tabellarischen Darstellungen - komplett auf Tabellen. Bei Tabellen kann spätestens ab der dritten Verschachtelung eine richtige Darstellung nicht mehr garantiert werden.

Persönlich würde ich auch nurnoch XHTML Code verwenden. Ein guter Link für alle zulässigen Tags in HTML und XHTML ist http://www.w3schools.com/tags/default.asp .
Auf deren Starseite findest Du auch sehr gute Links zu weiteren Themen wie z.B. CSS.

Und ich kann Dir nach wie vor Cascading Stylesheets dringend ans Herz legen.
Beim Selberbeibrigen von HTML sucht man immer nur nach Lösungen für Probleme, ist sich aber über Probleme scheinbar funktionierender Schreibweisen etc. häufig nicht im klaren. Man findet auch i.d.R. nur was man sucht - bei einem Buch wird man auch auf vieles andere aufmerksam gemacht...

Am Ende ruhig mal http://jigsaw.w3.org/css-validator/ und http://validator.w3.org/ nutzen. Bei statischen Seiten sollte es Möglich sein alle Fehler zu bereinigen. Bei Datenbankgestützten Seiten ist das leider fast unmöglich...

Kieler

19.05.2006 20:32

...wer dann noch ganz allgemein was über Webseitengestaltung erfahren will,
kann hiermit ja vielleicht was mit anfangen:
Das aktuelle Dr. Web Buch 5 Gratisdownload als PDF

Tom	20.05.2006 12:07

@ Florian - Zu dem reinen CSS-Design und einem Verzicht auf Tabellen würde ich sagen, dass es zwar zeitgemäß, angesagt & praktisch dadurch ist, dass man endlich in Ruhe pixel-genau gestalten kann, aber für den Neuling / Gelegenheits-Designer auch recht abstrakt.

Ich persönlich mag noch eine nette Tabellen-Struktur, die mit CSS formatiert/gestaltet wird, weil sie einem konventionellen Layout-Raster nahe ist. Ich habe erst sehr spät das Wunder-Attribut style="table-layout:fixed" entdeckt, das man in den normalen Table-Tag einfügen kann. Dadurch sind die Höhen- und Breitenangaben für Zeilen und Spalten fixiert und werden auch präzise eingehalten. Ohne das bekommt man bei Tabellen-Layouts ja auch Weinkrämpfe (ich zumindest) ...

http://msdn.microsoft.com/workshop/a...ablelayout.asp

Alle Zeitangaben in WEZ +2. Es ist jetzt 13:10 Uhr.