Bilder austauschen

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

<!–
* {margin:0;padding:0}

#menu {
list-style-type:none;
width:200px;
}

#menu li A {
display:block;
PADDING-RIGHT: 10px;
PADDING-LEFT: 100px;
PADDING-BOTTOM: 100px;
PADDING-TOP: 100px;
TEXT-DECORATION: none;
COLOR: #ffffff;
BACKGROUND: red url(http://www.beispielseite.de/1.jpg)
}

#menu li A:hover {
BACKGROUND: green url(http://www.beispielseite.de/2.jpg);
}
–>

Aktuelles

bei diesem Code würden also zwei Bilder ausgetauscht werden, wenn man mit der Maus darüberfährt, doch leider wird der Code vom Firefox und Internet Explorer anders interpretiert. Beim Firefox kann man auf jede beliebige Stelle mit der Maus darüberfahren und die Bilder werden einwandfrei ausgetauscht. Genauso funktioniert es mit dem Verlinken. Man kann auf jede beliebige Stelle klicken und trotzdem wird man weitergeleitet.
Beim Internet Explorer muss man direkt auf „Aktuelles“ gehen, damit die Bilder ausgetauscht werden und man auf die nächste Seite weitergeleitet wird.

Wie müsste man den Code anpassen, damit man im Internet Explorer auf jede beliebige Stelle der Bilder klicken kann und trotzdem weitergeleitet wird und die Bilder auch ausgetauscht werden?

THX im voraus.

#2

Hallo
Ich glaube, in deinem Artikel sind ein paar li- und ul-Tags geschluckt worden. :smile:

IE hat seine Probleme mit hover, er wendet es nur auf inline-Links an. Du wirst für deine Zwecke JavaScript nehmen müssen:

\<!--
function bild1(ber) {
 ber.style.setAttribute('background','red url(http://www.beispielseite.de/1.jpg)', false);
 }

function bild2(ber) {
 ber.style.setAttribute('background','green url(http://www.beispielseite.de/2.jpg)', false);
 }
--\>

\<!--
\* {margin:0;padding:0}

.menu {
list-style-type:none;
width:200px;
COLOR: #ffffff;
BACKGROUND: red url(http://www.beispielseite.de/1.jpg)
}

.menu A {
display:block;
PADDING-RIGHT: 10px;
PADDING-LEFT: 100px;
PADDING-BOTTOM: 100px;
PADDING-TOP: 100px;
TEXT-DECORATION: none;
}

--\>

Aktuelles


Aktuelles
#3

Hallo Alex,

folgender Code behebt das Problem:

…
#menu {
list-style-type:none;
width:200px;
}

#menu li A {
display:block;
width:100%;
TEXT-DECORATION: none;
COLOR: #ffffff;
BACKGROUND: red url(http://www.beispielseite.de/1.jpg);
}

#menu li A span {
display:block;
PADDING-RIGHT: 10px;
PADDING-LEFT: 100px;
PADDING-BOTTOM: 100px;
PADDING-TOP: 100px;
}

#menu li A:hover {
BACKGROUND: green url(http://www.beispielseite.de/2.jpg);
}
…

Aktuelles
…

Die gefettete Teile sind neu. Die Ausrufezeichen in ul und li gehören dort natürlich nicht hin, sondern sind nur dafür da, hier im Forum eine Interpretation zu verhindern.

Das span-Element dient dazu, im IE 5 den box model bug zu umgehen. Du könntest diesen Teil auch weglassen und die paddings wieder dem Link zuweisen, müßtest dann allerdings für FF und IE 6 deren Breite anpassen und für den IE 5 einen entsprechenden box model hack anwenden.

Gruß
Yasmin