CSS Bild_ Mouseover

[Xmicha]

Hay leute ich hab n´problem mit meiner HP. Ich schreibe meine HP mit dem editor also in HTML und habe ne frage

ALso ich hab ein bild sage ich ma background_navi.png und wenn mann mit der mouse da drüber geht soll n´anderes Bild angezeigt werden z.B background_navi_mouseover.png kann mir jemand da weiter helfen mit dem scribt?!? habe bissel gegoogelt aber da kamm nur das bild "blissen" heraus.
Am liebsten wär Java Scribt! Danke in Voraus um Hilfe

 

[Maxi]

-> CSS

Normales Hintergrundbild für einen normalen Link, anderes für den Hover.

Eine kleine Hilfestellung:
maxifiacco.de - Links mit CSS gestalten

 

[R0b]

ich machs zur zeit so:

<span onMouseOver="imagechange.src='background_navi.png'" onMouseOut="imagechange.src='background_navi_mouseover.png'">
<img src="background_navi_mouseover.png" border="0"  alt="Background" id="imagechange"></span>

 

[Efchen]

Das ist halt JavaScript und funktioniert nicht, wenn selbiges abgeschaltet ist.

 

[Quaacki]

Bescheidene Frage, hat wer meinen Beitrag gelöscht? War der Meinung gestern eine CSS-Lösung hier gepostet zu haben? Wenn ja wäre ein Grund ganz gut wieso :???:

Mfg Quaacks

 

[Maxi]

Aus diesem Thema wurde kein Beitrag gelöscht.

 

[assmaje]

Mit CSS ohne Nachladen:

Du kopierst beide Zustände (normal, wenn mit der Maus drübergefahren wird) in EIN Bild direkt nebeneinander. Dabei sollte das erste den normalen Zustand darstellen. Bei width: und height: gibst du die Breite und Höhe an, die EIN Zustand benötigt. Beim Hovern wird die horizontale Position des Link-Hintergrundbildes um so viele Pixel verschoben, bis der zweite Zustand (Mouseover) anfängt.

HTML: (Title wird in diesem Fall wie alt verwendet.)

<a id="demo" href="beispiel.html" title="Beispiel"></a>

CSS:

#beispiel {
     background:url("beispiel.png") 0 0 no-repeat;
     width:64px;
     height:64px;
     display:block;
     float:left;
     padding:0px;
     border-width:0px;
     font-size:0px;
     text-decoration:none;
}

#beispiel:hover { 
     background-position:-64px 0;
}

 

[Quaacki]

Oky, mein Fehler... mir ist gerade eingefallen das ich nur die Vorschau hatte, dann schnell was anderes am Compi gemacht habe und völlig vergessen das ich nicht gespeichert hatte.

Naja egal ;ugl (senil) *g*

Also hier mein Vorschlag:

CSS--Anfang
#menue01 a
{
display: block;
height: 32px; /* halbe Bildhoehe */
background-repeat: no-repeat;
}

#menue01 a:hover
{
background-position: 0px -32px; /* um halbe Bildhoehe nach oben schieben */
}

#menue02 a
{
display: block;
height: 16px; /* halbe Bildhoehe */
background-repeat: no-repeat;
}

#menue02 a:hover
{
background-position: 0px -16px; /* um halbe Bildhoehe nach oben schieben */}
CSS - Ende

Im HTML hab ich dann so geschrieben:
<a href="LINK" style="background-image: url(); width: 60px;"></a>

Hierbei hast du den Vorteil das du mehrere Bilder verwenden kannst.

Ansonsten kannst dir das am Praxisbeispiel anschauen... Willkommen auf der Huitaka

Mfg Quaacks ^^

 

[neuroleptika]

Eleganter und semantisch korrekter schreibt man die Links in eine Liste.
Eine gute Beschreibung hat Koslowski erst kürzlich gepostet.
css-Menü
Mit etwas Suchen findet man hier und allgemein im Netz alle möglichen css-Varianten.

Ein Tip zu background-position möchte ich aber noch hinzufügen:
Manchmal ist es Sinnvoll die Bildchen nicht übereinander in einer Gafik unterzubringen, sondern nebeneinander. So kann mann die Grafik weiterhin Schriftgrößenunabhängig, vertikal zentrieren.
Wenn das Menü horizontal skaliebar sein soll, kann die Methode jedoch auch störend sein.

 

[Quaacki]

Ich geb dir erstmal recht mit der Suchfunktion :)

Hab mir das eben auch mal mit angeschaut was Koslowski geschrieben hat. Würde aber sagen das es Ansichtssache ist wie man es nun macht. Ich persönlich finde meine Methode schöner, weil ich nicht das ganze CSS voll schreibe ;) Beides ist Standardkonform darum gibs kein elegant oder semantisch, sondern nur 1. oder 2. Methode :-)


Nur nicht falsch verstehen, ist kein Angriff :)

Mfg Quaacks ^^

 

[Efchen]

(Title wird in diesem Fall wie alt verwendet.)

Was meinst Du damit? Das title- und das alt-Attribut sind zwei voneinander unabhängige Attribute mit völlig verschiedenem Sinn.

Beides ist Standardkonform darum gibs kein elegant oder semantisch, sondern nur 1. oder 2. Methode

Standardkonformität hat nichts mit Semantik zu tun. Auch ohne gescheite Semantik kann ein Code Standardkonform zu HTML sein.

Gruß,
-Efchen

 

[afraundtim]

wieso wird mir bei solchen fragen gesagt, dass das die falsche kategorie ist und ihm wird sogar geantwortet!?
:-(

 

[neuroleptika]

Hi Quaacki,

.....
Beides ist Standardkonform darum gibs kein elegant oder semantisch, sondern nur 1. oder 2. Methode :-)
Nur nicht falsch verstehen, ist kein Angriff ......

Es ist natürlich erlaubtes (x)html.
Allerdings fehlt in deinem Beispiel ein Text im <a>-Tag. Suchmaschinen schränkt das bei der Indizierung ein und Screenreader können die Verweise nicht vorlesen.
Im html musst du die <a>-Tags mit irgendeinem Element zusammenfassen um sie gemeinsam zu positionieren. Da bietet sich eine <ul> am sinnigsten an.
Dein sparsames css würde auch in einer Liste funktionieren.

Angegriffen fühle ich mich nicht:).