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

CSS oder JS

T

T!P-TOP

Mitglied
In Meinem neuen Layout, hat jeder Button einen andren Hintergrund, 2 haben einen andre Form. Ich hab für jeden Button 2 Bilder angefertigt, soll ich nun mit JS oder CSS die Buttons hovern lassen, also die Buttonhintergründe wechseln lassen?

Was ist browsertauglicher?

Und wie mach ich das mit CSS? ul-Menü Kann ich da ja nicht mehr verwenden!?

habs mit JS versucht:
HTML: 
<a href="index.htm" onMouseOver="document.MyImage.src='but1hover.jpg';" onMouseOut="document.MyImage.src='but1.jpg';"/>
<img src="but1.jpg" alt="hallo" name="MyImage"/>
<a href="index.htm" onMouseOver="document.MyImage.src='but2hover.jpg';" onMouseOut="document.MyImage.src='but2.jpg';"/>
<img src="but2.jpg" alt="hallo" name="MyImage"/> 
<a href="index.htm" onMouseOver="document.MyImage.src='hover.jpg';" onMouseOut="document.MyImage.src='but3.jpg';"/>
<img src="but3.jpg" alt="hallo" name="MyImage"/>

Allerdings wechselt der mir die Bilder nicht, außerdem bringt er ca einen 2 px breiten abstand zwischen den Button rein und macht die Grafiken auch unscharf!??


grüße
T!P-TOP
 
Jeder Button hat andre Hintergrundbilder, auch hover Bilder sind bei jedem anders. Wie soll ich den das mit ul gestalten? Is doch viel aufwändiger mit Ul!? Da muss ich ja für jeden Button n neues CSS schreiben!?
 
Es reicht ein Bild pro Button, das den Normal- und Hoverteil enthält.
Mit background-position wird der jeweils richtige Teil ins Bild geschoben. :wink:
 
T!P-TOP schrieb:
Jeder Button hat andre Hintergrundbilder, auch hover Bilder sind bei jedem anders. Wie soll ich den das mit ul gestalten? Is doch viel aufwändiger mit Ul!? Da muss ich ja für jeden Button n neues CSS schreiben!?
Zum Vergrößern anklicken....
Das müsstest du doch auch ohne Liste machen, mit Liste wäre es aber semantisch korrekt.
 
HTML: 
<ul>
  <li id="a"><a href="">Link1</a></li>
  <li id="b"><a href="">Link2</a></li>
  <li id="c"><a href="">Link3</a></li>
  <li id="d"><a href="">Link4</a></li>
  <li id="e"><a href="">Link5</a></li>
</ul>
Code: 
ul {
  margin: 0;
  padding: 0;
  width: 15em;
}

li#a {background-image: url('a.png');}
li#a:hover, li#a:focus {background-image: url('a2.png');}

li#b {background-image: url('b.png');}
li#b:hover, li#b:focus {background-image: url('b2.png');}

li#c {background-image: url('c.png');}
li#c:hover, li#c:focus {background-image: url('c2.png');}

li#d {background-image: url('d.png');}
li#d:hover, li#d:focus {background-image: url('d2.png');}

li#e {background-image: url('e.png');}
li#e:hover, li#e:focus {background-image: url('e2.png');}

li a {display: block;}

Müsste eigentlich hinkommen, habs nicht getestet in den 2 Minuten ;)
 
Nicht schlecht, aber funktionieren tuts net ganz. Er nimmt nicht die volle höhe, sondern halbiert jedes Bild.

HTML: 
<style type="text/css">
ul {
  margin: 0;
  padding: 0;
  height:50px;
  width: 50px;
  background-repeat: no-repeat;
}
li#a {background-image: url('asd.png');}
li#a:hover, li#a:focus {background-image: url('asdasd.png');}
li#b {background-image: url('asd.png');}
li#b:hover, li#b:focus {background-image: url('asdasd.png');}
li#c {background-image: url('asd.png');}
li#c:hover, li#c:focus {background-image: url('asdasd.png');}
li#d {background-image: url('asd.png');}
li#d:hover, li#d:focus {background-image: url('asdasd.png');}
li#e {background-image: url('asd.png');}
li#e:hover, li#e:focus {background-image: url('asdasd.png');}
li a {display: block;}
</style>
</head>
<body>
<ul>
  <li id="a"><a href=""/></li>
  <li id="b"><a href=""/></li>
  <li id="c"><a href=""/></li>
  <li id="d"><a href=""/></li>
  <li id="e"><a href=""/></li>
</ul>


Wir krieg ich jetzt das ganze noch vertikal hin?
 
So kann man das ja auch lösen:

html:

HTML: 
<div id="css">
                    <a href="http://www.xyz.at"></a>
</div>

CSS

HTML: 
#css {    
width: 50px;    
height: 50px;    
margin: 0px auto 0px auto;   
}
#css a {    
width: 50px;    
height: 50px;    
color:  #FFFFFF;    
margin: 0px;    
padding: 0px;    
background-image: url('imagesnormal.gif');    
background-repeat: no-repeat;    
display: block;
}
#css a:hover {    
background-image: url('imagehover.gif');    
background-repeat: no-repeat;

Nur müsst ich da ja für jeden Button nen neuen Div machen und die CSS datei wird auch gan schön groß.
Aber was sollt ich jetzt verwenden? Diese Methode, UL, oder Javascript?
 
T!P-TOP schrieb:
Nicht schlecht, aber funktionieren tuts net ganz. Er nimmt nicht die volle höhe, sondern halbiert jedes Bild.
Zum Vergrößern anklicken....
Na dann gib den Listenelementen eine Höhe und Breite.

T!P-TOP schrieb:
So kann man das ja auch lösen:

html:

HTML: 
<div id="css">
                    <a href="http://www.xyz.at"></a>
</div>

CSS

HTML: 
#css {    
width: 50px;    
height: 50px;    
margin: 0px auto 0px auto;   
}
#css a {    
width: 50px;    
height: 50px;    
color:  #FFFFFF;    
margin: 0px;    
padding: 0px;    
background-image: url('imagesnormal.gif');    
background-repeat: no-repeat;    
display: block;
}
#css a:hover {    
background-image: url('imagehover.gif');    
background-repeat: no-repeat;

Nur müsst ich da ja für jeden Button nen neuen Div machen und die CSS datei wird auch gan schön groß.
Zum Vergrößern anklicken....
Ist aber unsinnig. Ein div gruppiert mehrere Elemente, du hast nur einen Link, da ist nichts zu gruppieren. Ausserdem ist ein Menü eine Liste.

Aber was sollt ich jetzt verwenden? Diese Methode, UL, oder Javascript?
Zum Vergrößern anklicken....
Die Frage hab ich dir schon beantwortet.
 
T!P-TOP schrieb:
Wieviel Bilder ich verwend spielt keine Rolle, ich würde gerne wissen, mit welcher Methode man am einfachsten mein Problem lösen kann.
Zum Vergrößern anklicken....

doch das spielt eine Rolle, mehr Bilder mehr Anfragen an den Server. ;-)

Sag doch gleich das du eigentlich überhaupt nicht kapiert hast, was ich mit meinem Posting gemeint habe. :D
Übrigens Patzigkeit reduziert die Anzahl der Hilfswilligen geradezu dramatisch.

Trotzdem gebe ich dir noch zwei Beispiele:
Vollgrafische navi
Teilgrafische navi (Text nicht mit im Bild)

Solltest du die auch nicht kapieren, bzw. nicht auf deinen Fall übertragen können hilft nur noch Little Boxes. Da kannst du dir die Grundlagen mal ordentlich erarbeiten. ;-)
 
Glaubst du mit JS wird der Code kleiner?
Warum die Bilder in Thors beispiel abgeschnitten werden, liegt doch auf der Hand.
Es ist nur Beispielcode!
Die nötigen Abmessungen musst du schon noch selber ins CSS schreiben :?
Horizontal erreichst du mit "float".
Und noch mal zum mitschreiben: JS ist abschaltbar und daher zu vermeiden, wann immer es zu vermeiden geht! Für einen simplen Hover ohne jegliche überblendung oder dergleichen IST es in jedem Fall vermeidbar...
 
Ich hab nun die größen angepasst, dass mit der horizontalen Lage bekomm ich allerdings nicht hin.

html:

HTML: 
<div id="header"><!--///HEADER-DIV Anfang-->
<div style="z-index: 1">
<ul>
  <li id="a"><a href="">1</a></li>
  <li id="b"><a href="">2</a></li>
  <li id="c"><a href="">3</a></li>
  <li id="d"><a href="">4</a></li>
  <li id="e"><a href="">5</a></li>
</ul>
</div>
</div><!--HEADER-DIV Ende\\\-->

CSS:

HTML: 
ul {
  margin: 0;
  padding: 0;
  
}
 
li#a {
width: 160px;
height: 96px;
background-image: url('button.jpg');
}
li#a:hover, {
background-image: url('a2.png');
}
 
li#b {
width: 80px;
height: 96px;
background-image: url('button2.jpg');
}
li#b:hover, {
background-image: url('b2.png');
}
 
li#c {
width: 80px;
height: 96px;
background-image: url('button3.jpg');
}
li#c:hover, {
background-image: url('c2.png');
}
 
li#d {
width: 80px;
height: 96px;
background-image: url('button4.jpg');
}
li#d:hover, {
background-image: url('d2.png');
}
 
li#e {
width: 80px;
height: 96px;
background-image: url('button5.jpg');
}
li#e:hover, {
background-image: url('e2.png');
}
 
li a {
display: block;
}

Wie bekomm ich das nur jetzt horizontal hin?

Grüße
 
hm es ist zwar alles richtig positioniert, aber die Bilder wechseln bei MouseOver nicht. Sind im gleichen Ordner. Weiß eienr woran das liegen könnte? Hier das CSS:

HTML: 
ul {
  margin: 0;
  padding: 0;
  width: 640px;
  height: 96px;
  float: right;
  list-style: none;
   
}



li#a {
width: 160px;
height: 96px;
float: left;
background-image: url('button.jpg');
}
li#a:hover, {
width: 80px;
height: 96px;
background-image: url('buttonhover.jpg');
}


li#b {
width: 80px;
height: 96px;
float: left;
background-image: url('button2.jpg');
}
li#b:hover, {
width: 80px;
height: 96px;
background-image: url('button2hover.jpg');
}



li#c {
width: 80px;
height: 96px;
float: left;
background-image: url('button3.jpg');
}
li#c:hover, {
width: 80px;
height: 96px;
background-image: url('c2.png');
}



li#d {
width: 80px;
height: 96px;
float: left;
background-image: url('button4.jpg');
}
li#d:hover, {
width: 80px;
height: 96px;
background-image: url('d2.png');
}



li#e {
width: 80px;
height: 96px;
float: left;
background-image: url('button5.jpg');
}
li#e:hover, {
width: 80px;
height: 96px;
background-image: url('e2.png');
}



li#f {
width: 80px;
height: 96px;
float: left;
background-image: url('button6.jpg');
}
li#e:hover, {
width: 80px;
height: 96px;
background-image: url('e2.png');
}



li#g {
width: 80px;
height: 96px;
float: left;
background-image: url('button7.jpg');
}
li#e:hover, {
width: 80px;
height: 96px;
background-image: url('e2.png');
}


li a {
display: block;
width: 80px;
height: 96px;

}
 
Du hast hinter dem :hover noch jeweils ein Komma, da sollte auch eigentlich noch :focus stehen, damit sich das Bild auch ändert, wenn man mit der Tastatur navigiert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben