Rollover ohne JS nur CSS

Hat jemand eine Idee, wie man mit normalen Bildern einen Rollover Effekt versehen kann?
Ohne die Background Methode, da ich 1000sende Bilder verwenden möchte und nicht jedes Mal eine Methode festlegen kann...

Ich habe mir schon überlegt 1x das originalbild und 1x das Rolloverbild einzublenden und dann nach dem Motto

#bild1-hover
{
display: none;
}

#bild1
{
#Definition
}

#bild1:hover
{
display: none;
bild1-hover
{
#definition
}

}

Aber swcheinbar mit CSS nicht möglich, jemand eine Idee?

[wahsaga]

Re: Rollover ohne JS nur CSS

Du könntest ein Hintergrundbild benutzen, welches beide Zustände bereits enthält - und "wechselst" diese dann über Änderung von background-position.


Oder auch zwei <img> im Quelltext notieren, von denen "normal" ein per display:none ausgeblendet ist, und für :hover dieses dann ein- und das andere aus.

[hasch]

Zu deinem 2. Wie mache ich dies, weil ich darf doch keine Zuweisungen schateln, oder?

EDIT:
Soweit bin ich...

#div_photo img
          {
           border: 1px;
           border-style: solid;
           border-color: #999999;
           border-left-color: #CCCCCC;
           border-top-color: #CCCCCC;
           padding: 4px;
          }
          
          #div_photo img:hover
          {
           display: none;
          }
          
          #div_photo #hover
          {
           display: none;
          }

[prego]

DIV#photo {
  background: url(meinbild.jpg);
}

DIV#photo:hover {
  background-position: 10px 0px;
} 

[hasch]

background: url(meinbild.jpg);

Das ist ja gerade das problem, es werden aus der DB zufällig Bilder gewählt, von vielen. Da kann ich nicht einfach ein festes Bild bei CSS festlegen, dies ist und war ja mein problem...

[prego]

Dann wär ein stück beispielcode glaub ich das richtige - sonst schiessen wir hier alle nur ins blaue.

[hasch]

Wie schon gepostet der Teil CSS:

#div_photo img
          {
           border: 1px;
           border-style: solid;
           border-color: #999999;
           border-left-color: #CCCCCC;
           border-top-color: #CCCCCC;
           padding: 4px;
          }
          
#div_photo #hover
          {
           display: none;
          }

Grafiken werden in der Form dargestellt:

<a href='#'><img src='1.jpg' alt='' /><img src='11.jpg' alt='' id='hover' /></a>

[prego]

Da seh ich dann auch nur die möglichkeit mit dem display none

<a href="#" class="hover_bild">
  <img src="1.jpg" alt="" class="off" />
  <img src="11.jpg" alt="" class="on" />
</a>


//CSS dazu
A.hover_bild IMG.off{
  border: 1px;
  border-style: solid;
  border-color: #999999;
  border-left-color: #CCCCCC;
  border-top-color: #CCCCCC;
  padding: 4px;
}

A.hover_bild IMG.on {
  //...
  display: none;
}

A.hover_bild:hover IMG.off {
  display: none;
}

A.hover_bild:hover IMG.on {
  display: block;
} 

[hasch]

Vielen Dank.
Nach etwas Anpassung funktioniert es bestens. Du hast mich auf eine ganz andere Denkweise gebracht, indem du noch eine Klasse für den Link gesetzt hast, danke.

Leider gehts im IE nicht, gibt es dafür nen Grund?

[prego]

Hmm, das sollte im IE auch gehen - bedenke das der IE6 :hover nur auf A-Tags kann.

Wenn er es auf allen Elementen können soll schau mal hier: http://www.triebschicht.de/item/23/

[hasch]

Vielen Dank.

Ich habe es mal nach deinem dort veröffentlichten Beispiel "nachgebaut", aber bei mir funktioniert es nicht:

body
     {
      margin: 0px;
      padding: 0px;
      font-size: small;
      font-family: Arial, sans-serif;
      behavior:url("csshover.htc");
     }
     
#div_photo
          {
           margin: 0px;
           padding: 0px;
           padding-top: 35px;
           padding-left: 20px;
           height: 147px;
           min-width: 210px;
           position: absolute;
           border: 0px;
           top: 0px;
           left: 286px;
           background: url(photo.jpg) bottom left no-repeat;
          }

          #div_photo a.hover_bild img.off
          {
           border: 1px;
           border-style: solid;
           border-color: #999999;
           border-left-color: #CCCCCC;
           border-top-color: #CCCCCC;
           padding: 4px;
           }

           #div_photo a.hover_bild img.on
           {
            display: none;
           }

           #div_photo a.hover_bild:hover img.off
           {
            display: none;
           }

           #div_photo a.hover_bild:hover img.on
           {
            display: inline;
            border: 1px;
            border-style: solid;
            border-color: #999999;
            border-left-color: #CCCCCC;
            border-top-color: #CCCCCC;
            padding: 4px;
           } 

So die csshover.htc liegt im selben Verzeichnis. Warum geht dies nicht?

ab Windows XP SP2 muß das .htc-File mit dem Mime-Type “text/x-component” vom Webserver ausgeliefert werden

Wie kann ich dies erreichen?

Vielen Dank schonmal im vorraus!

[prego]

Hi,

da du hover nur auf A verwendest sollte es auch im IE gehen ohne das du das .htc lädst. Irgendwo muss ein kleiner Fehler sein - bin nur grade spät dran und kann daher nicht genauer gucken.

Um zu erreichen das der Apache das .htc File mit dem richtigen mime-type ausliefert muss in der mime.types-Datei (normalerweilse im selben Verzeichniss wo auch die httpd.conf liegt) folgende Zeile stehen:

text/x-component        .htc

Zur Not nachschaun welche mime.types Datei der Apache lädt - steht in der httpd.conf

EDIT:

---

Um nachzuschauen mit welchem Content-Type das .htc aufgerufen wird kann du den Header analyser von derHund nehmen. http://tools.nophia.de/werkzeuge-htt...alysieren.html - über dein einfach mal die komplette Adresse deiner .htc Datei aufrufen und unter Content-Type nachschauen.

---

[hasch]

Danke, kannst du mal schauen, was ich flashc gemacht habe, dass der dies im IE nicht anwenden kann!?

[prego]

Gib mal deinen HTML Code dazu.

[Quetschi]

Ich gehe hierfür eigentlich am liebsten so vor wie wahsagas erster Beispiel, nur dass ich das zu verwendende Hintergrundbild im style-Attribut im html-Quelltext festlege, was ja kein Problem ist wenn die Seite dynamisch erzeugt wird.