FF zeigt onmouseover und links nicht wie IE

[heiko.hems]

Hallo Zusammen,

habe mir bereits einen Wolf gesucht, aber ich bekommen das Problem nicht in den Griff.

die Seite um die es geht:
http://www.s-line.de/homepages/hems/

Die Probleme:
1. im FF: nur das erste Bild (ganz links) reagiert richtig auf die onmouseover-Programmierung (aus selfhtml übernommen), die weiteren Bilder werden nicht mal als Links erkannt !? (im IE funktioniert es ??)

2. im zweitletzten Feld rechts unten reagiert der Link Denkmal nicht mit hover. Der Fehler kann m.E. nur im css stecken, aber da finde ich denselben einfach nicht - ich meine ich hab' schon alles versucht, seh' den Wald wohl vor lauter Bäumen nicht... (auch hier: im IE funktioniert es !!????)

Kann mir jemand den entscheidenden Schubs geben, damit ich alleine drüberstolpern kann ?

Schönen Sonntag wünscht
heiko

[SPX_25]

Hallo!

Vor einiger Zeit brauchte ich auch mal sowas für meine grafischen Links. Ich hab jedoch das Beispiel aus SelfHTML etwas abgespeckt. :-D

Bei den Tests hat es auf allen Browsern funktioniert (Opera, Netscape, IE und FireFox)

Der Link im HTML:

<a href="index.php" onmouseover="changePicture('Button1', 'graphics/pcsButtonStart2.jpg')"
   onmouseout="changePicture('Button1', 'graphics/pcsButtonStart1.jpg')"
                         onmousedown="changePicture('Button1', 'graphics/pcsButtonStart3.jpg')"
                         onmouseup="changePicture('Button1', 'graphics/pcsButtonStart1.jpg')"><img class="menue1" src="graphics/pcsButtonStart1.jpg" name="Button1"></a>

Hier die JavaScript-Funktion:

function changePicture(bildName, grafik)
{
window.document.images[document.images[bildName].name].src=grafik;
}

Zur Erklärung.
Der Link ruft die index.php auf. Hier ist keine verzweigte Pfadangabe getätigt wurden, weil die Datei mit dem Link sich im gleichen Verzeichnis befindet wie die index. Also keine unnötigen Punkte und Schrägstriche in der Pfadangabe...

Wenn nun z.B. "onmouseover" aktiviert wird, weil ich mit der Maus über den Link fahre, dann wird an die Funktion "changePicture" der Bildname und der Grafiklink übergeben.

Der Bildname ist im <img> Tag unter name="Button1" festgelegt wurden. Das ist insofern gut weil die Bildnamen eindeutig vergeben werden. Somit funktioniert der Aufruf für dieses Bild immer, egal ob Du noch weitere Bilder hinzufügst oder nicht.

window.docment.images ruft nun das Bild explizit nach dem Namen auf und lädt das neue genau an die Stelle, wo zuvor das alte mit dem Bildnamen "Button1" war.

Versuch es mal damit.

Gruß, SPX_25.

[Felix Riesterer]

Lieber heiko.hems,

http://www.s-line.de/homepages/hems/

ich mag Deine DIV-Suppe nicht besonders... Bevorzugst Du nicht lieber semantisches Markup (zugegeben, die verlinkte Seite ist etwas schräg...)?

Die Probleme:

1. im FF: nur das erste Bild (ganz links) reagiert richtig auf die onmouseover-Programmierung (aus selfhtml übernommen), die weiteren Bilder werden nicht mal als Links erkannt !? (im IE funktioniert es ??)

Wozu Javascript? Das könntest Du sehr gut mit CSS machen. Das kann dann sogar der IE!

Übrigens _musst_ Du bei numerischen Werten in CSS eine Einheit dazu notieren, sonst bekommst Du in aktuellen Browsern Probleme! Das könnte auch der Grund für Dein Posting hier sein (Ausschnitt aus Deiner "knopp.css"):

#zentriert {  
       position:absolute;  
       top:50%;  
       left:50%;  
       width:800;  
       height:600;  
       margin-left:-400;  
       margin-top:-300;  
       }

Wir reden doch hier von der zentralen Navigation der Seite, oder? Navigationen sind in der Regel Link-Listen. Also verwenden wir das <ul>-Element!

<div id="navigation">  
    <h2>Navigation</h2>  
    <ul>  
        <li><a href="index.html" id="home-link">Home</a></li>  
        <li><a href="buero/buero.html">Wir über uns</a></li>  
        <li><a href="neub/neub.html">Neubau</a></li>  
...  
    </ul>  
</div>

Nun kannst Du mit CSS die Navigation formatieren. Der Überschrift könntest Du gleich ein "display: none" verpassen, denn die willst Du ja nicht anzeigen lassen. Die Listenelemente kannst Du links floaten lassen, eine feste Höhe und Breite zuordnen und jedem Link innerhalb dieses "Kastens" dann ein passendes Hintergrundbild verpassen. Mit :hover kannst Du dann dieses Hintergrundbild verändern.

In einem _externen_ Stylesheet könnte dann das hier stehen:

#navigation {  
    width: 800px;  
    margin: 0 auto;  
    padding: 0px;  
}  
  
#navigation h2 {  
    display: none;  
}  
  
#navigation ul {  
    width: 100%;  
    list-style: none;  
}  
  
#navigation li {  
    float: left;  
    width: 100px;  
    height: 120px;  
    background-color: #blue;  
}  
  
#navigation li a {  
    line-height: 120px;  
    font-size: 10px;  
    font-weight: bold;  
    background-repeat: no-repeat;  
    background-position: center top;  
...  
}  
  
#navigation li a:hover {  
    background-color: yellow;  
}  
  
#home {  
    background-image: url(...);  
}  
  
#home:hover {  
    background-image url(...);  
}

Das Listenelement "#home" entspricht jetzt Deinem "#bild_0"... Ungefähr klar geworden, was ich meine?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[heiko.hems]

Hallo Zusammen,

Probleme sind gelöst !
Es lag an sich überlagernden DIV-Bereichen die der IE offensichtlich 'transparenter' als der FF interpretiert. Die Reihenfolge der DIVs (auch Z-Pos.) löst das Problem.

@Felix,
vielen Dank für Deine interessante Antwort.
'die DIV-Suppe' war ja tatsächlich das Problem.
Für mich als (Architekt ;) ) bildlich denkender Mensch haben die DIV-Bereiche den Vorteil großer Übersichtlichkeit.
Ich werde mich aber mal mit Deiner Variante befassen, versprochen !

@SPX_25
auch Dir danke ich für den interessanten Ansatz mit den eindeutigen Bildverweisen. Die Indexabhängigkeit (Bildnummer) in den von mir verwendeten Code hat mich auch schon gewaltig genervt !

ein schönes Rest-WE
wünscht Heiko

[MudGuard]

Hi,

Übrigens _musst_ Du bei numerischen Werten in CSS eine Einheit dazu notieren,

Falsch.
Bei numerischen Angaben darf keine Einheit stehen.

Du verwechselst numerische Angaben (z.B. bei z-index, counter-increment usw.) mit Längenangaben (bei denen ist, wenn der Wert nicht 0 ist, eine Maßeinheit erforderlich).

cu,
Andreas

[Felix Riesterer]

Lieber Andreas,

Du verwechselst numerische Angaben (z.B. bei z-index, counter-increment usw.) mit Längenangaben (bei denen ist, wenn der Wert nicht 0 ist, eine Maßeinheit erforderlich).

danke für die korrekte Präzisierung! So ist es richtig.

Liebe Grüße aus Ellwangen,

Felix Riesterer.