Rollover mit Koordinaten?

[Stibitz]

hi ich habe auf meiner Hompage mit css Rollover serstellt. das funzt auch tadellos, aaaaaber jetzt die frage:

kann ich Koordinaten mit dem css Rollover setzten, so das ich ein einzelnes Bild in Mehrere aktive Teile unterteilen kann, wobei sich jedoch jedes wieder auf das ganze Bild auswirkt?
meine Frage kommt daher, das meine Navigationsleiste ein mehr oder weniger komplexe Gif animation ist und ich nicht grosse lust habe jeden Link in eine einzelne Tabelle zu verweisen.

danke für die Hilfe

[Laus]

Hallo
Natürlich kannst du für dein rollover Koordinaten für die Bildposition setzen, dazu ist margin ja da. Du kannst zum Beispiel beide Bilder für dein rollover in einem Bild vereinigen und dann je nach Zustand ( link oder hover) den gewünschten Teil über zB: ein negatives margin ausblenden. Das hat den Vorteil das das Bild beim Hovern nicht extra geladen werden muss und darum sofort ohne Verzögerung angezeigt wird.
Gruß Xaver

[Stibitz]

ok das mit dem überblenden kenne ich hab ich auch angweendet, das hats in sich

ne frage zu margin, kann ich damit nur die Grafik positionieren welches sich verändern soll, oder auch das Feld welches die veränderung hervorrufen soll?

z.b. die Grafik ist 165 x 157 Pixel gross, aber das zu reagierende Bereich soll nur 40 x 157 Pixel gross sein.

jetzt aber. nehmen wir mal an, ich habe ein einzelnes bild. nehmen wir mal an es besteht aus 4 Farben, die ineinanderlaufen.
kann ich nun bei diesem Bild verschiedene Rolloverregionen einteilen, ohne das Bild zerschneiden zu müssen? d.h. wenn ich auf das rote farbfeld komme wird alles rot, wenn ich auf das blaue komme wird alles blau etc. ?
wenn ja wie müsste ich das anstellen?

[Laus]

sorry aber da stehe ich jetzt auf dem Schlauch, will heißen kann mir nicht so recht vorstellen wie du das meinst. ich rate mal
Du kannst natürlich jedem Link ein eigenes rollover Bild oder Farbe geben, einfach jedem Link eine eigene classe zuweisen.
und du kannst auch jedes x beliebige Feld mit margin oder padding und gegebenenfalls mit position: absolute und Angabe der Koordinaten positionieren dieser kann auch kleiner als das ursprüngliche Bild sein denn der Bereich für hoover wird ja extra definiert
ansonsten wäre ein Bild oder ein Link zu etwas wie du dir das vorstellt hilfreich.
Gruß Xaver

[Stibitz]

srry für meine komplizierten erklärungen.
ja da
http://www.teenie.gzb.ch

die ist die Seite. oben links befindet sich eine Navigationsleiste für die verlinkungen. (die die sich dreht am anfang) nun will ich denn rollovereffekt einbauen, so dass sich jenachdem auf welcher verlinkung (teenies ; Forum ; etc) sich die Maus befindet, der entsprechende Namen herforhebt. die grafik habe ich auch gemacht. jedoch weiss ich nicht wie ich einer grafik mehrere Rolloversecktoren zufügen kann.

[Stibitz]

hab ne lösung gefunden trozdem danke

[Laus]

Wie sieht die Lösung den aus ? Wäre für alle interesant wenn du sie posten könntest

[Stibitz]

naja Lösung ist übertrieben...
ich verschachtle das ganze einfach und zwar so :

<style type="text/css">
#wechsel a {
background: url(../images/leiterteam.gif) no-repeat;
display:block; width:157px; border:0; margin: 0px 0px -22px 0px/* Linkbereich begrenzen */
}
#wechsel img {
display:block; width:157px; height:110px; border:0; margin: 0px 0px -82px 0px
}
#wechsel a:hover img {
visibility: hidden; width:157px; height:110px;
}
#wechsel a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0; width:157px; height:110px; margin:0px 0px -104px 0px
}

* html #wechsel a {
margin-right:0px;
}
* html #wechsel a:hover {
width:157px; margin-right:0; /* Workaround fuer IE 5.01 */
}


#wechsel2 a {
background: url(../images/teenie-event.gif) no-repeat;
display:block; width:157px; margin: 0px 0px -22px 0px/* Linkbereich begrenzen */
}
#wechsel2 img {
display:block; width:157px; height:110px; border:0; margin: -25px 0px -63px 0px
}
#wechsel2 a:hover img {
visibility: hidden; width:157px; height:110px;
}
#wechsel2 a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0; width:157px; height:110px; margin:-47px 0px -85px 0px
}

* html #wechsel2 a {
margin-right:0px;
}
* html #wechsel2 a:hover {
width:157px; margin-right:0; /* Workaround fuer IE 5.01 */
}


#wechsel3 a {
background: url(../images/forum.gif) no-repeat;
display:block; width:157px; margin: 0px 0px -21px 0px/* Linkbereich begrenzen */
}
#wechsel3 img {
display:block; width:157px; height:110px; border:0; margin: -44px 0px -48px 0px
}
#wechsel3 a:hover img {
visibility: hidden; width:157px; height:110px;
}
#wechsel3 a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0; width:157px; height:110px; margin:-66px 0px -69px 0px
}

* html #wechsel3 a {
margin-right:0px;
}
* html #wechsel3 a:hover {
width:157px; margin-right:0; /* Workaround fuer IE 5.01 */
}


#wechsel4 a {
background: url(../images/teenies.gif) no-repeat;
display:block; width:157px; margin: 0px 0px -21px 0px/* Linkbereich begrenzen */
}
#wechsel4 img {
display:block; width:157px; height:110px; border:0; margin: -60px 0px -26px 0px
}
#wechsel4 a:hover img {
visibility: hidden; width:157px; height:110px;
}
#wechsel4 a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0; width:157px; height:110px; margin:-81px 0px -47px 0px
}

* html #wechsel4 a {
margin-right:0px;
}
* html #wechsel4 a:hover {
width:157px; margin-right:0; /* Workaround fuer IE 5.01 */
}


#wechsel5 a {
background: url(../images/fotos.gif) no-repeat;
display:block; width:157px; margin: 0px 0px -21px 0px/* Linkbereich begrenzen */
}
#wechsel5 img {
display:block; width:157px; height:110px; border:0; margin: -82px 0px -6px 0px
}
#wechsel5 a:hover img {
visibility: hidden; width:157px; height:110px;
}
#wechsel5 a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0; width:157px; height:110px; margin:-103px 0px -27px 0px
}

* html #wechsel5 a {
margin-right:0px;
}
* html #wechsel5 a:hover {
width:157px; margin-right:0; /* Workaround fuer IE 5.01 */
}
</style>

<body>
<p id="wechsel">
<a href=""><img src="../images/linksmovie.gif" border="0"></a>
</p>

<p id="wechsel2">
<a href="page1/flash.htm"><img src="../images/linksmovie.gif" border="0"></a>
</p>

<p id="wechsel3">
<a href="http://teenie.gzb.ch/phpBB2/login.php"><img src="../images/linksmovie.gif" border="0"></a>
</p>

<p id="wechsel4">
<a href=""><img src="../images/linksmovie.gif" border="0"></a>
</p>

<p id="wechsel5">
<a href=""><img src="../images/linksmovie.gif" border="0"></a>
</p>
</body>


eine andere lösung fiel mir nicht ein dazu...
problem:
durch die negativen pixelverschiebungen kann es nur vom Internetexplorer richtig interpretiert werden...

kennt jmd ne alternative?