Probleme mit Bild veränderung wenn maus drauf ist.

[eli93]

Hi, ich wollte mal noch einen anderen Effekt ausprobieren und es so machen, dass immer der Buchstabe leuchtet auf dem gerade die Maus ist.

aber da entstehen immer lücken zwischen den bildern. wie bekomme ich die denn weg?

hier ist ein Teil sind jetzt nur die ersten 3 Buchstaben aber das Reicht ja um das Problem zu verdeutlichen.

Das hier ist jetzt mit Javascript gemacht aber wenn ich nur HTML benutzte gibts das selbe Problem

 

[devilseye]

hast du im css mal versucht

img { margin:0px; padding:0px; }

dann solltest du eigentlich den Abstand wegkriegen.

MFG devilseye

 

[omoxen]

du hast das viel zu kompliziert gemacht!!!
Mit Css ist das viel einfacher:

du nimmst einfach ein element z.B. nobr und gibst jedem nobr seine eigene id.
beispielsweise für das erste img1, das zweige img2.
Dann gibst du jedem nobr per css sein hintergrund und seine spezifische höhe und breite:

#img2{
background:url(bild.png);
height:40px;
width:30px;
}

Ich hab jetzt die maße und die bild-url nich, das musst du dann selbst ersetzen.
Dann schreibst im style-sheet, dass das hintergrundbild sich ändern soll, wenn du mit der maus darüberfährst, per :hover

#img1:hover{
background:url(bildHover.png);
}

Das machst du dann für alle bilder. Sollten dann noch lücken zwischen ihnen sein, stell padding und margin und border auf 0px;

 

[eli93]

von CSS versteh ich nicht viel^^ Was soll denn dann in den HTML teil?

 

[threadi]

Auf Grundlage der oben stehenden Beschreibung von omoxen wäre das

<nobr id="img1" />

Ich würde allerdings aus Kompatiblitätsgründen einen Link empfehlen, also:

<a href="#" id="img1">&nbsp;</a>