dreamweaver bekommst du bei adobe, kostenlos nicht. es gibt aber genug html editoren mit denen du arbeiten kannst, einfach mal nach free htmleditor oder ähnlich googln.
es könnte z.b. so aussehen, ist aber nicht die sauberste lösung. schau das du dich mit css auch gleich beschäftigst, weil man es damit recht simple hinbekommt.
hier noch eine seite die dir sicher helfen wird --> selfhtml
code:
1:
2:
3:
4:
5:
6:
<html>
<img src="PFAD ZUM BILD";
onMouseover="javascript:this.src='PFAD ZUM BILD'";
onMouseout="javascribt:this.src='PFAD ZUM BILD'";>
</html>
viell. hilft dir das weiter.
greetz
laughignGUY
This post has been edited 4 time(s), it was last edited by laughingGUY: 13.03.2010 18:03.
Registration Date: 18.11.2007
Posts: 557
Location: London
Program: Zend Studio
Forums: Coding; International Section
Also... zu sagen, dass du dir dreamweaver holen sollst ist schwachsinn... da du eh noch am anfang bist, ist das sicherlich nciht der richtige weg.... ist zwar vieles einfacher und hier und da klicken aber im endeffekt weisst du nicht was im hintergrund passiert und wenn mal was schief geht weisste auch nicht was los ist.... also scheiss auf dreamweaver und die frage woher du es kostenlos kriegst kannst du dir bald sparen, denn wenn du weisst wie alles geht und du erstmal damit geld verdienst, haste das geld schneller in der tasche als wie du gucken kannst... zu der zeit wo du arbeitest und mit web entwicklung geld machst, solltest du sowieso legal solche sachen haben ....
wie dem auch sei ... es gibt genuegend andere editoren die nicht wysiwyg sind und die syntax highlighting haben - alles andere, was mehr ist, ist luxus! es reicht ja sogar der vi! ich kann notepad++ empfehlen unter mac benutze ich aber komodo edit .... naja wie dem auch sei ....
was du machen moechtest ist ein "hover" Effekt. hover ist eine pseudo klasse in css du kannst zb sagen:
code:
1:
2:
3:
4:
5:
6:
7:
a:hover
{
color:red;
text-decoration:none;
}
In DIESEM beispiel werden alle links auf der seite rote farbe haben und werden nicht unterstrichen sein, wenn du drueber gehst.
Falls dir irgendjemand iwas mit javascript vorschlaegt, vergiss diese methode, mach sie einmal und wende sie nie wieder an.... heutzutage braucht fast jede webseite javascript, trotzdem gibt es genuegend leute die ihr javascript aus haben -> damit funktioniert dein hover effekt nicht mehr... wohingegen css immer fein funktionieren wird....
daher auch von mir: lerne css gleich mit - es ist uebrigens eine nette und einfache sprache....
fazit:
du brauchst kein dreamweaver
versuch so zu entwickeln, dass es bei allen gleich aussieht
lerne css
benutze css
es heisst nicht roll over sondern ist hover und hover ist eine pseudo klasse in css
Hat mir schonmal was gebracht.^^
Css lerne ich auch gleich mit. Aber ich meine etwas anderes:
code:
1:
<a href="Zielort"><img src="Pfad zum Bild" alt="Buttondesign1"></a>
So habe ich ein Bild erstellt, dass Seite
ZIelort) öfnet, wenn ich auf das Bild drücke. Soll so ne Art Button darstellen. Aber ich will da noch ne Funktion, die z.b. so aussieht.
Registration Date: 18.11.2007
Posts: 557
Location: London
Program: Zend Studio
Forums: Coding; International Section
Also ....
a ist in inline element! und kein block element... wo der unterschied ist -> google, da dass sonst hier alles zu sehr ausartet....
generell packst du das bild nicht in den link rein, sondern du setzt das als hintergrund bild mit css....
aus dem fakt resultiert folgendes:
CSS:
code:
1:
2:
3:
4:
5:
6:
#deinLink
{
background-image:url(pfad zum bild, relativ von deinem css);
}
das wird aber so noch nicht ganz gehen...
du musst naemlich die hoehe und breite von deinem bild mit angeben
code:
1:
2:
3:
4:
5:
6:
7:
8:
#deinLink
{
background-image:url(pfad zum bild, relativ von deinem css);
width:100px;
height:20px;
}
so, dass sollte aber immer noch nicht gehen:
Grund dafuer ist, dass a nen inline element ist und du so einfach da keine groessen angeben kannst.... dazu musst du noch display:blockl oder display:inline-block;
angeben
sieht dann so aus:
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
#deinLink
{
background-image:url(pfad zum bild, relativ von deinem css);
width:100px;
height:20px;
display:block;
}
dass sollte das mindeste sein, was du machst...
Damit sollte es klappen...
wenn du nun deinen hover haben willst brauchst du NUR dass hier schreiben
code:
1:
2:
3:
4:
5:
6:
#deinLink:hover
{
background-image:url(pfad zum bild, relativ von deinem css fuer den hover effekt);
}
du musst nur das aendern, was auch geaendert werden soll, das andere wird ja vererbt...
sprich du schreibst nur nochmal das ganze mit :hover als selektor und aenderst dadrin nur das bild, groessen und display usw brauchste nicht auffuehren, da er das von dem normalen stand nehmen wird...
In meiner zukünftigen Seite, die ich irgendwann mal haben will, soll die Navi horizontal laufen. Und wie ich auf Selfhtml gelesen habe, beginnt mit jedem Blockelement eine Zeile. Also werden meine Links doch "display:block" vertikal laufen. Reicht es "display:inline" zu schreiben, um sie horizontal zu haben?
wenn du links untereinander darstekllen willst, nimm doch listen-elemente als durch css irgendwas zu verbiegen, die sind immerhin standartmäßig untereinander und auch sehr einfach nebeneinander anzuordnen.
This post has been edited 1 time(s), it was last edited by ClOuDy.: 14.03.2010 22:37.
Tut mir Leid aber bpr hat da vollkommen recht, für sowas nutzt man JS nicht, und wenn man JS vermeiden kann sollte man das auch tun!
Für sowas ist CSS einfach da, das sollte man einfach mal hinnehmen und nicht jeden scheiß mit JS lösen wollen.
Und bpr: Deine Lösung würde ich auch -fast- so vorschlagen. Ich würde als Grafik aber die Navi mit und Ohne hover direkt zu einer Grafik machen, in der Oberenteil der Hälfte die Grafik ohne Hover, die untere mit. und beim a:hover dann per background-position die Grafik hochschieben. Das hat den Vorteil das man beim ersten Hover nicht diesen "hässlichen" Ladeeffekt vom hover hat, und man kein JS preload braucht.
Grüße Q
This post has been edited 1 time(s), it was last edited by Quad: 15.03.2010 11:17.
Registration Date: 18.11.2007
Posts: 557
Location: London
Program: Zend Studio
Forums: Coding; International Section
quote:
Originally posted by Quad
Tut mir Leid aber bpr hat da vollkommen recht, für sowas nutzt man JS nicht, und wenn man JS vermeiden kann sollte man das auch tun!
Für sowas ist CSS einfach da, das sollte man einfach mal hinnehmen und nicht jeden scheiß mit JS lösen wollen.
Und bpr: Deine Lösung würde ich auch -fast- so vorschlagen. Ich würde als Grafik aber die Navi mit und Ohne hover direkt zu einer Grafik machen, in der Oberenteil der Hälfte die Grafik ohne Hover, die untere mit. und beim a:hover dann per background-position die Grafik hochschieben. Das hat den Vorteil das man beim ersten Hover nicht diesen "hässlichen" Ladeeffekt vom hover hat, und man kein JS preload braucht.
Grüße Q
ah quad, das ist auch eine gute loesung - die hatte ich gar nicht in meinem kopf....
aber nur um -A1rDev1l- das zu erklaeren : das nennt sich css sprite, soweit ich weiss .... das ist eine recht interessante technik, ist ein wenig aufwendinger aber lohnt sich auch definitiv bei grossen menus! denn es geht dort um eine sache: ladezeit optimierung! du brauchst bei sowas immer nur eine verbindung: 1 verbindung um das bild zu laden, wenn du nun in diesem bild bereits alles andere drin hast, brauchst du nicht 10 weitere verbindungen um 10 andere bilder zu bekommen....
kurz gesagt, bei 5 links + hover als bilder sind 10 bilder.... und dafuer kannste halt nur eins haben, einmal alles mit hover und einmal alles normal und das verschiebt man einfach ... ist aber ein wenig advance - aber trotzdem solltest du es dir anschaun....
hier mal nen artikel dazu, hatte den nur kurz ueberflogen aber ich glaube er wird dich nen guten ueberblick ueber das thema verschaffen: http://www.alistapart.com/articles/sprites/
@ClOuDy.
heut zu tage ist das internet nicht mehr auf computer fixiert.... du kannst schon seit langem mit handys und co surfen .... glaub mir, jede datei die du nicht laden musst uebers handy ist ne menge an zeit die du sparst.... das web ist von vielen elektronischen geraeten erreichbar und abgesehen davon js ist nicht fuer soetwas wie hover effekte gedacht....
wie quad schon erwaehnt hatte ... schau halt sonst mal bei der world wide web consortium seite vorbei : > auch bekannt als w3c <3
If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.
After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.
In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.
Sign up now and enjoy the advantages as a registered member.
(This website will be ad-free after a complete free sign up.)
ZIelort) öfnet, wenn ich auf das Bild drücke. Soll so ne Art Button darstellen. Aber ich will da noch ne Funktion, die z.b. so aussieht.
11.06.2010 