• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

zusammen setzen einer Funktion

Status
Für weitere Antworten geschlossen.
Mach es statt mit JavaScript mit CSS. Deine JavaScript-Lösung hat den Nachteil, dass sie nicht funktioniert, wenn jemand JS abgeschaltet hat. Mit CSS und der Pseudoklasse ":hover" geht das.
 
Mach es statt mit JavaScript mit CSS. Deine JavaScript-Lösung hat den Nachteil, dass sie nicht funktioniert, wenn jemand JS abgeschaltet hat. Mit CSS und der Pseudoklasse ":hover" geht das.

Das hab ich jetzt schon in dem anderen Thread versucht zu erklären:

http://www.html.de/html-und-xhtml/23524-mouseover-effekt-bloss-wie.html

-_-" Neuanmelden nur wegen einer neuen Frage ist Schwachsinnig. (Behaupte das jetzt einfach mal so weil es genau das ist was ich gepostet habe in s.o. + hier: http://www.html.de/javascript-ajax-und-dhtml/23525-mouseover-effekt.html#post184279 )

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" lang="de"> 

<head>
<title> test </title>
</head>

<body>

<a href="ich bin der dumme link"
onmouseover="austausch1.src='bild1.png';" 
onmouseout="austausch1.src='bild2.png';"> ich bin der dumme link </a>

<img src="bild1.png" width=" " height=" " alt="schalter aus" name="austausch1" />

</body>
</html>
so vllt..?= *Seufz*
Gruß
Loon3y
 
Zuletzt bearbeitet:
das ist nicht so die kunst ;-)

du schreibst in html so:

Code:
<a class="link" href="deineseite.html" > deine Seite </a>

in css schreibst du dann:

Code:
.link {
background-image:url(deinnormalesbild.jpg);
}

.link:hover {
background-image:url(deinmousoverbild.jpg);
}

natürlich kannst du die einzelnen links auch noch weiter designen. mit css steht dir da tür und tor offen. aber ich hab mich jetzt nur mal auf ein wechselndes hintergrundpic beschränkt ;-)

grüße hokage
 
dieses forum ist eig. nicht dafür gedacht den usern css eizubringen ...

normalerweise würde ich immer eine ausgelagerte css datei machen, die du auf deine komplette website überträgst. so geht das ändern vom design um einiges einfacher.
also du legst eine datei z.B. "design.css" an und speicherst die in dem gleichen ordner, wie auch die html datei.
auf die html datei schreibst du dann im head bereich:

Code:
<link rel="stylesheet" href="design.css" type="text/css"/>

so und in die css datei kommt dann der code den ich dir im letzten threat geschrieben hab.

fertig ;-)


man kann die css befehle auch direkt in html einbinden, aber darüber kannst du dich auch in google informieren^^

oder hier:

Cascading Style Sheets – Wikipedia

grüße hokage
 
Zugegeben: CSS ist mir bis heute völlig fremd.
Dafür, dass CSS schon fast 10 Jahre alt ist und als einzige Sprache für das Aussehen der Website verantwortlich ist (HTML ist es nicht!), ist das schon bemerkenswert.

Wie arbeite ich mit CSS?
Dein gesamtes Design und Layout schreibst Du in ein externes Stylesheet.
Mit HTML machst Du nur die logische Struktur (Semantik).

]Ist für mich wirklich ganz neues gebiet... aber ich bin sehr gespannt :-)
Aber für eine anständige Website eigentlich zwingend.
 
...kann mir mal einer sagen warum alle so kompliziert schreiben?
Habe gerade Seitenweise gegoogelt. Das tue ich nun seit einer Woche um heraus zu finden wie ich diese einfache Funktion hin bekomme.

Was ich möchte ist doch ganz einfach:

Ich habe einen Link: {link}

Dieser setzt sich in HTML um in:
<a href="http://www.der_aktuelle_Link </a>

An diesem Link kann ich NICHTS verändern.

Nun möchte ich aber so etwas wie einen onmouseover-effekt haben, wo bei "Maus-über" einfach nur ein Bild verändert wird.
Dies kann ich nur auf der HTML-Seite selbst (keine externe möglich).

Kann mir bitte bitte jemand mal ein Beispiel schreiben?
Ein einfaches Beispiel gerne in CSS mit Bild1 und Bild2.

Nebenbei geht es sich um 2 Schalter zum 'vor' und 'zurück' blättern.
Das Ding macht mich echt verrückt. :lol:

Dabei soll es doch vielleicht sogar gehen das dass 2. Bild überblendet werden kann!? Mit Fade oder so.

help!
 
also ich weiß grad irwie mal wieder nicht wo das problem ist^^ ...

ich hab dir doh schon im letzten oder im vorletzten threat geschrieben, wie du deinen mouseovereffekt mitt css hinbekommst.

ich verstehe nicht warum du dein css stylesheet nicht in eine eigene css datei auslagern willst, aber die entscheidung liegt ja bei dir. willst du das stylesheet in deine html-datei direkt einbinden schreibst du so:

Code:
<html>
<head>
   <title> deine seite </title>

   <style type="text/css"> 
     <!--
     .link {background-image:url(deinnormalesbild.jpg);
     }
     .link:hover {background-image:url(deinmousoverbild.jpg);
     }
     --> 
   </style> 

</head> 
<body>

    <a class="link" href="deineseite.html" > deine Seite </a>

</body> 
</html>
so das ist jetzt deine komplette html-datei mit einem link der einen mpuseovereffekt hat.
im css code musst du nur noch den bildernamen angeben
(vorrausgesetzt bild ist im gleichen ordner wie html-datei, sonst kompletter bildpfad)

ist jetzt alles klar???
ich hoffe doch

grüße hokage
 
AAAA!

Was ist das für ein Mist?
Ich habe nun heraus gefunden wie es funktioniert - und es ist doof!

<head><style type="text/css">
a:link {background-image:url(
http://15779780.jpg);}
a:hover { background-image:url(
webhosting24 - Login);}
</style></head>

{LINK}

So geht es zwar, aber jeder blöde link der gesamten Seite wird so Formatiert! Ist html und CSS so schwach auf der Brust das hier ende ist??

Kann mir jemand sagen ob es wirklich unmöglich ist jeden Link einzeln zu steuern?

Wie gesagt: Schalter für 'vor' Pfeil nach links der aufleuchten soll.
Schalter für 'rechts' Pfeil nach rechts der aufleuchten soll.

Das kann doch nicht so schwer sein, oder??
Und bitte, ich bin mit VBA groß geworden. Ich habe von HTML un CSS keine Ahnung.
Darum würde ich mich über funktionsfähige Scripts freuen. Bruchstücke mit Erklärungen helfen mir wirklich nicht, wenn ich auch verstehen möchte was da ab geht.

Danke!!!

 
Natürlich kannst du Elemente direkt ansprechen. Du musst in den Link ein "class" oder "id" einfügen um sie direkt steuern zu können. Class wird benutzt, wenn das Element öfter auf der Seite vorkommt, eine id muss einzigartig sein.
Beispiel class
html:
Code:
<a href="xy.html" class="meinlink">Link</a>
css:
Code:
a.meinlink:link [COLOR=black]{background-image:url([/COLOR][COLOR=black][URL="http://15779780.jpg/"]http://15779780.jpg);[/URL][/COLOR][COLOR=black]}
a.meinlink:hover [/COLOR][COLOR=black]{ background-image:url([/COLOR][COLOR=black][URL="http://15779774.jpg/"]webhosting24 - Login[/URL][/COLOR][COLOR=black]);}[/COLOR]

Beispiel id:
html:
Code:
<a href="xy.html" id="meinlink">Link</a>
css:
Code:
a#meinlink:link [COLOR=black]{background-image:url([/COLOR][COLOR=black][URL="http://15779780.jpg/"]http://15779780.jpg);[/URL][/COLOR][COLOR=black]}
a#meinlink:hover [/COLOR][COLOR=black]{ background-image:url([/COLOR][COLOR=black][URL="http://15779774.jpg/"]webhosting24 - Login[/URL][/COLOR][COLOR=black]);}[/COLOR]
 
also...

tut mir leid...
aber langsam fange ich echt an, an dir zu zweifeln^^ ;-)

was habe ich denn in meinem letzten post geschrieben???

sag mal, liest du das überhaupt?
tut mir leid, jetzt hab ich auch kein bock mehr dir zu helfen^^
aber du hast ja noch lenchen, der dir netter weise alles 10 mal durchkaut bis du es verstehst -_-'
 
Yehar!!

Ihr seid die Besten!!!
Mit zuletzt Deiner Anleitung Lenchen habe ich es hin bekommen.
Wir haben uns irgendwie überschnitten hokage555.

ABER,- eine Frage habe ich noch:
Nun habe ich den Background der sich ändert. Der ist aber ausgerichtet an der größe des Titels vom Link.

Wie ist es wenn ich nur eine jpg als Schalter habe, und keinen Text??
Das ist der letzte springende Punkt meiner HP.

Könnt ihr mir da auch helfen??

Nochmal DANKE für die genialen Hilfen!!



NACHTRAG: Sorry hokage555. Ich hatte wohl irgendetwas nicht richtig verstanden. Wenn Du stundenlag gegoogelt hast, ohne Erfolg, so viele Seiten gelesen hast und versucht hast die Einzelheiten zu verstehen, hast du irgendwann den Kopf einfach zu.
 
du kannst den einzelnen links auch eine feste breite und höhe zuweisen.

dann bedeckt das hintergrundbild nicht nur den titel des links, sondern die komplette fläche, die du mit deinen angaben gemacht hast.

d.h. du fügst diese angaben in dein stylesheet noch ein.
und zwar hier:

Code:
a.meinlink:link [COLOR=black]{
[COLOR=Red]width:100px;
height:25px;
[/COLOR]background-image:url([/COLOR][COLOR=black][URL="http://15779780.jpg/"]http://15779780.jpg);[/URL][/COLOR]
}
[COLOR=black]a.meinlink:hover [/COLOR][COLOR=black]{ 
[COLOR=Red]width:100px;
height:25px;
[/COLOR]background-image:url([/COLOR][COLOR=black][URL="http://15779774.jpg/"]webhosting24 - Login[/URL][/COLOR][COLOR=black]);
}[/COLOR]

so ich hoffe ich hab dich richtig verstanden und dass ich dir hiermit helfen konnte.
die pixelangaben sind natürlich nur beispiele ;-)

NACHTRAG: Sorry hokage555. Ich hatte wohl irgendetwas nicht richtig verstanden. Wenn Du stundenlag gegoogelt hast, ohne Erfolg, so viele Seiten gelesen hast und versucht hast die Einzelheiten zu verstehen, hast du irgendwann den Kopf einfach zu.

kein problem...
habe etwas überreagiert ;-)

grüße hokage
 
Was ist das für ein Mist?
Ist html und CSS so schwach auf der Brust das hier ende ist??
Du solltest Dir ein wenig Geduld aneignen. HTML & CSS sind grundsätzlich nicht das schwerste und sind immerhin keine Programmiersprachen.
Aber Du bist jetzt ein paar Minuten in dem Thema und fängst schon an zuzweifeln?

Aber Du hast ja schon gelernt, wie es anders geht.
Also cool bleiben :-)
 
...kann mir mal einer sagen warum alle so kompliziert schreiben?

Vllt liegt es auch einfach daran, dass DU dein Problem nicht schildern kannst und wir im Wald umherlaufen und den richtigen Baum suchen!

Ich habe einen Link: {link}
was soll das {link} darstellen? normalerweiße schreibt man z.B. CSS-Anweisungen in Akkoladen (geschweifte/geschwungene Klammern).

Dieser setzt sich in HTML um in:
<a href="http://www.der_aktuelle_Link </a>
das ist an sich schonmal komplett falsch, denn es wird so geschrieben: (fett markierte ist das, was du vergisst)

Code:
<a href="http://www.der_aktuelle_link[B].de> deine linkbeschreibung[/B] </a>
An diesem Link kann ich NICHTS verändern.
Können schon, aber wohl nicht wollen? Oder wie ist das zu verstehen? DU kannst farbe vom link verändern, schriftart, -größe, darstellung, du kannst ihn sogar komplett als bild darstellen das auf etwas verlinkt.

Nun möchte ich aber so etwas wie einen onmouseover-effekt haben, wo bei "Maus-über" einfach nur ein Bild verändert wird.
Dies kann ich nur auf der HTML-Seite selbst (keine externe möglich).
mouseover ist JavaScript, damit kannst du erreichen, dass beim drüberfahren mit der Maus, etwas geschiet (Farbe ändern, Bild ändern, weiß der Geier was ändern). Das selbige, was allerdings benutzerfreundlicher ist, kannst du mit dem CSS-Befehl :hover erreichen.

Kann mir bitte bitte jemand mal ein Beispiel schreiben?
Ein einfaches Beispiel gerne in CSS mit Bild1 und Bild2.
Stehen mindestens 2 Lösungen oben. Einmal mit Javascript, einmal mit CSS.

Gruß und hoffentlich endlich mal Einsicht und etwas Wille / Bereitschaft das zu lernen, was du versuchst zu erstellen

Loon3y

Edit: Anscheinend hab ich nen Beitrag auf der 1. Seite gelesaen und nicht gesehen das es auf der 2. Seite schon weiter ging *g* upsi...aber egal...passt dennoch alles noch soweit.
Versuch dcoh bitte, um es uns ein kleines winziges bisschen zu erleichtern, dich genauer auszudrücken oder dein problem besser zu beschreiben.
 
1. @hokage555: Vielen Dank für die sehr lehrreichen und ausführlichen Informationen. Leider funktioniert die Methode nur zeitweise.

Wenn ich wie beschrieben 7 Seite blättern möchte (mit den besagten Schaltern vor und zurück), erscheinen die Schalter mal, und meistens leider nicht. (Habe noch die Links 1234567 drin ;-)
Aber warum? Großes Fragezeichen. Kennst DU diesen Effekt?

2. @Efchen: Genau das meinte ich: Es sind wohl keine echten Programmiersprachen. Ich arbeite beruflich mit VBA. Könnte man so eine blöde HTML-Seite mit VBA programmieren, währe ich mehr als fertig mit dem Ding. Und dann hätte ich andere Effekte als so einen (in VBA) plumpen Bildwechsel! Dennoch: Vielen Dank für die Hilfe!

3. Loon3y: Schön das DU Dir so viel Zeit nimmst, und ich danke Dir auch für die Hilfestellungen. Allerdings solltest Du mal etwas die Arroganz aus Deiner Stimme nehmen!
Zitat: "....was soll das {link} darstellen?"
Das habe ich beschrieben!
Und wenn ich schreibe: {link} dann ist das so!
Zitat: "..das ist an sich schon mal komplett falsch,..."
Damit liegst DU falsch! Denn genau so ist es! (Wenn du machst rechtsklick und gugst in Quelltext, steht so drin!)
Und wenn ich Dir schreibe dass ich den {link} nicht verändern kann, dann solltest Du Deine Engstirnichkeit ablegen und glauben was ich schreibe!
Ist nun mal keine 0815 HP!
Welche Seite Du zuerst gelesen hat oder nicht ist egal -passt eben nicht.
Du solltest lernen das es auch andere Seiten im Netzt gibt, die nicht so funktionieren wie Du meinst.
Nun bin ich gespannt ob Du die Bereitschaft und den Willen zeigen kannst über Deinen Schatten zu springen. Denn dann wirst Du ganz klar lesen können was ich möchte! Steht in meiner ersten Frage schon Drin!
Schöne Grüße,
dschingeskahn
 
hmm...
also ich weiß leider nicht genau was du meinst...

warum und was genau geht nur "zeitweise"

hättest du einen beispiellink, wie das ganze später mal aussehen soll???

dann würde ich es sicherlich leichter verstehen und könnte dir schneller helfen...

"schalter" diesen ausdruck habe ich in kombination mit css noch nicht gehört..
meinst du den hover bzw. mouseovereffekt, oder was ist beid er ein "schalter"???

grüße hokage
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben